サンプルコード
CSS のサンプルコード
コードと描画結果を並べて確認できる CSS サンプル。
画像の下にできる隙間を消すには
画像は初期値だと文字と同じ行に置かれるため、下に数 px の隙間ができる。画像を display: block にするか vertical-align を変えて、その隙間を消す方法を示す。子要素の上マージンが親の外へはみ出すのを防ぐには
親要素の中の子に付けた margin-top が親の外へ突き抜けるのを、display: flow-root で防ぐ基本形を示す。隣り合う要素のマージンが重なって一つになる相殺の仕組みと、止め方もあわせて確認できる。要素の縦横比を固定するには
aspect-ratio で要素の縦横比を宣言し、幅が変わっても 16:9 や 1:1 の形を保つ基本形を示す。高さを計算して指定しなくても、幅から高さが自動で決まる。要素をふんわり浮かせるには
box-shadow でカードをふんわり浮かせる基本形を示す。ぼかし半径と透明度で浮き具合を調整する。要素を中央に配置するには
flexbox の justify-content と align-items を使い、子要素を親要素の上下左右の中央に配置する基本形を示す。未実行スクロールバーの見た目を変えるには
標準プロパティの scrollbar-width と scrollbar-color で、スクロールバーの太さと色を変える方法を示す。ベンダー拡張の ::-webkit-scrollbar と併用できない点まで含めて扱う。区切り線の中央に文字を入れるには
「または」のようなラベルを挟んだ区切り線を、擬似要素と flex の余白分配だけで作る基本形を示す。線の長さを固定値で決めないため、文字数や画面幅が変わっても左右が自動で釣り合う。キーボード操作時だけフォーカス枠を出すには
ボタンやリンクをマウスでクリックしたときにはフォーカスの枠を出さず、Tab キーで移動したときだけ outline で枠を描く。outline: none で枠を消す代わりに :focus-visible に見た目を指定するので、キーボードで操作する利用者が現在位置を見失わない。未実行内容が少なくてもフッターを画面の下に置くには
縦並びの flexbox で本文の高さを flex: 1 に任せ、本文が短いページでもフッターを画面の下端に置く。本文が長いときはフッターが内容の後ろに続くだけなので、固定表示と違って読む邪魔にならない。背景をすりガラス風にぼかすには
backdrop-filter: blur() で要素の背後にあるものだけをぼかし、いわゆるすりガラス（フロストガラス）の見た目を作る基本形を示す。要素自身の中身はぼけない。グラデーションのボタンを作るには
background に linear-gradient を指定し、角丸と余白を添えてグラデーションのボタンを作る基本形を示す。hover で明度を少し上げて押せる印象を出す。未実行文字にグラデーションをかけるには
背景に敷いた linear-gradient を background-clip: text で文字の形に切り抜き、グラデーションで塗られた見出しを作る基本形を示す。画像に置き換えないので、文字は選択もコピーも検索もできるままである。カードを自動で折り返して並べるには
grid-template-columns の repeat(auto-fit, minmax()) を使い、メディアクエリを書かずにカードを画面幅へ合わせて折り返す基本形を示す。列数はコンテナの幅から自動で決まる。未実行ホバー時にカードを持ち上げるには
カーソルを載せたカードを transform: translateY で少し上へ動かし、同時に box-shadow を広げて持ち上がったように見せる。変化は transition で 0.2 秒かけて行い、タッチ端末・キーボード操作・動きを減らす設定にもそれぞれ対応させる。画像を枠いっぱいに切り抜いて表示するには
width と height を指定した img は既定では引き伸ばされて元の縦横比が崩れる。object-fit: cover を与えると、比を保ったまま枠を覆い、はみ出した部分だけが切り取られる。テキストを複数行で省略するには
display: -webkit-box と -webkit-line-clamp を組み合わせ、指定した行数を超えたテキストの末尾を … で省略表示する基本形を示す。読み込み中のスピナーを作るには
1 要素の border と @keyframes rotate だけで回転するスピナーを作る基本形を示す。画像も追加の DOM も要らないため、読み込み中の表示を最小のコストで用意できる。バッジを要素の右上に重ねるには
position: absolute のバッジを、親に position: relative を与えてカードの右上へ重ねる基本形を示す。位置の基準になる祖先を明示しないと、バッジはページ全体を基準に飛んでいく。進捗バーを作るには
外枠と中身の 2 要素だけで進捗バーを作り、進捗率をカスタムプロパティ 1 箇所で持たせる基本形を示す。角丸を保ったまま中身をはみ出させない指定と、支援技術へ進捗を伝える属性も併せて扱う。テーブルを横スクロールさせるには
列の多い表を狭い画面に収めるために、テーブルを overflow-x: auto の要素で包み、テーブル自身には min-width を与えて横スクロールさせる。ページ全体は横に広がらない。横スクロールのカードをぴったり止めるには
横に並べたカードの親に scroll-snap-type を、各カードに scroll-snap-align を指定し、スクロールが止まったときにカードの左端がそろう位置へ合わせる。JavaScript を使わずに、カードごとに止まるカルーセルの動きを作れる。未実行読み込み中のスケルトン表示を作るには
本物の内容と同じ大きさの灰色の箱を並べ、linear-gradient の明るい帯を background-position のアニメーションで流して、読み込み中のスケルトン表示を作る。中身が届く前から配置が決まるので、差し替えたときに周りのレイアウトが動かない。吹き出しを作るには
疑似要素 ::after の border を使い、画像を足さずに吹き出しの三角形を描く基本形を示す。本体と三角形の色はカスタムプロパティで 1 箇所にまとめる。ヘッダーを上部に固定するには
position: sticky でスクロール領域の先頭にヘッダーを貼り付ける基本形を示す。スクロールしても見出しが消えないため、長い一覧でも今どこを見ているかが分かる。トグルスイッチを作るには
チェックボックスを視覚的に隠したうえで、:checked と隣接兄弟セレクタを使ってオン・オフが切り替わるトグルスイッチの見た目を作る。JavaScript は使わない。テキストを1行で省略するには
white-space・overflow・text-overflow を組み合わせ、1行に収まらないテキストの末尾を … で省略表示する基本形を示す。未実行テーブルの行を交互に色分けするには
tbody tr:nth-child(even) で偶数行だけに背景色を敷き、行を足しても縞模様が自動で追従するテーブルの基本形を示す。ホバー中の行を目立たせる指定も併せて扱う。