Webコーダーが厳選！現場で本当に使うCSS小技10選

「CSSはなんとなく書けるけど、もっとうまく使いたい」と感じていませんか？ この記事では、Webコーダーとして6年間の実務で何度も助けられたCSS小技を厳選して10個紹介します。コピペしてすぐ使えるコードつきなので、ぜひ手元のプロジェクトで試してみてください。

aspect-ratio でサイズ比率を固定する

画像や動画を16:9や4:3で表示したいとき、昔は padding-top: 56.25% というハックを使っていました。でも今は aspect-ratio 一行で完結します。特に画像の縦横比をレイアウト崩れなく保ちたいときに重宝します。

/* 16:9 の比率で固定 */
.video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* カード画像を正方形に */
.card-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

aspect-ratio は現在ほぼすべてのブラウザで使えます。古い書き方（padding ハック）をしている箇所があれば、順次置き換えていくとコードがすっきりします。

clamp() でフォントサイズをレスポンシブに

レスポンシブ対応でフォントサイズを変えるとき、メディアクエリを何行も書いていませんか？ clamp() を使えば「最小値・推奨値・最大値」を一行で指定できます。

h1 {
  /* 最小16px、画面幅に応じて変化、最大32px */
  font-size: clamp(16px, 4vw, 32px);
}

p {
  font-size: clamp(14px, 2vw, 18px);
}

vw（ビューポート幅）を推奨値に使うのがポイント。画面サイズに合わせて自然にスケールします。

gap で Flexbox の余白を簡潔に

Flexboxで要素間の余白を margin で調整していたころ、「最後の要素だけ margin をなくしたい」問題に悩まされた方は多いと思います。gap ならその悩みがなくなります。

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;          /* 上下左右すべてに適用 */
  gap: 16px 24px;     /* 上下16px, 左右24px */
}

:is() でセレクタをまとめる

同じスタイルを複数のセレクタに当てたいとき、こんな書き方をしていませんか？

/* Before */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.4;
}

:is() を使うと、ネストしたセレクタも一行でスッキリ書けます。

/* After */
:is(h1, h2, h3, h4) {
  font-weight: 700;
  line-height: 1.4;
}

/* ネストにも使える */
:is(article, section) h2 {
  color: #2d7a4f;
}

CSS変数（カスタムプロパティ）でテーマ管理

サイトのカラーやフォントサイズをCSS変数でまとめておくと、デザイン変更があったときに修正箇所が一か所で済みます。特に複数ページにわたるサイトでは必須のテクニックです。

:root {
  --color-primary:   #2d7a4f;
  --color-text:      #333;
  --color-bg:        #fff;
  --font-size-base:  16px;
  --spacing-lg:      48px;
}

a {
  color: var(--color-primary);
}

.section {
  padding: var(--spacing-lg) 0;
}

ダークモードの切り替えにもCSS変数が大活躍します。後述の prefers-color-scheme と組み合わせると強力です。

scroll-behavior: smooth でなめらかスクロール

ページ内リンクをクリックしたとき、ガクっと飛ぶのではなくなめらかにスクロールさせたい場合、JavaScriptなしでできます。

html {
  scroll-behavior: smooth;
}

[alert title=“注意”]アクセシビリティの観点から、prefers-reduced-motion でアニメーション無効の設定をしているユーザーには動きを止めてあげましょう。 @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }[/alert]

object-fit で画像トリミングをCSSだけで

カード型レイアウトで、画像サイズがバラバラでもきれいに揃えたい場合は object-fit: cover が便利です。画像の縦横比を保ちながら、指定した枠に収めてくれます。

.card-img {
  width:       100%;
  height:      200px;
  object-fit:  cover;          /* 比率を保ちながら枠を埋める */
  object-position: center top; /* 基準点を指定 */
}

position: sticky で追従ヘッダー

ヘッダーやナビゲーションをスクロールに追従させたいとき、position: fixed だと「ページ上部に被る」問題が起きがちです。sticky を使うと自然に追従します。

header {
  position: sticky;
  top:      0;        /* 画面上端からの距離 */
  z-index:  100;
  background: #fff;
}

sticky は親要素の高さの範囲内でのみ追従します。親要素に overflow: hidden があると効かなくなるので注意。

writing-mode で縦書きテキスト

和風デザインや雑誌レイアウトで縦書きテキストを使いたいとき、writing-mode 一発で実現できます。サイドのラベルや見出し装飾にも使えます。

.vertical-text {
  writing-mode: vertical-rl;  /* 右から左へ縦書き */
  text-orientation: mixed;
}

/* 左から右なら */
.vertical-ltr {
  writing-mode: vertical-lr;
}

@media (prefers-color-scheme) でダークモード対応

ユーザーのOS設定に合わせてダークモードを自動で切り替えることができます。CSS変数と組み合わせると最小限の記述で対応できます。

/* ライトモード（デフォルト） */
:root {
  --color-bg:   #ffffff;
  --color-text: #333333;
}

/* ダークモード（OS設定に連動） */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:   #1a1a1a;
    --color-text: #e8e8e8;
  }
}

body {
  background: var(--color-bg);
  color:      var(--color-text);
}

CSS変数との組み合わせが鍵。変数を切り替えるだけで、サイト全体の配色が一気に変わります。

まとめ

今回紹介した10のCSS小技をまとめます。

プロパティ / テクニック

用途

aspect-ratio

サイズ比率の固定

clamp()

レスポンシブなフォントサイズ

gap

Flexbox / Grid の余白管理

:is()

セレクタのまとめ書き

CSS変数

テーマカラーの一元管理

scroll-behavior

なめらかスクロール

object-fit

画像トリミング

position: sticky

追従ヘッダー

writing-mode

縦書きテキスト

prefers-color-scheme

ダークモード対応

どれも今日から使えるものばかりです。1つずつ試していくうちに、コーディングのスピードと品質が確実に上がっていきます。ぜひ手元のプロジェクトで使ってみてください！