Chapter04 レイアウトのCSSを作成

概要と目標レイアウト部分のCSSを定義する

ボックスのセンタリングや、float、グリッドレイアウトなど、
ボックスの配置に関するCSSを定義する。

今回のゴール

RERUN

新しいウインドウで表示する

ボックスのセンタリングリキッドレイアウトに、
最大幅を設定する。

画面の小さいデバイスで閲覧している場合は、
デバイス幅の 95%でセンタリング。
横に広いデバイスで閲覧されている場合は、
最大 1200pxで、センタリング。

センタリングするボックス
センタリングするボックス

ボックスのセンタリングしてみよう

  1. 「dummy-photo-gallery」フォルダ内の「index.html」を開く
  2. 上の「センタリングするボックス」を参考に、センタリングする範囲を
    div要素でマークアップ（クラス名「l-wrapper」）
dummy-photo-gallery/index.html
<header role="banner">
  <div class="l-wrapper">
    <h1>
      <span lang="en">Dummy Photo Gallery</span>
      <a href="./"><img src="images/logo-primary.png" srcset="images/logo-primary.png 1x, images/logo-primary@2x.png 2x" alt="Dummy Photo Gallery"></a>
    </h1>

    <nav role="navigation">
      <h2>サイト内メニュー</h2>
      <button type="button" aria-controls="global-nav" aria-expanded="false">メニューを開閉する</button>
      <ul id="global-nav" lang="en">
        <li><a href="#">All</a></li>
        <li><a href="#">Mountain</a></li>
        <li><a href="#">Ocean</a></li>
        <li><a href="#">River</a></li>
        <li><a href="#">Lake</a></li>
        <li><a href="#">Other</a></li>
      </ul>
    </nav>
  </div>
  <!-- /.l-wrapper -->
</header>
  <section>
    <div class="l-wrapper">
      <h2><span lang="en">Latest Photos</span><br>最新の写真</h2>
      <p><a href="#">写真をもっと見る</a></p>
    </div>
    <!-- /.l-wrapper -->
  </section>
</main>
<footer role="contentinfo">
  <div class="l-wrapper">
    <address>
    <span lang="en">Dummy Photo Gallery</span>
    <a href="mailto:info@dummy.jp">
      <img src="images/logo-secondary.png" srcset="images/logo-secondary.png 1x, images/logo-secondary@2x.png 2x" alt="Dummy Photo Gallery">
    </a><br>
    〒500-0000 大阪府架空市架空町1-1-1<br>
    TEL : 06-1234-5678
  </address>
    <p lang="en"><small>&copy; 2017 <a href="mailto:info@dummy.jp">Dummy Photo Gallery</a>.</small></p>
  </div>
  <!-- /.l-wrapper -->
</footer>
  1. 上書き保存
  2. 「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
  3. デフォルトスタイルの下に、以下のCSSを記述
セレクタ プロパティ 値
.l-wrapper ボックスの幅 95%
ボックスの最大幅 1200px
ボックスの間隔
  • 上下： 0
  • 左右： 自動
オーバーフロー 非表示
dummy-photo-gallery/css/common.css
/*
  Layout
-----------------------------------------------------*/

/* Centering */
.l-wrapper {
  max-width: 1200px;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
}

答えを見る

  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
    センタリングされているかを確認
完成例

RERUN

新しいウインドウで表示する

ヘッダーのレイアウトロゴを左に、
ナビを右にfloat。

今回のデザインでは、h1要素を左にfloatし、 nav要素を右にfloatする。
それぞれ タグが変更されてもレイアウトが変わらないように、classセレクタを活用する

ヘッダーのレイアウト
ヘッダーのレイアウト

ヘッダーをレイアウトしよう

  1. 「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
  2. 上の「ヘッダーのレイアウト」を参考に、header要素、h1要素、nav要素に、
    class属性を追加する。
dummy-photo-gallery/index.html
<header class="l-header" role="banner">
  <div class="l-wrapper">
    <h1 class="l-header-title">
      <span lang="en">Dummy Photo Gallery</span>
      <a href="./"><img src="images/logo-primary.png" srcset="images/logo-primary.png 1x, images/logo-primary@2x.png 2x" alt="Dummy Photo Gallery"></a>
    </h1>

    <nav class="l-header-nav" role="navigation">
      <h2>サイト内メニュー</h2>
      <button type="button" aria-controls="global-nav" aria-expanded="false">メニューを開閉する</button>
      <ul id="global-nav" lang="en">
        <li><a href="#">All</a></li>
        <li><a href="#">Mountain</a></li>
        <li><a href="#">Ocean</a></li>
        <li><a href="#">River</a></li>
        <li><a href="#">Lake</a></li>
        <li><a href="#">Other</a></li>
      </ul>
    </nav>
  </div>
  <!-- /.l-wrapper -->
</header>
  1. 上書き保存
  2. 「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
  3. センタリングのスタイルの下に、以下のCSSを記述
セレクタ プロパティ 値
.l-header-title フロート 左
.l-header-nav フロート 右
dummy-photo-gallery/css/common.css
/* Header */
.l-header-title {
  float: left;
}

