MENU
  1. ホーム
  2. CSS
  3. 【CSS】clampの使い方：フォントの可変設定とellipsisやline-clamp

【CSS】clampの使い方：フォントの可変設定とellipsisやline-clamp

CSS
css-clamp
ポートフォリオ向けサーバー
HTML/CSSスキルが活きる！
学んだ知識を活かして、
自分だけのブログを始めませんか？

WordPressブログなら、あなたのコーディング知識でデザインのカスタマイズが自由自在。
ブログデビューに最適な初心者向けサーバー環境を徹底比較しました。

ブログ向けサーバー4選を見る

CSSのclamp()関数は、たった1行で最小値・推奨値・最大値を設定し、メディアクエリなしで画面幅に合わせてサイズを滑らかに可変させる機能です。

本記事では、フォントや余白への実務的な使い方、効かない時の原因、必須となるジェネレーターの活用法を解説します。

HTML/CSS学習者の方へ
「学んだコード、自分のブログで試してみませんか？」
多くのブロガーがデザインでつまずく中、コードが読めるあなたは圧倒的に有利です。
自由自在なサイト構築の第一歩となる、初心者向けサーバーを分かりやすく比較しました。

＼ スキルを活かして情報発信 ／ ブログ向けレンタルサーバー4選を読む▶︎
目次

CSSのclamp()関数とは：レスポンシブなサイズ指定

Webデザインにおいて「スマホでは小さく、PCでは大きく」というレスポンシブ対応は必須ですが、メディアクエリ（@media）を何度も書くのは手間がかかります。

現代のCSS開発において必須スキルとなっているのがclamp関数です。

公式のMDNやw3schoolsのチュートリアルでも推奨されている機能について解説します。

CSSのclamp()関数とは：レスポンシブなサイズ指定
  • 最小値・推奨値・最大値を1行で設定する仕組み
  • 面倒な計算式を自動化するジェネレーターの活用
  • 対応ブラウザとSafari等のサポート状況

最小値・推奨値・最大値を1行で設定する仕組み

clamp()関数は、たった1行で「最小値」「推奨値（可変サイズ）」「最大値」の3つを設定できる機能です。

よく似た機能としてminmax()がありますが、minmax()は主にGridのトラックサイズ（列や行の幅）を決めるためであり、フォントサイズや要素の余白、幅などを柔軟に可変させる用途にはclamp()を使用します。

clamp()を機能させるには、「中央の推奨値には、vw（ビューポート幅）や%、cqw（コンテナ幅）などの『画面や親要素に合わせて変動する相対単位』を入れること」です。

⭕️ 画面幅を伸縮させよう！たった1行で最小〜最大の間を滑らかに変化する！

流体タイポグラフィ

この箱の幅と、見出しの文字サイズは clamp() で制御されています。
メディアクエリを一切使っていませんが、スマホサイズでは小さく、PCサイズでは大きく、設定した限界値でピタッと止まります。

/* ❌ 罠：真ん中に固定値を入れてしまう（全く伸縮しない） */
.title-fail {
  font-size: clamp(16px, 20px, 24px); /* 🚨 常に20pxで固定されてしまう！ */
}

/* ⭕️ 真ん中は必ず「vw」などの可変単位にする！ */
.clp-demo-title {
  /* 💡 最小20px 〜 画面幅の5%で変動 〜 最大40px でストップ */
  font-size: clamp(20px, 5vw, 40px);
}

.clp-demo-box {
  /* 💡 幅も clamp で制御可能！（最小300px 〜 画面幅の80% 〜 最大800px） */
  width: clamp(300px, 80vw, 800px);
}
HTMLコード表示
<div class="clp-basic-wrapper">
  
  <p class="clp-basic-caption">⭕️ 画面幅を伸縮させよう！たった1行で最小〜最大の間を滑らかに変化する！</p>

  <div class="clp-basic-demo-area">
    
    <div class="clp-demo-box">
      <div class="clp-demo-title">流体タイポグラフィ</div>
      <p class="clp-demo-text">
        この箱の幅と、見出しの文字サイズは <code>clamp()</code> で制御されています。<br>
        メディアクエリを一切使っていませんが、スマホサイズでは小さく、PCサイズでは大きく、設定した限界値でピタッと止まります。
      </p>
    </div>

  </div>

  <div class="clp-basic-code-area">
    <span class="hl-comment">/* ❌ 罠：真ん中に固定値を入れてしまう（全く伸縮しない） */</span><br>
    <span class="hl-blue">.title-fail</span> {<br>
      <span class="hl-green">font-size:</span> <span class="hl-red">clamp(16px, 20px, 24px);</span> <span class="hl-comment">/* 🚨 常に20pxで固定されてしまう！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 真ん中は必ず「vw」などの可変単位にする！ */</span><br>
    <span class="hl-blue">.clp-demo-title</span> {<br>
      <span class="hl-comment">/* 💡 最小20px 〜 画面幅の5%で変動 〜 最大40px でストップ */</span><br>
      <span class="hl-green">font-size:</span> <span class="hl-red">clamp(20px, 5vw, 40px);</span><br>
    }<br>
    <br>
    <span class="hl-blue">.clp-demo-box</span> {<br>
      <span class="hl-comment">/* 💡 幅も clamp で制御可能！（最小300px 〜 画面幅の80% 〜 最大800px） */</span><br>
      <span class="hl-green">width:</span> <span class="hl-red">clamp(300px, 80vw, 800px);</span><br>
    }
  </div>

</div>
CSSコード表示
.clp-basic-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.clp-basic-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.clp-basic-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  display: flex;
  justify-content: center; /* 箱を中央に配置 */
}

/* ＝＝＝ 💡 clamp() の実践スタイル ＝＝＝ */
.clp-demo-box {
  background-color: #0d6efd;
  color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
  
  /* 💡 箱の幅を clamp で制御 */
  /* スマホでは300pxを下回らず、PCでは800pxを超えない */
  width: clamp(300px, 80vw, 800px);
}

.clp-demo-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: bold;
  
  /* 💡 見出しの文字サイズを clamp で制御 */
  font-size: clamp(20px, 5vw, 40px);
  
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 10px;
  line-height: 1.3;
}

.clp-demo-text {
  margin: 0;
  line-height: 1.8;
  
  /* 💡 本文の文字サイズも clamp で制御（最小14px 〜 最大18px） */
  font-size: clamp(14px, 2vw, 18px);
}

