上下左右に影（ぼかし）を表示させて、カードを挿入した感じにしたいけど、やり方が分からないよ…。
今回はそんな悩みを解決するコードの書き方を紹介します。
この記事で作れるもの
この記事では、「ねこ」を書いたdiv要素の上下左右に影（ぼかし）を表示させて、カードを挿入した感じにしていきます。
シンプルなコードで作成しているので、ご自身のサイトでも加工してお使いください。
コードの紹介
まずはHTMLから。いつもの超シンプルな記述です。
1 2 3 | <div class="cat"> ねこ </div> |
続いてCSS。
1 2 3 4 5 6 7 | .cat { width: 100px;/*-- 任意の数値（入力必須） --*/ height: 100px;/*-- widthと同じ（入力必須） --*/ border: 1px solid gray;/*-- 任意の装飾 --*/ border-radius: 5px;/*-- 角を丸くしたい場合のみ（サイズは任意） --*/ box-shadow: 0px 0px 5px;/*-- 3つ目の数値でぼかしの幅を指定（サイズは任意） --*/ } |
任意で変える項目が多いので、お好みで調整してください。
コードの解説
今回はそこでまで難しくないので、成分の分解はしません。
ポイントである[box-shadow]だけ解説します。
box-shadow
ボックスに影を表示させるプロパテイです。
今回は[box-shadow]の中に、3つの値を記述しています。
1つ目の値：上下方向の影
2つ目の値：左右方向の影
3つ目の値：ぼかしの距離
今回は、1・2つ目の値を0にすることで影の実体を非表示にし、3つ目の値を0以上にしてぼかしを表示させました。
そうすることで、上下左右に影（ぼかし）を表示させることができます。
お役立ちメモ
borderは無くても良い
[border]がなくても、[box-shadow]だけで枠線（境界線）があるように見えます。
むしろ、[border: solid;]だと線が濃く見えるので、使わないほうがお洒落かもしれない。
子要素を中央に配置したい
上下左右中央に配置する場合は、親要素のCSSに次のとおり書きます。
1 2 3 4 | display: flex; flex-direction: column; align-items: center; justify-content: center; |
左右にだけ中央配置する場合は、上記から「justify-content: center;]を削除するか、上記4行を一切使わずに[margin:auto;]とだけ記述するかでokです。
また、上下にだけ中央配置する場合は、上記から「align-items: center;]を削除すればokです。
まとめ
制作模写をしていると、上下左右方向に影（ぼかし）を使った表現を目にすることがあります。
機会があればぜひ使ってみて下さいね。
