7.7 横幅を調整する

戻る

ブラウザ画面の横幅を広げると、レイアウトも横に伸びます。その結果、本文やサイドメニューなども横幅が伸び、見にくくなってしまいます。

ブラウザの横幅を広げた結果、
横に伸びきったレイアウト。

画像が大きくなりすぎたり、サイドメニューが広すぎたりして見にくいです。

そこで、レイアウト全体の横幅を最大1000ピクセルに固定し、横に広がりすぎないようにします。

横幅を制限する

レイアウト全体の横幅は、<header>、<nav>、wrapクラス、<footer>の横幅で調整します。ここでは、@media (min-width: 1040px) {～}のメディアクエリを新たに加え、次のような設定を追加して横幅を制限します。

また、全体を中央に揃えて表示するために、margin-left と margin-right でボックスの左右の余白サイズを「auto」に設定しています。これにより、左右に同じサイズの余白が挿入されて、全体が中央配置になります。

なおこの設定は、他の設定よりも優先したいので、スタイルシートの末尾に記入してください。スタイルシートの仕様で、設定が重複した場合、後にある設定が優先されるからです。

・・省略（色々書いてある末尾に下記を追加してください）・・

/* 幅1040px以上 */
@media (min-width: 1040px){
  header,nav, .wrap, footer {
    max-width:1000px;
    margin-left:auto;
    margin-right:auto; }
}

レイアウト全体の横幅が1000ピクセルに制限されます。ブラウザの横幅を広げても、レイアウトは一定サイズまでしか広がりません。

なおブレイクポイントを 1000px ではなく 1040px としているのは、@media が判別するブラウザ画面の横幅に、ページの左右に自動的に挿入される余白（約10px x2）や、縦スクロールバー（約20px）の幅が含まれるためです。 そこで、レイアウトの横幅1000pxに対してブレイクポイントは 1040px とし、余白やスクロールバーが存在してもレイアウト全体が画面内に収まるようにしています。

コンパクトなレイアウトを調整する

横幅640px以下になるスマートフォンなどの小さな画面では、ナビゲーションメニューに改行が入ってしまい、見にくくなってしまいます。（パソコンで試す場合は、ブラウザのウインドウの横幅を短くしてみましょう）

スマートフォンから見たレイアウト

そこで @media (max-width: 639px) {～} のメディアクエリを新たに加え、次のような設定を追加してナビゲーションメニューがコンパクトに表示されるようにします。

ナビゲーションメニューをコンパクトにする方法はいくつかありますが、ここでは文字の大きさと余白を調整する簡単な方法を使います。

スタイルシートの末尾に以下の記述を追加して、基準のデザインを変更します。<nav>内の<li>内の<a>に対して padding で上下の余白を「10px」に、左右の余白を「3px」に縮小し、font-sizeで文字のサイズを「10px」に縮小します。

・・省略・・

/* 幅1040px以上 */
@media (min-width: 1040px){
  header,nav, .wrap, footer {
    max-width:1000px;
    margin-left:auto;
    margin-right:auto; }
}

/* 幅639px以下 */
@media (max-width: 639px){
  nav li a { padding: 10px 3px;
             font-size: 10px; }
}

ナビゲーションメニューがコンパクトになりました。

サイト名と記事タイトルの調整

同様に、サイト名や記事のタイトルも画面の大きな面積を占めているため、画面に合わせてひと回り小さくします。

基本のデザインでは、サイト名（header h1）は「30px」、サイトの説明文（header p）は「20px」、記事のタイトル（article h1）は「34px」に設定しています。これらをひと回り小さくするために、次のようにスタイルシート設定を追加し、サイト名を「20px」、サイト説明文を「10px」、記事のタイトルを「24px」に縮小します。

・・省略・・

/* 幅1040px以上 */
@media (min-width: 1040px){
  header,nav, .wrap, footer {
    max-width:1000px;
    margin-left:auto;
    margin-right:auto; }
}

/* 幅639px以下 */
@media (max-width: 639px){
  nav li a { padding: 10px 3px;
             font-size: 10px; }
  header h1 { font-size: 20px; }
  header p { font-size: 10px; }
  article h1 { font-size: 24px; }
}

サイト名や記事のタイトルがコンパクトになりました。

余白サイズの調整

余白も同様に調整します。ここではサイト名の上下の余白と、記事のタイトルの上の余白を小さくします。縦方向の間隔を調整するで行った基本設定を確認すると、サイト名の上下の余白が「8px」、記事とサイドメニューの上余白が「40px」に設定してあります。これらをそれぞれ縮小するため、以下のようにスタイルシート設定を追加します。

・・省略・・

/* 幅1040px以上 */
@media (min-width: 1040px){
  header,nav, .wrap, footer {
    max-width:1000px;
    margin-left:auto;
    margin-right:auto; }
}

/* 幅639px以下 */
@media (max-width: 639px){
  nav li a { padding: 10px 3px;
             font-size: 10px; }
  header h1 { font-size: 20px; }
  header p { font-size: 10px; }
  article h1 { font-size: 24px; }
  header { padding-top: 4px;
           padding-bottom: 4px; }
  article { padding-top: 25px;
            padding-bottom: 0px; }
  aside { padding-top: 0px; }
}

縦方向の間隔が、狭い画面向けに調整されました。

パソコンの場合はブラウザのウインドウの横幅を広げたり縮めたりして、レイアウトが変化する様子を確認しましょう。