メインコンテンツとは
- ページの主役となる情報を表示する領域
- テキスト量・要素数が最も変動する
- レイアウト全体の調整役になりやすい
辞書⓪の用語を前提に使う：レイアウト調整役 / 固定枠 / 限界を持つ箱 / 構造として固定したい箱
メインの骨組み（レイアウト設計）
よくあるレイアウト例
1カラム(main)
役割分担
- main：
レイアウト調整役 + 限界を持つ箱 - 構造：構造として固定したい箱（崩したくない）
使われる場面
- ブログ記事
- LP
- 利用規約・ドキュメント
- 迷ったらまずこれ。 中身が増減しても壊れにくい、最も安全な骨組み
コード例
1カラム（フルブリード＋コンテナ）
┌────────────────────────────┐
│ section（フルブリード） │
│ ┌────────────────────┐ │
│ │ main（max-width） │ │
│ │ コンテンツ │ │
│ └────────────────────┘ │
└────────────────────────────┘
役割分担
- 外側：構造固定（全幅演出）
- 内側（main）：調整役 + 限界あり（max-width）
使われる場面
- メディア記事
- ストーリー型LP
- 帯は全幅・中身は制限が王道
コード例
2カラム(main+aside)
役割分担
- main：レイアウト調整役（主役）
- aside：固定枠（補助情報）
- 構造：構造として固定したい箱
使われる場面
- 記事 + 目次
- EC（商品一覧 + フィルタ）
- 管理画面
- 主従が明確な構造
- aside を調整役にしないのが重要
コード例
2カラム(aside+main)
役割分担
- aside：固定枠（ナビ・フィルタ）
- main：レイアウト調整役
- 構造：固定
使われる場面
- 管理画面
- ダッシュボード
- 操作・ナビゲーションを優先したい画面で使われる
コード例
骨組み段階では前と同じなので割愛
可変2カラム（画面幅で構造が変わる）
PC
[ main ][ aside ]
SP
[ main ]
[ aside ]
- 縮め続けない
- 限界で構造を切り替える骨組み
役割分担
- main：レイアウト調整役 + 限界を持つ箱
- aside：固定枠（ただし状態を持つ）
- 構造：状態遷移あり
使われる場面
- レスポンシブ前提のサイト
- 情報量が多いページ
コード例
2カラム（main + aside + 広告/補助）
[ main ][ aside ][ ad ]
固定枠が増えるほど main に余白責務を集中させる
役割分担
- main：調整役
- aside：固定枠
- ad：固定枠（サイズ前提）
- 構造：固定
使われる場面
- メディア
- ニュースサイト
コード例
NG・注意点
aside を調整役にしてしまう
ex.css
.aside { flex: 1; }
- 補助情報が潰れる
- 主従関係が逆転
👉 調整役は main に限定
main に固定幅を持たせる
ex.css
.main { width: 800px; }
レスポンシブで破綻
👉 主役は固定枠にしない
メイン中身のレイアウト
よくあるレイアウト例
カードを並べる(一覧/グリッド)
[ card ][ card ][ card ]
[ card ][ card ][ card ]
数・サイズが変わる前提。 高さは揃えない
役割分担
- main：レイアウト調整役
- card：中身サイズ基準
- 並び：grid（推奨） / flex（wrap）
使われる場面
- 記事一覧
- 商品一覧
- ギャラリー
コード例
サイドバー中身（目次・フィルタ）
[ TOC ]
[ tag ]
[ tag ]
潰れない前提。 sticky は後続記事で扱う
役割分担
- aside：固定枠
- 中身：縦積み
使われる場面
- 記事ページ
- EC
コード例
記事本文（縦流し）
[ title ]
[ text ]
[ text ]
可読性最優先。 max-width が効く
役割分担
- main：
調整役 + 限界あり - 中身：自然流し（高さ・幅は任せる）
使われる場面
- ブログ記事
- ドキュメント
コード例
記事一覧（リスト型）
[ item ]
[ item ]
[ item ]
役割分担
- main：調整役
- item：横並び/縦積み
使われる場面
- ニュース
- 更新履歴
コード例
ページネーション / 無限スクロール
[ list ]
[ pager ]
役割分担
- main：調整役
- pager：固定枠（操作）
使われる場面
一覧が長いページ
コード例
NG・注意点
% でカード幅を決める
ex.css
.card { width: 33%; }
gap / padding で破綻
中身を無理に高さ揃えする
ex.css
.card { height: 300px; }
一見きれいだけど👇
- 文字が多い → はみ出る or 切れる
- 少ない → 変な余白
- 翻訳 → 即アウト
👉 “今だけ綺麗”で、未来で必ず壊れる
👉 中身は揃えない。揃えるのは骨組み
揃えるべきもの
中身ではなく骨組み
┌─────┬─────┬─────┐
│card │card │card │
│ │ │ │
├─────┼─────┼─────┤
│card │card │ │
│ │ │ │
└─────┴─────┴─────┘
👉 これが揃っていれば、視覚的には整って見える
- 列数
- 列幅
- カード間の gap・ カード内の余白(padding)
- グリッドのライン
- 見出しの最大行数だけ制御
ex.css
.card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
👉 中身全部じゃなく“一部だけ”制御
揃えなくていいもの(中身)
- カード内の文章量
- タイトルの行数
- 説明文の高さ
例外：中身を揃えていいケース
商品カード（EC）
- 価格
- ボタン
- 画像比率
ここは揃えた方が良い
[ image ]
[ title ]
[ price ] ← 揃える
[ button ] ← 揃える
👉 「比較」が目的だから
ダッシュボード
- チャート
- KPI
👉 情報の対比が目的