【CSS】WordPress既存テーマを完全レスポンシブ化！clamp()と独自ブレイクポイント(1270px)の実装事例

2026年1月27日2026年2月2日

既存テーマ（コーポレートサイト）の表示調整案件です。標準機能ではカバーできていなかったタブレット表示～（800px～1200px付近）の表示崩れに対し、clamp()関数とcalc()を用いた詳細なレスポンシブ対応を行いました。

「一般的なブレイクポイントの罠」

多くのテーマは768px/1024pxで切り替わりますが、メニュー数が多い場合、1100px～1200px付近でナビゲーションが改行されたり、重なったりする「魔の領域」が発生していました。また、カード型レイアウトの余白がデバイス幅によって不均等になる問題もありました。

独自ブレイクポイント「1270px」の採用

デザイン密度に基づき、PC/SPの切り替えをmax-width: 1270pxに設定。中途半端な崩れを排除しました。

/* --------------------------------------------------
   ヘッダーナビゲーションのレスポンシブ設定
   一般的なタブレットサイズではなく、デザイン密度に合わせて
   1270pxを境界線（ブレイクポイント）に設定
-------------------------------------------------- */

/* 1271px以上：PC用メニューを表示 */
.global-nav {
  display: flex;
  justify-content: space-between;
}

.sp-menu-trigger {
  display: none; /* ハンバーガーメニューは隠す */
}

/* 1270px以下：PCメニューを隠し、SP用メニュー（ハンバーガー）を表示 */
@media screen and (max-width: 1270px) {
  .global-nav {
    display: none; /* メニューの重なり・改行崩れを防止 */
  }

  .sp-menu-trigger {
    display: block; /* SP用のトグルボタンを表示 */
  }
  
  /* SPメニュー展開時のスタイル調整 */
  .sp-nav-content {
    /* アイコンや文字サイズをタッチ操作しやすい大きさに確保 */
    padding: 20px;
    font-size: 1.1rem; 
  }
}

clamp()による流動的タイポグラフィ

メディアクエリの乱立を防ぐため、フォントサイズに以下のような計算式を導入。

font-size: clamp(0.8rem, 3.3vw, 2.5rem);

これにより、ウィンドウ幅に合わせて文字サイズが「なめらか」に伸縮し、常に最適なバランスを維持します。

/* --------------------------------------------------
   clamp()を使用した流動的タイポグラフィ
   基本書式: clamp(最小サイズ, 推奨サイズ(ビューポート比), 最大サイズ)
-------------------------------------------------- */

.section-title {
  /* 解説:
    - 最小値: 0.8rem (スマホでの最小確保)
    - 推奨値: 3.3vw (画面幅に合わせてリニアに可変)
    - 最大値: 2.5rem (PCでの最大サイズ制限)
  */
  font-size: clamp(0.8rem, 3.3vw, 2.5rem);
  
  /* 行間もデバイスに合わせて微調整したい場合に応用可能 */
  line-height: clamp(1.4, 2vw, 1.8);
}

.main-copy {
  /* 画面幅が狭まっても改行位置が不自然にならないよう調整 */
  font-size: clamp(14px, 2.5vw, 18px);
}

カードレイアウトの厳密な幅計算

Flexboxの親要素に対し、4段階（1200px/940px…）の幅をピクセル単位で再定義し、1行あたりの列数を制御して余白ガタつきを防止しました。

/* --------------------------------------------------
   カード型レイアウトの厳密な幅管理
   widthを％ではなくpxで段階的に切り替え、余白を一定に保つ
-------------------------------------------------- */

.card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;     /* カード間の余白 */
  margin: 0 auto; /* 中央寄せ */
  width: 1200px; /* デフォルト（PC）のコンテンツ幅 */
}

/* 1200px以下：幅を940pxに固定（3列など） */
@media screen and (max-width: 1240px) {
  .card-wrapper {
    width: 940px;
  }
}

/* 940px以下：幅を700pxに固定（2列など） */
@media screen and (max-width: 980px) {
  .card-wrapper {
    width: 700px;
  }
}

/* 700px以下：幅を500pxに固定、あるいはスマホ用100%表示へ */
@media screen and (max-width: 740px) {
  .card-wrapper {
    width: 90%; /* スマホサイズは%指定に切り替え */
    max-width: 500px;
  }
}