HTML/CSS基礎 2025.10.19

【レスポンシブ設計】SP→PCで破綻しないCSS設計とFlex/Gridの使い分け

コンテンツ 非表示

1 第1章：モバイルファーストの考え方

2 第2章：ブレークポイントとコンテナ幅

3 第3章：FlexとGridの切替

4 第4章：タイポグラフィと余白のスケール

5 第5章：保守しやすいCSS記法

6 まとめ

第1章：モバイルファーストの考え方

基本は「SPをデフォルト」（小さい画面で成立）→画面が広がるほど装飾や横並びを増やします。


/* 基本（SP想定） */
.card-list {
display:block; 
}
/* 768px以上で横並び */
@media (min-width:768px){ 
 .card-list { 
  display:flex; 
  gap:24px; 
 } 
}

第2章：ブレークポイントとコンテナ幅

目安： 576 / 768 / 992 / 1200（px）。案件に合わせて2〜3個に絞ると保守性が上がります。


.container { 
 width:min(1100px, 92%); 
 margin-inline:auto; 
}
@media (min-width:768px){ 
 .grid{ 
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:24px; 
 } 
}

第3章：FlexとGridの切替

SPでは縦積み、PCではGridで2〜3列に。


.cards { 
 display:flex; 
 flex-direction:column; 
 gap:16px; 
}
@media (min-width:992px){
 .cards { 
  display:grid; 
  grid-template-columns:repeat(3, 1fr); 
  gap:24px; 
 }
}

第4章：タイポグラフィと余白のスケール


h1{ font-size:clamp(28px, 4vw, 36px); }
h2{ font-size:clamp(22px, 2.8vw, 28px); }
p { line-height:1.8; }
.section{ padding-block:clamp(40px, 6vw, 80px); }

Step Logの既存スケール（v2.2）に合わせ、見出しサイズとセクション余白をclampで可変にします。

第5章：保守しやすいCSS記法

役割ごとにファイル分割（base / layout / components / pages）
命名はBEMや役割基準（.card__title, .btn–primary）
余白・色はトークン化（変数）で統一


$space: (xs:8px, sm:16px, md:24px, lg:40px);
.btn--primary{ 
 background:#2f5ea6; 
 color:#fff; 
 padding:map-get($space, sm) map-get($space, md); 
}

まとめ

SP基準で破綻しない最小構成をまず作る
画面が広がるほど横並び・装飾を追加
Flexは整列、Gridは骨格。適材適所で切替

Blog