.clp-demo-text code {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* ＝コード解説エリア＝ */
.clp-basic-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

面倒な計算式を自動化するジェネレーターの活用

「推奨値にvwを入れるのは分かったけど、ちょうどいい変化率にするには何vwにすればいいの？」

実務でclamp()を導入する際、最も頭を悩ませるのが「clamp計算」です。

直感で5vwと適当に入れてしまうと、PC画面で文字が巨大化しすぎたり、スマホで小さくなりすぎたりしてしまいます。

さらに、アクセシビリティ（ユーザーがブラウザ設定で文字サイズを拡大する機能）を維持するために、単純なvw ではなくcalc(1rem + 2vw)のような複雑な計算式が必要になります。

計算式を作るには、「自分で計算せず、世界中のプロが使っている『clamp generator』などの外部自動計算ツールを活用すること」です。

「スマホ（375px）の時に16px、PC（1000px）の時に24pxにしたい」とツールに入力するだけで、アクセシビリティをクリアした計算式（例：clamp(1rem, 0.6rem + 1.7067vw, 1.5rem)）を自動生成してくれます。

⭕️ 勘で数値を決めるな！ジェネレーターで作った完璧な計算式を使え！

❌ 罠（適当な 4vw 指定）

推奨値を「4vw」と適当に決めた結果、画面幅が変わった時に文字サイズが急激に大きくなったり小さくなったりして、コントロールが効きません。また、ブラウザの文字拡大機能も無視されてしまいます。

⭕️ 成功（ジェネレーターの計算式）

推奨値に calc(0.75rem + 1.5vw) のような精密な式を設定しています。これにより「スマホ(375px)で16px、PC(1000px)で24px」という目標に向かって、美しく滑らかにスケールします！

/* ❌ 罠：適当に vw を割り当ててしまう（変化が急激で、アクセシビリティもNG） */
.text-fail {
  font-size: clamp(16px, 4vw, 24px);
}

/* ⭕️ ジェネレーターが弾き出した「rem + vw」の式をコピペする！ */
.text-success {
  /* 💡 最小値(1rem)、推奨値(固定値+可変値の計算式)、最大値(1.5rem) */
  font-size: clamp(1rem, 0.625rem + 1.6vw, 1.5rem);
}
HTMLコード表示
<div class="clp-calc-wrapper">
  
  <p class="clp-calc-caption">⭕️ 勘で数値を決めるな！ジェネレーターで作った完璧な計算式を使え！</p>

  <div class="clp-calc-demo-area">
    
    <div class="calc-demo-row">
      <div class="calc-box is-trap-calc">
        <div class="calc-title">❌ 罠（適当な 4vw 指定）</div>
        <p class="calc-text">
          推奨値を「4vw」と適当に決めた結果、画面幅が変わった時に文字サイズが急激に大きくなったり小さくなったりして、コントロールが効きません。また、ブラウザの文字拡大機能も無視されてしまいます。
        </p>
      </div>

      <div class="calc-box is-success-calc">
        <div class="calc-title">⭕️ 成功（ジェネレーターの計算式）</div>
        <p class="calc-text">
          推奨値に <code>calc(0.75rem + 1.5vw)</code> のような精密な式を設定しています。これにより「スマホ(375px)で16px、PC(1000px)で24px」という目標に向かって、美しく滑らかにスケールします！
        </p>
      </div>
    </div>

  </div>

  <div class="clp-calc-code-area">
    <span class="hl-comment">/* ❌ 罠：適当に vw を割り当ててしまう（変化が急激で、アクセシビリティもNG） */</span><br>
    <span class="hl-blue">.text-fail</span> {<br>
      <span class="hl-green">font-size:</span> <span class="hl-red">clamp(16px, 4vw, 24px);</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ ジェネレーターが弾き出した「rem + vw」の式をコピペする！ */</span><br>
    <span class="hl-blue">.text-success</span> {<br>
      <span class="hl-comment">/* 💡 最小値(1rem)、推奨値(固定値+可変値の計算式)、最大値(1.5rem) */</span><br>
      <span class="hl-green">font-size:</span> <span class="hl-red">clamp(1rem, 0.625rem + 1.6vw, 1.5rem);</span><br>
    }
  </div>

</div>
CSSコード表示
.clp-calc-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.clp-calc-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.clp-calc-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.calc-demo-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .calc-demo-row {
    flex-direction: row;
  }
}

.calc-box {
  flex: 1;
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  border: 1px solid #ced4da;
}

/* ＝＝＝ ❌ 罠：適当なvw指定 ＝＝＝ */
.is-trap-calc {
  border-top: 5px solid #dc3545;
}

.is-trap-calc .calc-title {
  color: #dc3545;
  margin-top: 0;
  margin-bottom: 15px;
  /* 🚨 単純なvw指定（変化が急激すぎる） */
  font-size: clamp(16px, 5vw, 28px);
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
}

.is-trap-calc .calc-text {
  color: #333;
  line-height: 1.6;
  margin: 0;
  /* 🚨 変化が激しく制御しにくい */
  font-size: clamp(14px, 4vw, 20px);
}

/* ＝＝＝ ⭕️ 成功：ジェネレーターの精密な計算式 ＝＝＝ */
.is-success-calc {
  border-top: 5px solid #0d6efd;
}

.is-success-calc .calc-title {
  color: #0d6efd;
  margin-top: 0;
  margin-bottom: 15px;
  /* 💡 ジェネレーターが算出した、緩やかに変化する完璧な式 */
  font-size: clamp(1rem, 0.75rem + 1.066vw, 1.75rem);
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
}

.is-success-calc .calc-text {
  color: #333;
  line-height: 1.6;
  margin: 0;
  /* 💡 ユーザーのブラウザ設定（rem）を尊重しつつ可変させる */
  font-size: clamp(0.875rem, 0.75rem + 0.533vw, 1.25rem);
}

.is-success-calc code {
  background-color: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* ＝コード解説エリア＝ */
.clp-calc-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

対応ブラウザとSafari等のサポート状況

実務で新しいCSSプロパティを導入する際、チェックしなければならないのがブラウザサポート状況です。

結論として、clamp()はChrome、Edge、Firefox、そしてサポートが懸念されがちなiOS Safari においても、現在ではすべてのモダンブラウザで完全にサポートされています。

古い環境もカバーしなければならない案件では、「フォールバック（代替となる安全な記述）を1行上に書くこと」です。

CSSは「解釈できないプロパティは無視して、上の行の指定を維持する」という性質があるため、固定値を先に書いておけば崩れません。

⭕️ 古いブラウザでも崩らさない！フォールバック（代替）を上に書け！

フォールバック実装例

最新のブラウザでは、下の行に書かれた clamp() が上書きして適用されます。
古いブラウザでは clamp() を解釈できないため無視されますが、上の行に書かれた安全な固定値（16px）が適用されるため、レイアウト崩壊を未然に防ぐことができます。

/* ❌ 罠：新しいプロパティしか書かない（未対応環境で崩壊する） */
.target-fail {
  font-size: clamp(16px, 2vw, 24px); /* 🚨 古いブラウザはこれを無視し、文字サイズが0や初期値になってしまう */
}

/* ⭕️ 直前の行に「絶対に効く安全な固定値」を書いておく！ */
.target-success {
  font-size: 16px; /* 💡 フォールバック：古いブラウザはこれを適用して終わる */
  font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem); /* 💡 最新ブラウザは、解釈できるこちらを優先して上書きする */
}
HTMLコード表示
<div class="clp-sup-wrapper">
  
  <p class="clp-sup-caption">⭕️ 古いブラウザでも崩らさない！フォールバック（代替）を上に書け！</p>

  <div class="clp-sup-demo-area">
    
    <div class="sup-card">
      <div class="sup-title">フォールバック実装例</div>
      <p class="sup-text">
        最新のブラウザでは、下の行に書かれた <code>clamp()</code> が上書きして適用されます。<br>
        古いブラウザでは <code>clamp()</code> を解釈できないため無視されますが、上の行に書かれた安全な固定値（<code>16px</code>）が適用されるため、レイアウト崩壊を未然に防ぐことができます。
      </p>
    </div>

  </div>

  <div class="clp-sup-code-area">
    <span class="hl-comment">/* ❌ 罠：新しいプロパティしか書かない（未対応環境で崩壊する） */</span><br>
    <span class="hl-blue">.target-fail</span> {<br>
      <span class="hl-green">font-size:</span> <span class="hl-red">clamp(16px, 2vw, 24px);</span> <span class="hl-comment">/* 🚨 古いブラウザはこれを無視し、文字サイズが0や初期値になってしまう */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 直前の行に「絶対に効く安全な固定値」を書いておく！ */</span><br>
    <span class="hl-blue">.target-success</span> {<br>
      <span class="hl-green">font-size:</span> <span class="hl-red">16px;</span> <span class="hl-comment">/* 💡 フォールバック：古いブラウザはこれを適用して終わる */</span><br>
      <span class="hl-green">font-size:</span> <span class="hl-red">clamp(1rem, 0.8rem + 1vw, 1.5rem);</span> <span class="hl-comment">/* 💡 最新ブラウザは、解釈できるこちらを優先して上書きする */</span><br>
    }
  </div>

</div>
CSSコード表示
.clp-sup-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.clp-sup-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.clp-sup-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

/* ＝＝＝ 💡 フォールバックを適用したスタイル ＝＝＝ */
.sup-card {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  border-left: 6px solid #198754;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  max-width: 600px;
}

.sup-title {
  margin-top: 0;
  margin-bottom: 15px;
  color: #198754;
  
  /* 💡 1. 未対応ブラウザ向けの安全な固定値 */
  font-size: 20px; 
  /* 💡 2. 対応ブラウザ向けの上書き指定 */
  font-size: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
}

.sup-text {
  margin: 0;
  color: #333;
  line-height: 1.6;
  
  /* 💡 1. 未対応ブラウザ向けの安全な固定値 */
  font-size: 15px; 
  /* 💡 2. 対応ブラウザ向けの上書き指定 */
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.125rem);
}

.sup-text code {
  background-color: rgba(25, 135, 84, 0.1);
  color: #198754;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* ＝コード解説エリア＝ */
.clp-sup-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

clamp()をフォントサイズや幅に適用する

clamp()関数の仕組みを理解した後は、実際のWeb制作の現場でどのように使われているのか、具体的な活用パターンを見ていきましょう。

従来はメディアクエリ（@media）をいくつも書いて細かくブレイクポイントを設定していた箇所も、clamp()を使えば1行で保守性の高いコードに置き換えることができます。

ここでは、実務で利用頻度が高い「フォントサイズ」「幅や余白（padding）」への適用方法とつまずきやすい「効かない時の原因」を解説します。

clamp()をフォントサイズや幅に適用する
  • 画面幅に合わせてフォントサイズを滑らかに変える
  • width・heightやpaddingの最小・最大幅を制御する
  • clamp()が効かない？原因と書き方の注意点

画面幅に合わせてフォントサイズを滑らかに変える

スマホ画面では小さく、PC画面では大きくする流体タイポグラフィは、clamp()の代表的な使い方です。

見出しの文字などに適用することで、画面幅に応じて文字サイズが無段階で滑らかに拡大縮小するため、どのデバイスで見てもレイアウトを維持できます。

文字サイズに適用するには、「自分で計算せず、『clamp generator』などの外部ツールを利用し、calc(1rem + 2vw)のようなアクセシビリティに配慮された計算式をコピペすること」です。

⭕️ ジェネレーターの計算式で、安全かつ滑らかな文字サイズを実現！

❌ 罠の指定（推奨値が純粋なvw）

文字サイズは変わりますが、ブラウザの「文字サイズ拡大設定」を無視してしまうため、アクセシビリティ上大きな問題があります。

⭕️ 成功の指定（rem + vwの計算式）

画面幅に合わせて滑らかに伸縮しつつ、ユーザーのブラウザ設定（rem）も尊重される完璧な指定方法です。

/* ❌ 罠：推奨値に純粋な vw だけを入れてしまう */
.text-fail {
  font-size: clamp(16px, 4vw, 24px); /* 🚨 ユーザーの拡大機能が効かなくなるためアクセシビリティ違反！ */
}

/* ⭕️ ジェネレーターで算出した「rem + vw」の式を使う！ */
.text-success {
  /* 💡 最小値(1rem)、推奨値(固定値+可変値の計算式)、最大値(1.5rem) */
  font-size: clamp(1rem, 0.765rem + 1.176vw, 1.5rem); /* 💡 ブラウザの拡大設定を尊重しつつ滑らかに伸縮する */
}
HTMLコード表示
<div class="clp-font-wrapper">
  
  <div class="clp-font-header">
    <p class="clp-font-caption">⭕️ ジェネレーターの計算式で、安全かつ滑らかな文字サイズを実現！</p>
  </div>

  <div class="clp-font-demo-area">
    
    <div class="clp-font-box is-trap-font">
      <div class="font-box-title">❌ 罠の指定（推奨値が純粋なvw）</div>
      <p class="font-box-text">
        文字サイズは変わりますが、ブラウザの「文字サイズ拡大設定」を無視してしまうため、アクセシビリティ上大きな問題があります。
      </p>
    </div>

    <div class="clp-font-box is-success-font">
      <div class="font-box-title">⭕️ 成功の指定（rem + vwの計算式）</div>
      <p class="font-box-text">
        画面幅に合わせて滑らかに伸縮しつつ、ユーザーのブラウザ設定（rem）も尊重される完璧な指定方法です。
      </p>
    </div>

  </div>

  <div class="clp-font-code-area">
    <span class="hl-comment">/* ❌ 罠：推奨値に純粋な vw だけを入れてしまう */</span><br>
    <span class="hl-blue">.text-fail</span> {<br>
      <span class="hl-green">font-size:</span> <span class="hl-red">clamp(16px, 4vw, 24px);</span> <span class="hl-comment">/* 🚨 ユーザーの拡大機能が効かなくなるためアクセシビリティ違反！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ ジェネレーターで算出した「rem + vw」の式を使う！ */</span><br>
    <span class="hl-blue">.text-success</span> {<br>
      <span class="hl-comment">/* 💡 最小値(1rem)、推奨値(固定値+可変値の計算式)、最大値(1.5rem) */</span><br>
      <span class="hl-green">font-size:</span> <span class="hl-red">clamp(1rem, 0.765rem + 1.176vw, 1.5rem);</span> <span class="hl-comment">/* 💡 ブラウザの拡大設定を尊重しつつ滑らかに伸縮する */</span><br>
    }
  </div>

</div>
CSSコード表示
.clp-font-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.clp-font-header {
  margin-bottom: 20px;
  text-align: center;
}

.clp-font-caption {
  font-size: 14px;
  font-weight: bold;
  color: #198754;
  margin: 0;
}

.clp-font-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.clp-font-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #ced4da;
}

.font-box-title {
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
}

.font-box-text {
  margin: 0;
  line-height: 1.6;
  color: #333;
}

/* ＝❌ 罠：純粋なvw指定＝ */
.is-trap-font {
  border-left: 5px solid #dc3545;
}

.is-trap-font .font-box-title {
  color: #dc3545;
  /* 🚨 危険：ユーザーの拡大設定が効かなくなる */
  font-size: clamp(16px, 4vw, 24px);
}

.is-trap-font .font-box-text {
  /* 🚨 危険：本文も同様に固定されてしまう */
  font-size: clamp(14px, 3vw, 18px);
}

/* ＝⭕️ 成功：ジェネレーターで算出した安全な指定＝ */
.is-success-font {
  border-left: 5px solid #0d6efd;
}

.is-success-font .font-box-title {
  color: #0d6efd;
  /* 💡 安全：スマホ(320px)で1rem、PC(1000px)で1.5remの間を美しく補間する計算式 */
  font-size: clamp(1rem, 0.765rem + 1.176vw, 1.5rem);
}

.is-success-font .font-box-text {
  /* 💡 安全：本文もremとvwを組み合わせて指定 */
  font-size: clamp(0.875rem, 0.757rem + 0.588vw, 1.125rem);
}

/* ＝コード解説エリア＝ */
.clp-font-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

width・height・paddingなどの設定について詳しく知りたい人は以下から一読ください。

width・heightやpaddingの最小・最大幅を制御する

clamp()が活躍するのはフォントサイズだけではありません。

カードの幅や高さ、要素内の余白に対しても効果を発揮します。

行間に可変性を持たせて、大画面時の読みやすさを向上させるテクニックもあります。

幅や余白を制御する際は、「推奨値にはキーワードを使わず、100%や80vwといった『相対的な数値』を指定すること」です。

⭕️ 幅や余白もclampにお任せ！autoは使わず「%」か「vw」を使え！

可変する余白と幅

このカードは、画面幅に合わせて横幅（width）と内側の余白（padding）が自動的に伸縮します。
スマホで見てもPCで見ても、常に「ちょうどいいサイズ感」を保ちます。

/* ❌ 罠：真ん中の推奨値に「auto」や「fit-content」を入れてしまう */
.card-fail {
  width: clamp(300px, auto, 600px); /* 🚨 キーワードは構文エラーになり、プロパティ自体が無効化される！ */
}

/* ⭕️ 推奨値には必ず「%」や「vw」などの相対的な数値を使う！ */
.clp-responsive-card {
  /* 💡 最小300px 〜 画面(親)の90% 〜 最大600px で伸縮する */
  width: clamp(300px, 90%, 600px);

  /* 💡 余白も clamp で滑らかに変化させる（最小15px 〜 画面幅の5% 〜 最大40px） */
  padding: clamp(15px, 5vw, 40px);
}
HTMLコード表示
<div class="clp-box-wrapper">
  
  <div class="clp-box-header">
    <p class="clp-box-caption">⭕️ 幅や余白もclampにお任せ！autoは使わず「%」か「vw」を使え！</p>
  </div>

  <div class="clp-box-demo-area">
    
    <div class="clp-responsive-card">
      <div class="clp-card-title">可変する余白と幅</div>
      <p class="clp-card-text">
        このカードは、画面幅に合わせて横幅（width）と内側の余白（padding）が自動的に伸縮します。<br>
        スマホで見てもPCで見ても、常に「ちょうどいいサイズ感」を保ちます。
      </p>
    </div>

  </div>

  <div class="clp-box-code-area">
    <span class="hl-comment">/* ❌ 罠：真ん中の推奨値に「auto」や「fit-content」を入れてしまう */</span><br>
    <span class="hl-blue">.card-fail</span> {<br>
      <span class="hl-green">width:</span> <span class="hl-red">clamp(300px, auto, 600px);</span> <span class="hl-comment">/* 🚨 キーワードは構文エラーになり、プロパティ自体が無効化される！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 推奨値には必ず「%」や「vw」などの相対的な数値を使う！ */</span><br>
    <span class="hl-blue">.clp-responsive-card</span> {<br>
      <span class="hl-comment">/* 💡 最小300px 〜 画面(親)の90% 〜 最大600px で伸縮する */</span><br>
      <span class="hl-green">width:</span> <span class="hl-red">clamp(300px, 90%, 600px);</span><br>
    <br>
      <span class="hl-comment">/* 💡 余白も clamp で滑らかに変化させる（最小15px 〜 画面幅の5% 〜 最大40px） */</span><br>
      <span class="hl-green">padding:</span> <span class="hl-red">clamp(15px, 5vw, 40px);</span><br>
    }
  </div>

</div>
CSSコード表示
.clp-box-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.clp-box-header {
  margin-bottom: 20px;
  text-align: center;
}

.clp-box-caption {
  font-size: 14px;
  font-weight: bold;
  color: #198754;
  margin: 0;
}

.clp-box-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  display: flex;
  justify-content: center; /* カードを中央配置 */
}

/* ＝＝＝ 💡 幅と余白をclampで制御するカード ＝＝＝ */
.clp-responsive-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 2px solid #0d6efd;
  
  /* 💡 幅の制御：最小300px 〜 画面の90%で伸縮 〜 最大600pxでストップ */
  /* （※autoやfit-contentはエラーになるので絶対に使わない！） */
  width: clamp(300px, 90%, 600px);
  
  /* 💡 余白の制御：最小15px 〜 画面の5%で伸縮 〜 最大40pxでストップ */
  /* スマホでは窮屈にならず、PCでは間延びしない美しい余白になる */
  padding: clamp(15px, 5vw, 40px);
}

.clp-card-title {
  margin-top: 0;
  margin-bottom: 15px;
  color: #0d6efd;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 10px;
}

.clp-card-text {
  margin: 0;
  color: #555;
  line-height: 1.6;
}

/* ＝コード解説エリア＝ */
.clp-box-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

clamp()が効かない？原因と書き方の注意点

便利なclamp()ですが、「正しく書いたはずなのにclampが効かない！」と頭を抱える場面も少なくありません。

効かない原因は、ブラウザのバグなどではなく、ほとんどの場合が「初歩的な記述ミス」や「数学的な矛盾」に起因しています。

以下のよくある原因をチェックリストとして確認してください。

clamp()が効かない時は、以下の3つを確認してください。

  1. 順番の厳守：左から「最小値, 推奨値（可変）, 最大値」の順になっているか？（小 → 可変 → 大）
  2. 単位の確認：真ん中の推奨値に%やvwなどの「変動する単位」が入っているか？
  3. キーワードの排除：autoやnoneなどの文字列を入れていないか？

⭕️ 効かない原因の9割は「順番間違い」と「固定値の入れすぎ」！

❌ 罠1：最小と最大が逆

clamp(40px, 5vw, 20px) のように、左の数値のほうが右より大きいと、無効な値として無視され、初期値（または元のサイズ）に戻ってしまいます。

❌ 罠2：すべて固定値

clamp(16px, 20px, 24px) のように真ん中も固定値にしてしまうと、画面幅を変えても永遠に「20px」のままで伸縮しません。

⭕️ 成功：正しい順番と可変単位

clamp(16px, 5vw, 30px) のように、「小・可変・大」のルールを守れば、確実に機能します！

HTMLコード表示
<div class="clp-err-wrapper">
  
  <div class="clp-err-header">
    <p class="clp-err-caption">⭕️ 効かない原因の9割は「順番間違い」と「固定値の入れすぎ」！</p>
  </div>

  <div class="clp-err-demo-area">
    
    <div class="clp-err-box is-trap-order">
      <div class="err-box-title">❌ 罠1：最小と最大が逆</div>
      <p class="err-box-text">
        clamp(40px, 5vw, 20px) のように、左の数値のほうが右より大きいと、無効な値として無視され、初期値（または元のサイズ）に戻ってしまいます。
      </p>
    </div>

    <div class="clp-err-box is-trap-fixed">
      <div class="err-box-title">❌ 罠2：すべて固定値</div>
      <p class="err-box-text">
        clamp(16px, 20px, 24px) のように真ん中も固定値にしてしまうと、画面幅を変えても永遠に「20px」のままで伸縮しません。
      </p>
    </div>

    <div class="clp-err-box is-success-valid">
      <div class="err-box-title">⭕️ 成功：正しい順番と可変単位</div>
      <p class="err-box-text">
        clamp(16px, 5vw, 30px) のように、「小・可変・大」のルールを守れば、確実に機能します！
      </p>
    </div>

  </div>
</div>
CSSコード表示
.clp-err-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.clp-err-header {
  margin-bottom: 20px;
  text-align: center;
}

.clp-err-caption {
  font-size: 14px;
  font-weight: bold;
  color: #198754;
  margin: 0;
}

.clp-err-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
}

