サンプルコード
CSS のサンプルコード
コードと描画結果を並べて確認できる CSS サンプル。14 件。
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。静的確認は、CSS の構文と仕様で確認し、ブラウザでの描画確認までは行っていないものである。
テーブルの行を交互に色分けするには
tbody tr:nth-child(even) で偶数行だけに背景色を敷き、行を足しても縞模様が自動で追従するテーブルの基本形を示す。ホバー中の行を目立たせる指定も併せて扱う。
実行確認済み
背景をすりガラス風にぼかすには
backdrop-filter: blur() で要素の背後にあるものだけをぼかし、いわゆるすりガラス（フロストガラス）の見た目を作る基本形を示す。要素自身の中身はぼけない。
実行確認済み
吹き出しを作るには
疑似要素 ::after の border を使い、画像を足さずに吹き出しの三角形を描く基本形を示す。本体と三角形の色はカスタムプロパティで 1 箇所にまとめる。
実行確認済み
テキストを複数行で省略するには
display: -webkit-box と -webkit-line-clamp を組み合わせ、指定した行数を超えたテキストの末尾を … で省略表示する基本形を示す。
実行確認済み
区切り線の中央に文字を入れるには
「または」のようなラベルを挟んだ区切り線を、擬似要素と flex の余白分配だけで作る基本形を示す。線の長さを固定値で決めないため、文字数や画面幅が変わっても左右が自動で釣り合う。
実行確認済み
カードを自動で折り返して並べるには
grid-template-columns の repeat(auto-fit, minmax()) を使い、メディアクエリを書かずにカードを画面幅へ合わせて折り返す基本形を示す。列数はコンテナの幅から自動で決まる。
静的確認
読み込み中のスピナーを作るには
1 要素の border と @keyframes rotate だけで回転するスピナーを作る基本形を示す。画像も追加の DOM も要らないため、読み込み中の表示を最小のコストで用意できる。
実行確認済み
要素の縦横比を固定するには
aspect-ratio で要素の縦横比を宣言し、幅が変わっても 16:9 や 1:1 の形を保つ基本形を示す。高さを計算して指定しなくても、幅から高さが自動で決まる。
実行確認済み
バッジを要素の右上に重ねるには
position: absolute のバッジを、親に position: relative を与えてカードの右上へ重ねる基本形を示す。位置の基準になる祖先を明示しないと、バッジはページ全体を基準に飛んでいく。
実行確認済み
ヘッダーを上部に固定するには
position: sticky でスクロール領域の先頭にヘッダーを貼り付ける基本形を示す。スクロールしても見出しが消えないため、長い一覧でも今どこを見ているかが分かる。
実行確認済み
グラデーションのボタンを作るには
background に linear-gradient を指定し、角丸と余白を添えてグラデーションのボタンを作る基本形を示す。hover で明度を少し上げて押せる印象を出す。
静的確認
テキストを1行で省略するには
white-space・overflow・text-overflow を組み合わせ、1行に収まらないテキストの末尾を … で省略表示する基本形を示す。
静的確認
要素を中央に配置するには
flexbox の justify-content と align-items を使い、子要素を親要素の上下左右の中央に配置する基本形を示す。
静的確認
要素をふんわり浮かせるには
box-shadow でカードをふんわり浮かせる基本形を示す。ぼかし半径と透明度で浮き具合を調整する。
実行確認済み