.l-header-nav {
  float: right;
}

答えを見る

  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
    ヘッダーが配置されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

メインエリアのレイアウトsectionの余白を定義

まず、main要素に、clear: bothを指定し、floatの回り込みを解除する。
そして、 sectionの上下の余白を、スマホ、タブレット、PCでそれぞれ設定する。

メインエリアのレイアウト
メインエリアのレイアウト

メインエリアをレイアウトしよう

  1. 「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
  2. 上の「メインエリアのレイアウト」を参考に、main要素、section要素に、
    class属性を追加する。
dummy-photo-gallery/index.html
<main class="l-main" role="main">
  <picture>
    <source srcset="images/hero-top-sp.jpg 1x, images/hero-top-sp@2x.jpg 2x" media="(max-width: 767px)">
    <source srcset="images/hero-top-tab.jpg 1x, images/hero-top-tab@2x.jpg 2x" media="(max-width: 1023px)">
    <img src="images/hero-top-pc.jpg" srcset="images/hero-top-pc.jpg 1x, images/hero-top-pc@2x.jpg 2x" alt="川の横で夕日を見ながら寄り添う男女">
  </picture>
  <p lang="en">The Picture Taken By Me is <em>Beautiful</em></p>
  <section class="l-section">
    <div class="l-wrapper">
      <h2><span lang="en">Latest Photos</span><br>最新の写真</h2>
  1. 上書き保存
  2. 「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
  3. ヘッダーのスタイルの下に、以下のCSSを記述
基本のスタイル
セレクタ プロパティ 値
.l-main フロートの回り込み解除 両方
.l-section 余白
  • 上下： 1.5em
  • 左右： 0
画面幅が768px以上の時のスタイル
セレクタ プロパティ 値
.l-section 余白
  • 上下： 2em
  • 左右： 0
画面幅が1024px以上の時のスタイル
セレクタ プロパティ 値
.l-section 余白
  • 上下： 2.5em
  • 左右： 0
dummy-photo-gallery/css/common.css
/* Main */
.l-main {
  clear: both;
}

/* Section */
.l-section {
  padding: 1.5em 0;
}

@media screen and (min-width: 768px) {
  .l-section {
    padding: 2em 0;
  }
}

@media screen and (min-width: 1024px) {
  .l-section {
    padding: 2.5em 0;
  }
}

答えを見る

  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
    セクションの上下に余白が設定されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

グリッドのレイアウトグリッドのレイアウトには
様々なやり方がある。

グリッドのレイアウトには、floatを使う方法や、display: inline-blockを使う方法、
Flexbox、display: gridなど様々な方法がある。
（2025年12月現在後者の2つは、対応ブラウザの関係でまだ使いにくい）

グリッドのレイアウトボックス（3カラムで余白が 16px の場合）
グリッドのレイアウトボックス

今回は、floatを使った方法でグリッドレイアウトを作成する。
各ボックス間の余白は、透明のborderを使って空ける。
その際、borderの太さは、空けたい余白の半分の値にする。
これで、borderが隣接する部分は、空けたい余白の量になる。
なお、 box-sizing: border-boxを指定しているため、borderまでがボックスの幅となる。
従って、ボックスの widthには、１行あたりに並べるボックスの割合を指定すれば良い。
行の先頭と最後のボックスの余白（border）は、親要素にネガティブマージンを使い調整する。

グリッドのレイアウトを設定しよう

  1. 「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
  2. 上の「ヘッダーのレイアウト」を参考に、ol要素とli要素に class属性を追加する。
