ポートフォリオサイトを制作しているとき、
「フッターとコンテンツの境界線をどう見せるか」で悩みました。
単純にborderを使う方法もありますが、どうしても線の印象が単調でお粗末な印象を受けてしまいがちです。
そこで今回は、Tailwind CSS のbox-shadowを使って自然な境界線を表現する方法を紹介します。
box-shadowとは？
冒頭でも紹介した通り、Tailwindcssのクラスの1つでオブジェクトに陰影を付与します。
陰影の度合いもカスタマイズでき、浮き上がったような陰影もあれば、凹んだようにも見える陰影もあります。
陰影自体に色を付けることもできますよ。
borderではダメな理由
<footer class="border-t border-gray-300">
...
</footer>
この方法だと、
・線がはっきり出すぎる
・デザインが少し硬くなる
ポートフォリオは「やわらかい印象」にしたかったため、別の方法を考えました。
box-shadowを使う方法
box-shadowはfooterに付与しても表示されません。
<!-- ダメなコード -->
<footer class="shadow-lg">
...
</footer>なので、box-shadowをフッターっぽく見せる方法を使います。
bodyタグが閉じる手前で下記のコードを入れます。
<body>
...
<div class="shadow-lg"><br></div>
<div><br></div>
</body>
この指定をすると、上方向にふわっとした影が付きます。
これにより、
・境界線が自然になる
・圧迫感が減る
・少し立体感が出る
というメリットがあります。
なぜbox-shadowが有効なのか
borderは「線」ですが、
box-shadowは「影」です。
影はグラデーション状になるため、
視覚的に柔らかく見えます。
特にポートフォリオのような
個人サイトでは相性が良いと感じました。
実際に制作して感じたこと
今回の制作を通して、
「デザインは小さな違いで印象が変わる」
と実感しました。
最初はただの技術実装でしたが、
見た目の印象まで考えることが
Web制作では大切だと学びました。
まとめ
フッターの境界線を自然に見せたいなら box-shadow
borderより柔らかい印象になる
ポートフォリオ制作におすすめ
初心者の方も、ぜひ試してみてください。