.clp-err-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #ced4da;
}

.err-box-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.err-box-text {
  margin: 0;
  color: #333;
  line-height: 1.6;
  font-size: 14px; /* ベースの文字サイズ */
}

/* ＝❌ 罠1：最小と最大が逆（プロパティが無効になる）＝ */
.is-trap-order {
  border-left: 5px solid #dc3545;
}
.is-trap-order .err-box-title {
  color: #dc3545;
}
.is-trap-order .err-box-text {
  /* 🚨 構文エラーとなり無視される（ベースの14pxが適用される） */
  font-size: clamp(40px, 5vw, 20px);
}

/* ＝❌ 罠2：すべて固定値（伸縮しない）＝ */
.is-trap-fixed {
  border-left: 5px solid #ffc107; /* 警告の黄色 */
}
.is-trap-fixed .err-box-title {
  color: #d39e00;
}
.is-trap-fixed .err-box-text {
  /* 🚨 常に20pxで固定されてしまう */
  font-size: clamp(16px, 20px, 24px);
}

/* ＝⭕️ 成功：正しい構文＝ */
.is-success-valid {
  border-left: 5px solid #198754;
}
.is-success-valid .err-box-title {
  color: #198754;
}
.is-success-valid .err-box-text {
  /* 💡 「小・可変・大」のルールを完璧に守った指定 */
  font-size: clamp(16px, 5vw, 30px);
}

