つちだにんじん

様々なジャンルで自分のメモや得た知識をnoteに書いていく予定です。 誰かの役に立つこ…

つちだにんじん

様々なジャンルで自分のメモや得た知識をnoteに書いていく予定です。 誰かの役に立つことがあればいいなと思っています。 よく聞かれますが、別に特別にんじんが好きなわけではありません。 https://ninjin.stars.ne.jp (個人HP)

ドロップシャドウとボックスシャドウ

こんにちは、つちだにんじんです。 最近「逃げ若」にどハマりして生きるのが楽しいです（余談） 余談はさておき、今回はCSSのドロップシャドウとボックスシャドウについて書きます。 ドロップシャドウとボックスシャドウの違いドロップシャドウとボックスシャドウ、似たようなものですが少し違います。 簡単にいえば、ドロップシャドウ＝オブジェクトにシャドウを適用、ボックスシャドウ＝ボックス（箱要素）にシャドウを適用するイメージです。 これは私のHPで検証ツールを用いてそれぞれシャドウを

つちだにんじん

    • ILFORD使い捨てカメラ

      こんにちは、つちだにんじんです。 先日、ILFORDの使い捨てカメラを現像しました。 ここ数年でフィルムの値上げが半端なくて、なかなか手が出しにくくなってきました・・・。 入荷困難なフィルムも多く、フィルム民には厳しい世になりました。 今回のILFORD使い捨てカメラは、たまたまカメラのキタムラが入荷していたのを購入したものです。 価格は¥2,000くらいだったと思います。 地元のキタムラ、時々珍しいフィルムとか入荷してたりするので嬉しいです。高いけど・・・。 因みにI

      つちだにんじん

      • 【web】上下(左右)中央揃えにする方法

        こんにちは、つちだにんじんです。 前回は左右中央揃えについて書きましたので、今回は上下（垂直方向）中央揃えについてです。 上下左右中央揃えもいくつか紹介しています。 上下（垂直方向）の中央揃えflex まずはflexの上下中央揃えです。 たぶんこれが一番簡単で単純に中央揃えできるのでないかと思います。 <div class="center">にんじんしりしり</div><div class="center-2">にんじんしりしり</div> /* 上下に中央 */.

        つちだにんじん

        • 【web】左右中央揃えにする方法

          こんにちは、夏フェス参戦よりも仕事を選んだことを死ぬほど後悔しているつちだにんじんです。 今回は左右中央揃えにする方法をいくつか書こうと思います。 web制作していると、どうしても中央揃えにしないといけない場面が多々ありますよね・・・。 でもうまくいかないこともしばしば・・・。 そんな時のためにいくつか方法を試せるように、ここにメモを残しておきます。 「数打てばどれか当たるだろ戦法」です。 左右（水平方向）に中央揃え左右中央揃えはめちゃくちゃよく使うものだと思います。

          つちだにんじん

        ドロップシャドウとボックスシャドウ

        つちだにんじん

          【web】画像リンクのマウスオーバー

          こんにちは、つちだにんじんです。 今回は画像にリンクを貼った時のマウスオーバーの動きのアイディアをいくつか書きます。 内容は全てHTML・CSSのみです。 クローズアップ<div class="link-wrap">  <a href="">ダミー画像</a></div> /*画像の挿入がで着ないためダミー生成*/a{  background: repeating-linear-gradient(45deg, #94b8b4 0px, #94b8b4 5px, #c3d5

          つちだにんじん

          【web】画像リンクのマウスオーバー

          つちだにんじん

          【web】マウスオーバーアイディア

          こんにちは、つちだにんじんです。 今回はリンクボタンのマウスオーバーでの変化の自分なりのアイディアをいくつか書こうと思います。 一般的によく使われるのは、マウスオーバーで透明度を上げる変化ですよね。 a:hover{ opacity: 0.8;} の一文だけで済んでしまいますし・・・（怠惰） でもでっかくなら、マウスオーバーでの変化でwebサイトを楽しくさせたいですよね！ ということで、いくつか私のマウスオーバーアイディアです！ 色を変えるまずは定番である色を変化さ

          つちだにんじん

          【web】マウスオーバーアイディア

          つちだにんじん

          【web】CSSアニメーション

          こんにちは、つちだにんじんです。 今回は、私なりのCSSででできるアニメーションアイディアをメモしていこうと思います。 私はjQueryやJavaScriptの使い手ではないので、極力HTMLとCSSのみでできるものをいつも模索しています。 悪く言えば怠惰、よく言えば猛者でしょうか・・・・ 私の場合は前者です（反省） でも、なるべくCSSでできる方が読み込みも早いので悪いことではないはずです！！！（開き直り） 点滅するアニメーションまずは点滅するアニメーションです。

          つちだにんじん

          【web】CSSアニメーション

          つちだにんじん

          【web】擬似要素::beforeと::after

          こんにちは、つちだにんじんです。 今回はCSSの擬似要素である「::before」と「::after」について書きます。 web初心者でも、この２つの擬似要素はよく使うのではないでしょうか！！ 今回はそんな２つの擬似要素についてです。 ::before、::afterとは？::beforeと::afterとは何かというと、指定した要素の前（::before）や後（::after）に要素を追加することのできるものです。 例えば こんな風にdivに対して前や後に要素を追加で

          つちだにんじん

          【web】擬似要素::beforeと::after

          つちだにんじん

          【web】要素の横並び（flex）

          こんにちは、つちだにんじんです。 今回は要素を横並びにするときに使うflexについて書きます。 これ、とても便利なので知っておいて損はないです！！！ flexについてflexとは、CSSのdisplayプロパティの値のひとつです。 display: flex;を指定すると、指定の要素内にあるものを横並びにしてくれます。 flexを指定するのは、横並びにしたいものを入れている箱（親要素）に指定します。 <!---HTML--><div class="flex-box">

          つちだにんじん

          【web】要素の横並び（flex）

          つちだにんじん

          【graphic】パターンの作成方法

          こんにちは、つちだにんじんです。 今回はAdobe Illustratorでのパターンの作成方法を紹介します。 パターンというのは、 このように、好きなパターン模様を作り、塗りなどに設定できる機能です。 塗りだけでなく、線にもパターンを適応させることができます。 作成方法パターンに登録したい模様を作成する ここから作成方法を書きます。 まず、パターンに登録したい模様を作成します。 模様は好きな模様でOKです！！ 模様を作るときに、あまり上下左右に隙間があるとパターン

          つちだにんじん

          【graphic】パターンの作成方法

          つちだにんじん

          Googleフォントの使い方

          こんにちは、つちだにんじんです。 今回はGoogleフォントについて書きます。 web上だとフォントに限りがあって、デザインの幅が狭まりますよね・・・ そんな中でも、Googleフォントを使えばフォントの幅も広がるのでお勧めです！！ Googleフォントとは？Googleフォントは、Googleフォントで提供されているフォントをwebサイトに読み込むことで、そのフォントを表示することができるようになるというものです。 Chrome以外のOSでも表示してくれるので、とても

          つちだにんじん

          Googleフォントの使い方

          つちだにんじん

          【web】レスポンシブに対応する

          こんにちは、つちだにんじんです。 今回はweb制作における、レスポンシブに対応させる方法について自分なりのメモを残しておこうと思います。 レスポンシブに対応させるのって、結構面倒くさいですよね・・・ @mediaレスポンシブに対応させる書き方として多く使われているのがこの「@media」だと思います。 @maediaは、「どのようなメディアの際にこの内容を反映させますか？」みたいな感じです。 例えば下記のような・・・↓ @media screen and (max-wi

          つちだにんじん

          【web】レスポンシブに対応する

          つちだにんじん

          【graphic】飛び出す文字の作り方

          こんにちは、つちだにんじんです。 今回はAdobe Illustratorで飛び出す文字を作る方法を書きます。 テキストを用意するまずは飛び出させたいテキストを用意します。 フォントはなんでもOKです！ アウトラインをかけなくてもできますので、後々テキスト修正する可能性があることを考えれば、アウトラインはかけない方がいいかと思います！ テキストに境界線をつける 次に、テキストに境界線を設定します。 普通に線を設定するだけだと、きっと文字の内側に線が入っていってしまうと

          つちだにんじん

          【graphic】飛び出す文字の作り方

          つちだにんじん

          【web】:rootで変数を定義する

          こんにちは、つちだにんじんです。 今回は、cssの「:root」について書きます。 実は私も最近知って、「はえー！便利ー！」と感動したばかりです笑 :rootについて「:root」は、cssの擬似クラスの一つです。 擬似クラスは他にも「:hover」「::before」「::after」「:nth-of-type」などたくさんあって、セレクタに付与して使うものです。 今回は:rootを使って変数を定義する便利な方法を紹介します。 （cssの値のテンプレみたいなのが設定でき

          つちだにんじん

          【web】:rootで変数を定義する

          つちだにんじん

          【web】アイコン付きリンクボタンの作り方

          こんにちは、つちだ にんじんです。 今回は、よく見かけるアイコン付きのリンクボタンの作り方を書きます。 初心者向けにしっかり説明できたらと思います（自分も初心者） こういうボタンです↑ 色々なところでよく見かけ、汎用性の高いボタンです。 ちなみにこのボタンは、 <!---HTML--><a href="URL"> <div class="text">問合せはこちら</div> <div class="icon"></div></a> /*CSS*/a{

          つちだにんじん

          【web】アイコン付きリンクボタンの作り方

          つちだにんじん

          【web】テキストの装飾

          こんにちは、つちだにんじんです。 今回は、web制作の際にテキストに装飾をつける方法について書きます。 「文字を一部装飾して目立たせたい！」ということはよくあるかと思います。 下線やラインマーカー風、ストライプや点線等々様々なライン装飾がありますよね！ 私はできるだけ面倒でなく、画面幅が変わってもできるだけ崩れないやり方はないのかと血眼になって調べています笑 面倒臭いのはイヤ・・・(切実) まずはHTMLです。 spanタグで括ってクラス名をつけています。 <!---

          つちだにんじん

          【web】テキストの装飾

          つちだにんじん