【便利なCSS】clamp・aspect-ratio・min-height・min-width・擬似クラスまとめ

clamp関数

clamp()は、最小値・推奨値・最大値をまとめて指定できるCSS関数です。画面幅に合わせて自然に変化させつつ、小さくなりすぎたり大きくなりすぎたりするのを防げます。特に見出しの文字サイズやセクション余白で便利です。

.section-title {
  font-size: clamp(24px, 4vw, 48px);
  line-height: 1.4;
}

.card {
  padding: clamp(16px, 3vw, 40px);
}

clamp(24px, 4vw, 48px)の場合、最小は24px、画面幅に応じた推奨値は4vw、最大は48pxです。メディアクエリを細かく書かなくても、なめらかなレスポンシブ調整ができます。

clamp関数で押さえたいポイント

clamp関数は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

clamp関数の確認方法

スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。

aspect-ratio

aspect-ratioは、要素の縦横比を指定するプロパティです。画像、動画、カード、サムネイルなど、比率を保って表示したいパーツに使います。以前は疑似要素やpadding-topで比率を作ることも多かったですが、今はかなりシンプルに書けます。

.thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

画像を中に入れる場合は、親にaspect-ratio、画像にobject-fit: cover;を指定すると、比率を保ちながらきれいにトリミングできます。

aspect-ratioで押さえたいポイント

aspect-ratioは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

aspect-ratioの確認方法

スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。

min-height

min-heightは、要素の最小の高さを指定するプロパティです。中身が少ないときでも一定の高さを確保し、中身が増えたら自然に伸びるため、ヒーローエリアやカード、フォーム完了画面などで使いやすいです。

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.content-area {
  min-height: 420px;
}

heightで固定すると内容が増えたときに窮屈になりますが、min-heightなら最低限の高さだけを保証できます。スマホの全画面表示には、従来の100vhよりもアドレスバーの影響を受けにくい100svhが便利です。

min-heightで押さえたいポイント

min-heightは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

min-heightの確認方法

スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。

min-width

min-widthは、要素の最小の幅を指定するプロパティです。ボタンやカードなどで「これ以上小さくなると読みづらい」という幅を保てます。横スクロールや折り返しの設計と組み合わせると、パーツの見た目が安定します。

.button {
  min-width: 160px;
  padding: 12px 20px;
}

.pricing-card {
  min-width: 280px;
}

例えばボタンにmin-widthを指定しておくと、短い文言でも押しやすいサイズを維持できます。カードリストではmin-widthとflex-wrap、または横スクロールを組み合わせると、レスポンシブ時の崩れを防ぎやすくなります。

min-widthで押さえたいポイント

min-widthは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

min-widthの確認方法

スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。

擬似クラス

擬似クラスは、HTMLにクラスを追加しなくても「最初の要素以外」「ホバー中」「チェック済み」などの状態や位置を指定できる仕組みです。ここではよく混同しやすい:not(:first-of-type)と:not(:first-child)を比べます。

/* 最初の .item 以外に余白をつける */
.item:not(:first-of-type) {
  margin-top: 24px;
}

/* 親要素の最初の子要素ではない .item にだけ効く */
.item:not(:first-child) {
  margin-top: 24px;
}

:not(:first-of-type) と :not(:first-child) の違い

:not(:first-of-type)は「同じタグの中で最初ではない要素」に効きます。一方、:not(:first-child)は「親要素の最初の子要素ではない要素」に効きます。つまり、同じ.itemでも、前に見出しなど別の要素があるかどうかで結果が変わります。

<div class="list">
  <h3>見出し</h3>
  <p class="item">1つ目の本文</p>
  <p class="item">2つ目の本文</p>
</div>

上のHTMLでは、h3が親要素の最初の子要素です。そのため.item:not(:first-child)は1つ目の.itemにも効きます。一方、.item:not(:first-of-type)はpタグの中で最初のpを除外するため、2つ目の.itemから効きます。

ちなみに、CSSには:not-of-typeや:not-childという単独の擬似クラスはありません。実際には:not()の中に:first-of-typeや:first-childを入れて指定します。

擬似クラスで押さえたいポイント

擬似クラスは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

コーディングのコツ

レスポンシブを意識する場合、余白をすべてpxで固定するのではなく、%やclamp()を使って画面幅に応じて変化する指定にすると調整しやすくなります。特に左右の余白は、親要素にmax-widthを指定しておくと、最大幅に達したところで広がりが止まります。

.section {
  width: min(90%, 1080px);
  margin-inline: auto;
  padding-block: clamp(48px, 8vw, 96px);
}

.inner {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 5%;
}

width: min(90%, 1080px);のように書くと、狭い画面では横幅を90%にし、広い画面では1080pxで止められます。親の最大幅を決めてから内側の余白を%で取ると、画面幅に合わせつつ、広い画面で余白が広がり続けるのを防げます。