複数行テキストを省略！-webkit-line-clampの使い方

ブログのカードUIや商品一覧ページで、「タイトルや説明文が長すぎて、カードの高さがバラバラになってレイアウトが崩れてしまう……」と悩んだ経験はありませんか？

かつてはJavaScriptを使って文字数をカウントし、無理やりテキストをカットしていましたが、現代のCSSではline-clamp（テキストの行数制限）を使うのが常識です。

ここでは、複数行のテキストを美しく省略するプロパティ-webkit-line-clampの使い方、効かない時の解決策、実務で役立つ応用テクニックを解説します。

複数行テキストを省略！-webkit-line-clampの使い方
  • 1行・2行・3行など指定行数で三点リーダー（…）にする
  • line-clampが効かない原因
  • 「続きを読む」の連携や三点リーダーなしの実装

1行・2行・3行など指定行数で三点リーダー（…）にする

このプロパティの最大の魅力は、はみ出たテキストの末尾を自動的に「…（三点リーダー）」に変換してくれるellipsisの機能です。

設定は直感的で、値に数字を入れるだけで指定した行数でテキストをカットできます。

例えば、1行で省略したいなら（-webkit-line-clamp: 1;）、2行なら、3行ならとデザインに合わせて自在にコントロール可能です。

行数制限をかける際は、「テキストを囲む要素に対して、height（固定高）を指定しないこと」です。