dummy-photo-gallery/index.html
<h2><span lang="en">Latest Photos</span><br>最新の写真</h2>
<ol class="l-grid">
  <li class="l-grid-item">
    <a href="images/thumbnail1@2x.jpg">
      <figure>
        <img src="images/thumbnail1.jpg" srcset="images/thumbnail1.jpg 1x, images/thumbnail1@2x.jpg 2x" alt="青く澄んだ水に横に広がる滝">
        <figcaption>きれいな滝</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail2@2x.jpg">
      <figure>
        <img src="images/thumbnail2.jpg" srcset="images/thumbnail2.jpg 1x, images/thumbnail2@2x.jpg 2x" alt="山の上にある鉄橋を走る機関車">
        <figcaption>高いところの機関車</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail3@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail3.jpg" srcset="images/thumbnail3.jpg 1x, images/thumbnail3@2x.jpg 2x" alt="きれいな夕日に写る鳥と一本の木">
        <figcaption>きれいな夕日</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail4@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail4.jpg" srcset="images/thumbnail4.jpg 1x, images/thumbnail4@2x.jpg 2x" alt="高いところから見下ろした都会の夜景">
        <figcaption>きれいな夜景</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail5@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail5.jpg" srcset="images/thumbnail5.jpg 1x, images/thumbnail5@2x.jpg 2x" alt="すこし逆光がまぶしい桟橋のある海">
        <figcaption>きれいな景色</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail6@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail6.jpg" srcset="images/thumbnail6.jpg 1x, images/thumbnail6@2x.jpg 2x" alt="山の中にある小川の横にある小屋">
        <figcaption>山の中の小屋</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail7@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail7.jpg" srcset="images/thumbnail7.jpg 1x, images/thumbnail7@2x.jpg 2x" alt="雲よりも高い山から撮影した、とてもきれいなご来光">
        <figcaption>きれいなご来光</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail8@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail8.jpg" srcset="images/thumbnail8.jpg 1x, images/thumbnail8@2x.jpg 2x" alt="雪山の中で両手を広げる少女">
        <figcaption>雪の女王</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail9@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail9.jpg" srcset="images/thumbnail9.jpg 1x, images/thumbnail9@2x.jpg 2x" alt="山の上にある小岩に腰掛けて、ギターを引く男性">
        <figcaption>ギタリストと湖</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail10@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail10.jpg" srcset="images/thumbnail10.jpg 1x, images/thumbnail10@2x.jpg 2x" alt="いまにも襲いかかりそうな下をペロっとしたライオン">
        <figcaption>ライオンキング</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail11@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail11.jpg" srcset="images/thumbnail11.jpg 1x, images/thumbnail11@2x.jpg 2x" alt="どこかの星から地球を眺める猿4匹">
        <figcaption>猿の惑星</figcaption>
      </figure>
    </a>
  </li>
  <li class="l-grid-item">
    <a href="images/thumbnail12@2x.jpg">
      <figure class="card-thumbnail">
        <img src="images/thumbnail12.jpg" srcset="images/thumbnail12.jpg 1x, images/thumbnail12@2x.jpg 2x" alt="波が強い桟橋のある海">
        <figcaption>きれいな海</figcaption>
      </figure>
    </a>
  </li>
</ol>
  1. 上書き保存
  2. 「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
  3. section 関連のスタイルの下に、以下のCSSを記述
基本のスタイル（カラム： 2列、余白: 8px）
セレクタ プロパティ 値
.l-grid オーバーフロー 非表示
ボックスの幅 自動
ボックスの間隔 -4px
.l-grid-item ボックスの幅 50%
フロート 左
ボーダーの幅 4px
ボーダーのスタイル 実線
ボーダーの色 透明
画面幅が768px以上の時のスタイル（カラム： 3列、余白: 16px）
セレクタ プロパティ 値
.l-grid ボックスの間隔 -8px
.l-grid-item ボックスの幅 33.33333%
ボーダーの幅 8px
画面幅が1024px以上の時のスタイル（カラム： 4列、余白: 16px）
セレクタ プロパティ 値
.l-grid-item ボックスの幅 25%
dummy-photo-gallery/css/common.css
/* Grid */
.l-grid {
  overflow: hidden;
  width: auto;
  margin: -4px;
}

.l-grid-item {
  width: 50%;
  float: left;
  border: 4px solid transparent;
}

@media screen and (min-width: 768px) {
  .l-grid {
    margin: -8px;
  }
  .l-grid-item {
    width: 33.33333%;
    border-width: 8px;
  }
}

@media screen and (min-width: 1024px) {
  .l-grid-item {
    width: 25%;
  }
}

答えを見る

  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
    幅に合わせてカラム数が変わるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

フッターのレイアウトスマホでは縦にレイアウト。
タブレット以上で横にフロート。

スマホで閲覧している時は、連作先情報と著作権情報を立てに配置し、
タブレット以上になると、 floatで横並びに配置する。

フッターのレイアウトボックス（タブレット以上の時）
フッターのレイアウトボックス

フッターのレイアウトを設定しよう

  1. 「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
  2. 上の「ヘッダーのレイアウト」を参考に、footer要素、address要素、p要素に
    class属性を追加する。
dummy-photo-gallery/index.html
<footer class="l-footer" role="contentinfo">
  <div class="l-wrapper">
    <address class="l-footer-address">
      <span lang="en">Dummy Photo Gallery</span>
      <a href="mailto:info@dummy.jp">
        <img src="images/logo-secondary.png" srcset="images/logo-secondary.png 1x, images/logo-secondary@2x.png 2x" alt="Dummy Photo Gallery">
      </a><br>
      〒500-0000 大阪府架空市架空町1-1-1<br>
      TEL : 06-1234-5678
    </address>
    <p class="l-footer-copyright" lang="en"><small>&copy; 2017 <a href="mailto:info@dummy.jp">Dummy Photo Gallery</a>.</small></p>
  </div>
  <!-- /.l-wrapper -->
</footer>
  1. 上書き保存
  2. 「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
  3. grid 関連のスタイルの下に、以下のCSSを記述
画面幅が768px以上の時のスタイル（
セレクタ プロパティ 値
.l-footer-address フロート 左
.l-footer-copyright フロート 右
dummy-photo-gallery/css/common.css
/* Footer */
@media screen and (min-width: 768px) {
  .l-footer-address {
    float: left;
  }

  .l-footer-copyright {
    float: right;
  }
}

答えを見る

  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
    幅に合わせてカラム数が変わるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する