CSSテクニック集

親のpaddingやmax-widthに制限されず、片側だけ画面端まで背景や装飾を広げたい時に使えるテクニックです。主にカードやセクションの背景装飾などで活躍します。

複数の子要素を同じ高さに揃えつつ、各子要素内のコンテンツを上下中央に配置するテクニックです。カードレイアウトやリストでよく使います。

テキストにホバーした時に、左から右へ滑らかに下線が伸びるアニメーション効果です。ナビゲーションリンクやボタンで使われる人気のUIエフェクトです。

画像にマウスをホバーした時に、滑らかに拡大するアニメーション効果です。ギャラリーやカード、商品一覧などでよく使われるインタラクティブなUIエフェクトです。

ボタン内に矢印アイコンを配置し、hover時にボタンの色が反転したり、矢印がスライド・アニメーションするインタラクティブなUIテクニックです。CTAやリンクボタンでよく使われます。

画面幅が狭い時にテーブル全体を横スクロールできるようにするテクニックです。レスポンシブ対応やデータ量の多い表で便利です。

CSSだけで実装できるシンプルなドロップダウンメニューのテクニックです。ホバーやフォーカスでメニューを表示し、ナビゲーションやアクションリストに使えます。

flexboxレイアウトで画像やボタンなどの要素が極端に小さく潰れてしまうのを防ぐテクニックです。min-widthやmin-height、flex-shrink: 0;を活用します。