高さはline-height（行の高さ）と行数によって自動的に決まる「成り行き」に任せるのが、最も安全な設計です。

⭕️ 1行、2行、3行で美しくカットされ、末尾に「…」が付く！

1行で省略（line clamp 1 css）されるタイトルです。どれだけ長くても絶対に1行で収まります。

2行で省略（line clamp 2 css）される説明文です。ここは実務でも非常によく使われる設定で、適度な情報量をユーザーに伝えることができます。長すぎても短すぎてもダメな絶妙なバランスです。

3行で省略（line clamp 3 css）される補足テキストです。かなり長い文章が入ったとしても、3行目のはみ出る直前で自動的に三点リーダーが付与されるため、レイアウトが崩れることは絶対にありません。

/* ❌ 罠：固定の高さを指定してしまう */
.text-fail {
  height: 60px; /* 🚨 文字を拡大された時に見切れる原因になる！ */
}

/* ⭕️ 高さは指定せず、行数だけを指定する！ */
.is-clamp-1 {
  -webkit-line-clamp: 1; /* 💡 1行で省略 */
}
.is-clamp-2 {
  -webkit-line-clamp: 2; /* 💡 2行で省略 */
}
.is-clamp-3 {
  -webkit-line-clamp: 3; /* 💡 3行で省略 */
}
HTMLコード表示
<div class="line-basic-wrapper">
  
  <p class="line-basic-caption">⭕️ 1行、2行、3行で美しくカットされ、末尾に「…」が付く！</p>

  <div class="line-basic-demo-area">
    
    <div class="line-demo-card">
      <div class="demo-card-title is-clamp-1">
        1行で省略（line clamp 1 css）されるタイトルです。どれだけ長くても絶対に1行で収まります。
      </div>
      <p class="demo-card-text is-clamp-2">
        2行で省略（line clamp 2 css）される説明文です。ここは実務でも非常によく使われる設定で、適度な情報量をユーザーに伝えることができます。長すぎても短すぎてもダメな絶妙なバランスです。
      </p>
      <p class="demo-card-subtext is-clamp-3">
        3行で省略（line clamp 3 css）される補足テキストです。かなり長い文章が入ったとしても、3行目のはみ出る直前で自動的に三点リーダーが付与されるため、レイアウトが崩れることは絶対にありません。
      </p>
    </div>

  </div>

  <div class="line-basic-code-area">
    <span class="hl-comment">/* ❌ 罠：固定の高さを指定してしまう */</span><br>
    <span class="hl-blue">.text-fail</span> {<br>
      <span class="hl-green">height:</span> <span class="hl-red">60px;</span> <span class="hl-comment">/* 🚨 文字を拡大された時に見切れる原因になる！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 高さは指定せず、行数だけを指定する！ */</span><br>
    <span class="hl-blue">.is-clamp-1</span> {<br>
      <span class="hl-green">-webkit-line-clamp:</span> <span class="hl-red">1;</span> <span class="hl-comment">/* 💡 1行で省略 */</span><br>
    }<br>
    <span class="hl-blue">.is-clamp-2</span> {<br>
      <span class="hl-green">-webkit-line-clamp:</span> <span class="hl-red">2;</span> <span class="hl-comment">/* 💡 2行で省略 */</span><br>
    }<br>
    <span class="hl-blue">.is-clamp-3</span> {<br>
      <span class="hl-green">-webkit-line-clamp:</span> <span class="hl-red">3;</span> <span class="hl-comment">/* 💡 3行で省略 */</span><br>
    }
  </div>

</div>
CSSコード表示
.line-basic-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.line-basic-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.line-basic-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.line-demo-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ced4da;
  max-width: 400px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* ＝＝＝ 💡 必須の共通プロパティ（魔法の呪文） ＝＝＝ */
/* ※このあとの見出しで詳しく解説します */
.is-clamp-1,
.is-clamp-2,
.is-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ＝＝＝ 💡 1行省略 ＝＝＝ */
.demo-card-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  color: #0d6efd;
  line-height: 1.4;
  -webkit-line-clamp: 1;
}

