LESSON 01

CSSでサイトの横幅を変更する

ページの横幅は「情報量が多い」「ゆったり見せたい」など、サイトの印象を大きく左右します。Template 001ではCSS変数を1か所変更するだけです。

1. 初心者向け編集エリアを開く

Template 001では、サイト全体の最大横幅を --site-width で管理しています。

template001-simple-business/css/style.css
初期設定style.css
:root {
  /* ★サイトの最大横幅 */
  --site-width: 1180px;
}

1180px の数字部分だけを書き換えます。

2. 1180px → 1000px に変更してみる

BEFORE1180px

写真やカードを広々見せやすい横幅です。

AFTER1000px

文章中心のサイトにも合う、少し引き締まった横幅です。

変更例style.css
:root {
  --site-width: 1000px;
}
pxとは： 画面上の大きさを表す単位です。ここでは「コンテンツが最大で何pxまで広がるか」を指定しています。

3. 横幅の数値はどのくらいがいい？

900〜1000px文章中心・落ち着いた印象
1080〜1180px企業・店舗サイトの標準的な使いやすさ
1200〜1320px写真・実績カードを大きく見せたいサイト

正解はありません。写真や文章の量を見ながら、50〜100pxずつ変えて比べるのがおすすめです。

4. サイト全体ではなく、一部分だけ狭くする

例えば説明文だけを読みやすい幅にしたい場合は、個別の要素に max-width を指定できます。

文章だけ横幅を制限する例style.css
.section-lead {
  max-width: 650px;
}

サイト全体は1180pxのままでも、長い文章だけ650px程度にすると視線が左右へ移動しすぎず読みやすくなります。

5. スマホでは自動的に画面幅に合わせる

Template 001の .container は、スマホで横にはみ出さないよう最初から設定されています。

すでに入っている設定style.css
.container {
  width: min(calc(100% - 40px), var(--site-width));
  margin-inline: auto;
}

--site-width を1300pxにしても、スマホで1300px幅になるわけではありません。画面が狭い場合は画面幅に合わせて縮みます。

6. 横幅変更後のチェック

  • 文章の1行が長すぎない
  • カードの中身が窮屈になっていない
  • ヘッダーのメニューが収まっている
  • PCで左右の余白が不自然ではない
  • スマートフォンで横スクロールが発生していない
NEXT LESSON

次は文字サイズを調整します。

本文を少し大きくするだけでも、読みやすさは大きく変わります。

LESSON 2へ →