/* ＝＝＝ 💡 2行省略 ＝＝＝ */
.demo-card-text {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  -webkit-line-clamp: 2;
}

/* ＝＝＝ 💡 3行省略 ＝＝＝ */
.demo-card-subtext {
  margin: 0;
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
  background-color: #f1f3f5;
  padding: 10px;
  border-radius: 4px;
  -webkit-line-clamp: 3;
}

/* ＝コード解説エリア＝ */
.line-basic-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

line-clampが効かない原因

「記事のとおりに書いたのに、line-clampが効かない！」と頭を抱える初心者は後を絶ちません。

テキストが省略されず、何行にも渡ってはみ出してしまう現象です。

原因の99%は、「必須となるプロパティの書き忘れ」です。

-webkit-line-clampというプロパティは、非常に特殊で、単体で書いても絶対に機能しません。

実務で失敗しないためには、「-webkit-line-clampを使う時は、以下の『4行セット』をコピペして丸ごと記述すること」です。

  1. display: -webkit-box;
  2. -webkit-box-orient: vertical;
  3. overflow: hidden;
  4. -webkit-line-clamp: 行数;

⭕️ line-clamp は単体では動かない！必ず「4行セット」で記述しろ！

❌ 罠（単体指定）

-webkit-line-clamp: 2; だけを指定した状態です。指定したはずなのに、全く省略されずにテキストが最後まで表示されてしまい、レイアウトが崩れてしまいます。

⭕️ 成功（4行セット）

必須となる3つのプロパティを一緒に記述した状態です。これで初めてブラウザが認識し、指定した行数で美しく省略（三点リーダー）してくれます。

/* ❌ 罠：これだけでは絶対に効かない（not working） */
.text-fail {
  -webkit-line-clamp: 2; /* 🚨 なにも起きない */
}

/* ⭕️ 必ずこの「4行セット」を呪文のようにコピペする！ */
.text-success {
  display: -webkit-box; /* 💡 必須1 */
  -webkit-box-orient: vertical; /* 💡 必須2 */
  overflow: hidden; /* 💡 必須3 */
  -webkit-line-clamp: 2; /* 💡 省略したい行数 */
}
HTMLコード表示
<div class="line-err-wrapper">
  
  <p class="line-err-caption">⭕️ line-clamp は単体では動かない！必ず「4行セット」で記述しろ！</p>

  <div class="line-err-demo-area">
    
    <div class="line-err-card is-trap-clamp">
      div class="err-card-title">❌ 罠（単体指定）</div>
      <p class="err-card-text">
        -webkit-line-clamp: 2; だけを指定した状態です。指定したはずなのに、全く省略されずにテキストが最後まで表示されてしまい、レイアウトが崩れてしまいます。
      </p>
    </div>

    <div class="line-err-card is-success-clamp">
      <div class="err-card-title">⭕️ 成功（4行セット）</div>
      <p class="err-card-text">
        必須となる3つのプロパティを一緒に記述した状態です。これで初めてブラウザが認識し、指定した行数で美しく省略（三点リーダー）してくれます。
      </p>
    </div>

  </div>

  <div class="line-err-code-area">
    <span class="hl-comment">/* ❌ 罠：これだけでは絶対に効かない（not working） */</span><br>
    <span class="hl-blue">.text-fail</span> {<br>
      <span class="hl-green">-webkit-line-clamp:</span> <span class="hl-red">2;</span> <span class="hl-comment">/* 🚨 なにも起きない */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 必ずこの「4行セット」を呪文のようにコピペする！ */</span><br>
    <span class="hl-blue">.text-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">-webkit-box;</span> <span class="hl-comment">/* 💡 必須1 */</span><br>
      <span class="hl-green">-webkit-box-orient:</span> <span class="hl-red">vertical;</span> <span class="hl-comment">/* 💡 必須2 */</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span> <span class="hl-comment">/* 💡 必須3 */</span><br>
      <span class="hl-green">-webkit-line-clamp:</span> <span class="hl-red">2;</span> <span class="hl-comment">/* 💡 省略したい行数 */</span><br>
    }
  </div>

</div>
CSSコード表示
.line-err-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.line-err-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.line-err-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
}

@media (max-width: 600px) {
  .line-err-demo-area {
    flex-direction: column;
  }
}

.line-err-card {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #ced4da;
}

.err-card-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
}

.err-card-text {
  margin: 0;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* ＝＝＝ ❌ 罠：単体指定（効かない） ＝＝＝ */
.is-trap-clamp {
  border-left: 5px solid #dc3545;
}
.is-trap-clamp .err-card-title {
  color: #dc3545;
}
.is-trap-clamp .err-card-text {
  /* 🚨 単体では無効 */
  -webkit-line-clamp: 2;
}

/* ＝＝＝ ⭕️ 成功：4行セット ＝＝＝ */
.is-success-clamp {
  border-left: 5px solid #0d6efd;
}
.is-success-clamp .err-card-title {
  color: #0d6efd;
}
.is-success-clamp .err-card-text {
  /* 💡 完璧な4行セット */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

/* ＝コード解説エリア＝ */
.line-err-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

「続きを読む」の連携や三点リーダーなしの実装

実務では、「省略されたテキストの下にボタンを置き、クリックで全文を表示する」という「続きを読む」のUIが頻出します。

また、デザインの都合上、「三点リーダー（…）を使わずに、テキストの末尾をグラデーションで自然にフェードアウトさせたい」という要望もあります。

これらを実現する応用テクニックを解説します。

フェードアウトUIを作るには、「文字自体をいじるのではなく、擬似要素（::after）を使って『背景色と同じ色のグラデーション（透明 → 背景色）』のボックスを作り、テキストの最下部にフタをするように被せること」です。

⭕️ 実務で使える応用ハック！「続きを読む」と「フェードアウト」！

📖 続きを読む（CSSのみ）

この文章は初期状態では3行で省略（line-clamp）されています。しかし、下にある「続きを読む」ボタンをクリックすると、チェックボックスにチェックが入り、CSSの「:checked」擬似クラスを利用して、line-clampの指定が解除（none）されます。これにより、JavaScriptを使わずに全文を展開することが可能です。

🌫️ フェードアウト（三点なし）

この文章は三点リーダー（…）を使っていません。その代わり、要素の最下部に「透明から白」へと変化するグラデーションの擬似要素を被せることで、文字がスッと自然に消えていくような美しいフェードアウト効果を実装しています。文字自体をいじらないため、真っ黒になるバグも起きません。

/* ⭕️ 応用1：「続きを読む」で line-clamp を解除する */
.read-more-check:checked ~ .is-read-more {
  -webkit-line-clamp: none; /* 💡 クリックされたら制限を「none」にして全文表示！ */
}

/* ⭕️ 応用2：擬似要素でフェードアウトの「フタ」を作る */
.fade-out-wrap::after {
  content: “”;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px; /* 💡 下部のグラデーションの高さ */
  /* 💡 背景色（白）に合わせて、透明（transparent）から白へのグラデーション */
  background: linear-gradient(transparent, #fff);
}
HTMLコード表示
<div class="line-tricks-wrapper">
  
  <p class="line-tricks-caption">⭕️ 実務で使える応用ハック！「続きを読む」と「フェードアウト」！</p>

  <div class="line-tricks-demo-area">
    
    <div class="trick-card">
      <div class="trick-card-title">📖 続きを読む（CSSのみ）</div>
      
      <input type="checkbox" id="read-more-check" class="read-more-check">
      
      <p class="trick-card-text is-read-more">
        この文章は初期状態では3行で省略（line-clamp）されています。しかし、下にある「続きを読む」ボタンをクリックすると、チェックボックスにチェックが入り、CSSの「:checked」擬似クラスを利用して、line-clampの指定が解除（none）されます。これにより、JavaScriptを使わずに全文を展開することが可能です。
      </p>
      
      <label for="read-more-check" class="read-more-btn"></label>
    </div>

    <div class="trick-card">
      <div class="trick-card-title">🌫️ フェードアウト（三点なし）</div>
      
      <div class="fade-out-wrap">
        <p class="trick-card-text is-fade-out">
          この文章は三点リーダー（…）を使っていません。その代わり、要素の最下部に「透明から白」へと変化するグラデーションの擬似要素を被せることで、文字がスッと自然に消えていくような美しいフェードアウト効果を実装しています。文字自体をいじらないため、真っ黒になるバグも起きません。
        </p>
      </div>
    </div>

  </div>

  <div class="line-tricks-code-area">
    <span class="hl-comment">/* ⭕️ 応用1：「続きを読む」で line-clamp を解除する */</span><br>
    <span class="hl-blue">.read-more-check:checked ~ .is-read-more</span> {<br>
      <span class="hl-green">-webkit-line-clamp:</span> <span class="hl-red">none;</span> <span class="hl-comment">/* 💡 クリックされたら制限を「none」にして全文表示！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 応用2：擬似要素でフェードアウトの「フタ」を作る */</span><br>
    <span class="hl-blue">.fade-out-wrap::after</span> {<br>
      <span class="hl-green">content:</span> <span class="hl-red">"";</span><br>
      <span class="hl-green">position:</span> <span class="hl-red">absolute;</span><br>
      <span class="hl-green">bottom:</span> <span class="hl-red">0;</span><br>
      <span class="hl-green">width:</span> <span class="hl-red">100%;</span><br>
      <span class="hl-green">height:</span> <span class="hl-red">40px;</span> <span class="hl-comment">/* 💡 下部のグラデーションの高さ */</span><br>
      <span class="hl-comment">/* 💡 背景色（白）に合わせて、透明（transparent）から白へのグラデーション */</span><br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(transparent, #fff);</span><br>
    }
  </div>

</div>
CSSコード表示
.line-tricks-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.line-tricks-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.line-tricks-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
}

@media (max-width: 600px) {
  .line-tricks-demo-area {
    flex-direction: column;
  }
}

.trick-card {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #ced4da;
}

.trick-card-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #0d6efd;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
}

.trick-card-text {
  margin: 0;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* ＝＝＝ 💡 応用1：続きを読む連携 ＝＝＝ */
.is-read-more {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; /* 初期は3行 */
  transition: all 0.3s ease; /* なめらかに開く（※高さの変化は完全にはアニメーションしません） */
}

/* チェックボックスを隠す */
.read-more-check {
  display: none;
}

/* ボタンの装飾 */
.read-more-btn {
  display: inline-block;
  margin-top: 10px;
  color: #0d6efd;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}
/* 初期状態のテキスト */
.read-more-btn::after {
  content: "続きを読む ▼";
}

/* 💡 チェックされたら line-clamp を解除する！ */
.read-more-check:checked ~ .is-read-more {
  -webkit-line-clamp: none;
}
/* チェックされたらボタンのテキストを変える */
.read-more-check:checked ~ .read-more-btn::after {
  content: "閉じる ▲";
  color: #6c757d;
}

/* ＝＝＝ 💡 応用2：フェードアウト（三点リーダーなし） ＝＝＝ */
/* line-clampは使わず、単に高さを固定してoverflow: hiddenにする */
.fade-out-wrap {
  position: relative; /* 擬似要素の基準点 */
  height: 70px; /* 約3行分の高さに固定 */
  overflow: hidden;
}

.is-fade-out {
  /* ここにはline-clampを書かない */
}

/* 💡 文字にかぶせるグラデーションのフタ */
.fade-out-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  /* 親の背景色（白）に合わせて、透明から白へのグラデーション */
  background: linear-gradient(transparent, #fff);
  pointer-events: none; /* テキスト選択の邪魔にならないようにする */
}

/* ＝コード解説エリア＝ */
.line-tricks-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本仕様
    左から順に「最小値」「推奨値（可変）」「最大値」の3つの引数でサイズの変動範囲を制限する。
  • 引数の順序
    「小・可変・大」の順序を厳守する（逆転すると無効化される）。
  • 推奨値のルール
    真ん中の値にはvwや%などの相対単位を含める（固定値だと伸縮しない）。
  • キーワードの禁止
    引数内にautoやfit-contentなどの文字列を含めると構文エラーになる。
  • 適用プロパティ
    フォントサイズだけでなくwidthやpaddingなど幅広い数値プロパティに適用可能である。
  • アクセシビリティ対策
    文字サイズに対してvw単体で指定するとブラウザの拡大機能が効かなくなるため、ジェネレーターが算出するremとvwの複合計算式を利用する。
  • ブラウザ対応と安全網
    全てのモダンブラウザで対応済み。
    古い環境を考慮する場合は、直前の行に固定値をフォールバックとして記述する。

よくある質問（FAQ）

clamp()関数とは、一言でいうと何ができる機能ですか？

「これ以上小さくならない（最小値）」「この間で伸縮する（推奨値）」「これ以上大きくならない（最大値）」という3つのルールを、たった1行のCSSで指定できる機能です。

メディアクエリ（@media）をいくつも書かなくても、画面幅に合わせてフォントサイズや余白などを滑らかに拡大・縮小させることができます。

真ん中の値（推奨値）の「vw」の計算が難しくて分かりません。

自分で複雑な計算をする必要はありません。

実務では「clampジェネレーター（計算ツール）」を使うのがよいです。

ブラウザ上で「スマホの時に16px、PCの時に24pxにしたい」と数値を入力するだけで、アクセシビリティにも配慮された計算式（例：clamp(1rem, 0.5rem + 1vw, 1.5rem)）を自動生成してくれるため、コピペするだけでOKです。

記述したはずなのに、clamp()が全く効かないのはなぜですか？

最も多い原因は、以下の2つの初歩的な記述ミスです。

  1. 順番が違う
    clamp(最大値, 推奨値, 最小値)のように左側が大きくなっていると、CSSが計算できず無効化されます。
    「小・可変・大」の順に書いてください。
  2. すべて固定値になっている
    clamp(16px, 20px, 24px)のように3つすべてに px などを入れてしまうと、常に真ん中の20pxに固定されてしまいます。
    真ん中にはvwや%などの変動する単位を入れてください。
clamp()とminmax()の違いは何ですか？

どちらも最小値・最大値を設定する機能ですが、使える場所（用途）が異なります。

clamp()は、フォントサイズ、width、paddingなど、あらゆる数値プロパティのサイズを滑らかに可変させる汎用的な関数です。

一方minmax()は、「CSS Grid（グリッドレイアウト）」の中で、列や行の幅（トラックサイズ）を柔軟に指定するため「だけ」に使われる専用の関数です。

Safariやスマホのブラウザで使っても表示崩れは起きませんか？

はい、現在ではChrome、Edge、Firefoxはもちろん、iOSのSafari（バージョン13.1以降）を含めたすべての主要なモダンブラウザで完全にサポートされています。

一般的なWeb制作であれば、今すぐ主力として使用して全く問題ありません。

古いブラウザ（IE11など）も考慮する必要がある特殊な案件でのみ、直前の行に固定値のフォールバックを記述して安全網を張ってください。

CONTACT

サイト制作でお困りの人はお気軽にご連絡ください。
どんなお悩み事も丁寧に返信させて頂きます。

お問い合わせページへ
WordPress移行
Webサイトを公開しよう！

「どのサーバーを選べばいいか分からない…」そんな悩みを解決！
WordPressデビューに最適なサーバーを徹底比較しました。

おすすめサーバー4選を見る
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次