Chapter03 レイアウトとメインビジュアル

概要と目標 フッター部分のレイアウトと
メイン内のレイアウトを完成さる

フッター部分のレイアウトを行い、メイン内の、メインビジュアルや、グリッドの配置を行いましょう。

今回のゴール

RERUN

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

フッターのレイアウトフッター部分の配置を完成させよう。

ページの先頭へ戻るボタンを固定配置したり、
店舗情報を横並びで配置したり、
連絡先情報と著作権表記を横並びにしたりする。

フッターのレイアウト
フッターの完成イメージ

フッター部分のHTMLを変更しよう

  1. 「www」フォルダ内の「index.html」をテキストエディタで開く
  2. 「index.html」のdl要素の内の各dt要素とdd要素のグループをdiv要素でまとめ
    （HTML5.2 ~ OK）、
    必要に応じてid属性や、class属性を指定する
www/index.html
  <footer id="footer">
    <div class="container">
      <p id="footer-button"><a href="#top">このページの先頭に戻る</a></p>

      <dl>
        <div class="info-item">
          <dt>Lunch</dt>
          <dd><time datetime="10:00:00">10:00</time> ~ <time datetime="16:00:00">16:00</time></dd>
        </div>
        <div class="info-item">
          <dt>Dinner</dt>
          <dd><time datetime="16:00:00">16:00</time> ~ <time datetime="22:00:00">22:00</time></dd>
        </div>
        <div class="info-item">
          <dt>Holiday</dt>
          <dd>毎週木曜日</dd>
        </div>
        <div class="info-item">
          <dt>Seats</dt>
          <dd>40席<small>（全席禁煙）</small></dd>
        </div>
        <div class="info-item">
          <dt>Parking</dt>
          <dd>10台</dd>
        </div>
      </dl>

      <div id="footer-siteinfo">
        <address>
          Dummy Cafe
          <a href="#" id="footer-logo"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
          架空県架空市架空0-0-0 / <a href="tel:0X-1234-5678">0X-1234-5678</a>
        </address>

        <p id="footer-copyright"><small>&copy; 2018 <a href="contact/">Dummy Cafe</a> All Rights Reserved.</small></p>
      </div>
      <!-- /#footer-siteinfo -->
    </div>
    <!-- /.container -->
  </footer>
  1. 上書き保存
  2. 「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
  3. メインのCSSの下に、フッター部分のレイアウトのCSSを行う
ボックスの計算方法を変更するプロパティ
プロパティ名 値
box-sizing CSS 3
  • content-box（初期値） ・・・ （widthやheightはコンテンツ領域のみ）
  • border-box ・・・ （ボーダーまでをwidthやheightに含める）
www/css/common.css
/*
  Footer
----------------------------------------------- */
#footer {
  clear: both;
  background-color: #212121;
  color: #bdbdbd;
}

#footer-button {
  position: fixed;
  bottom: 40px;
  right: 40px;
}

#footer dl {
  overflow: hidden;
  padding: 1em 0;
}

#footer dt {
  font-size: .75em;
}

#footer dd {
  margin-top: .25em;
  font-weight: bold;
}

#footer dd small {
  font-size: .75em;
}

.info-item {
  box-sizing: border-box;
  width: 20%;
  float: left;
  border-right: 1px solid #424242;
  text-align: center;
}

.info-item:first-child {
  border-left: 1px solid #424242;
}

#footer-siteinfo {
  clear: both;
  overflow: hidden;
  padding: 1em 0;
}

#footer-siteinfo a {
  color: #bdbdbd;
  text-decoration: none;
}

#footer-siteinfo address {
  float: left;
  font-size: .75em;
}

#footer-logo {
  margin-right: 1em;
}

#footer-copyright {
  float: right;
  text-align: right;
  font-size: .75em;
}

答えを見る

  1. 上書き保存
  2. 「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
  3. ブラウザで「www」フォルダ内の「index.html」にアクセスし、
    フッターがレイアウトされているかを確認
ブラウザでの表示例

RERUN

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

メインビジュアルのCSSpositionを使って、
テキストを重ねる。

メインビジュアル部分は、positionを活用して、キャッチコピーを写真の上に重ねます。

メインビジュアルのCSSを調整しよう

  1. 「www」 › 「css」フォルダ内の「common.css」を開く
  2. フッターCSSの下にメインビジュアルのCSSを追記する
テキストに影をつけるプロパティ
プロパティ名 値
text-shadow CSS 3 X軸の位置 Y軸の位置 ぼかし量 影の色
www/css/common.css
/* ===============================================
  Object
=============================================== */

/*
  Hero
----------------------------------------------- */
.hero {
  position: relative;
}

.hero img {
  width: 100%;
  min-width: 960px;
}

.hero p {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 960px;
  margin: -1.5em auto 0;
  text-align: center;
  color: #fff;
  font-size: 2.5em;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.hero em {
  font-size: 1.2em;
}

答えを見る

  1. 上書き保存
  2. ブラウザで「www」フォルダ内の「index.html」にアクセスし、
    メインビジュアル部分を確認
ブラウザでの表示例

RERUN

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

グリッドのCSS 2カラムや3カラムのグリッドのCSSを設定。

「人気のメニュー」の各メニューと、「ニュース&ブログ」の各記事を配置しましょう。

グリッドのレイアウト
グリッドの完成イメージ

グリッドのCSSを設定しよう。

  1. 「www」フォルダ内の「index.html」をテキストエディタで開く
  2. 「人気のメニュー」の各メニューたちと、「ニュース&ブログ」の各記事たちをdiv要素でまとめる
www/index.html
    <section class="section">
      <div class="container">
        <h2>人気のメニュー</h2>

        <div class="grid grid-4">
          <article class="grid-item">
            <a href="#">
              <h3>ブレンドコーヒー</h3>
              <figure>
                <img src="images/menu/menu-blend-coffee.jpg" alt="淹れたての香りが引き立つ最高のコーヒー。">
              </figure>
              <p>毎日厳選したコーヒー豆のみを使ったオリジナルブレンド</p>
              <p>¥ 320</p>
            </a>
          </article>

          <article class="grid-item">
            <a href="#">
              <h3>トマトソースパスタ</h3>
              <figure>
                <img src="images/menu/menu-tomato-pasta.jpg" alt="トマトソースがよく絡んだパスタをお皿に盛り付け。">
              </figure>
              <p>新鮮なトマトを惜しみなく使った自慢のトマトソースパスタ</p>
              <p>¥ 750</p>
            </a>
          </article>

          <article class="grid-item">
            <a href="#">
              <h3>チーズバーガーセット</h3>
              <figure>
                <img src="images/menu/menu-cheeseburger.jpg" alt="溢れんばかりのボリュームたっぷりハンバーガーとあみあみポテト。">
              </figure>
              <p>架空村のたまねぎとレタスを使ったチーズバーガーとポテトのセット</p>
              <p>¥ 750</p>
            </a>
          </article>

          <article class="grid-item">
            <a href="#">
              <h3>チョコレートケーキ</h3>
              <figure>
                <img src="images/menu/menu-chocolate-cake.jpg" alt="チョコレートのスポンジとクリームで作られたきれいな断層のケーキ。">
              </figure>
              当店の優秀なパティシエが愛情を込めて作ったチョコレートケーキ
              <p>¥ 500</p>
            </a>
          </article>
        </div>
        <!-- /.grid -->

        <p><a href="#">全てのメニューを見る</a></p>
      </div>
      <!-- /.container -->
    </section>

    <section class="section section-grey">
      <div class="container">
        <h2>ニュース &amp; ブログ</h2>

        <div class="grid grid-2">
          <article class="grid-item">
            <a href="#">
              <h3>プロが教える！おいしいコーヒー豆の選び方</h3>
              <p><time datetime="2018-12-11">2018.12.11</time></p>
              <figure>
                <img src="images/post/post-coffee-beans.jpg" alt="大量のコーヒー豆をひとすくい">
              </figure>
            </a>
          </article>

          <article class="grid-item">
            <a href="#">
              <h3>自宅でもおいしいコーヒーが飲めるハンドドリップの方法</h3>
              <p><time datetime="2018-12-09">2018.12.09</time></p>
              <figure>
                <img src="images/post/post-hand-drip.jpg" alt="ハンドドリップで淹れたてコーヒー">
              </figure>
            </a>
          </article>

          <aricle class="grid-item">
            <a href="#">
              <h3>2018年〜2019年の年末年始のお休みについて</h3>
              <p><time datetime="2018-12-09">2018.12.04</time></p>
              <figure>
                <img src="images/post/post-in-store.jpg" alt="1組のお客様しかいない店内の様子">
              </figure>
            </a>
          </aricle>

          <article class="grid-item">
            <a href="#">
              <h3>ノマドワーカの皆さん！ついに無料Wifi設置しました</h3>
              <p><time datetime="2018-12-01">2018.12.01</time></p>
              <figure>
                <img src="images/post/post-nomad.jpg" alt="Macを持ち込んで楽しむコーヒー">
              </figure>
            </a>
          </article>

          <article class="grid-item">
            <a href="#">
              <h3>2018年12月のおいしいコーヒーの淹れ方セミナーについて</h3>
              <p><time datetime="2018-11-20">2018.11.20</time></p>
              <figure>
                <img src="images/post/post-coffee-seminar.jpg" alt="挽きたてのコーヒーを入れる">
              </figure>
            </a>
          </article>

          <article class="grid-item">
            <a href="#">
              <h3>ラテアートが上手にできる方法を解説してみた</h3>
              <p><time datetime="2018-11-11">2018.11.11</time></p>
              <figure>
                <img src="images/post/post-latte-art.jpg" alt="きれいなハート型のラテアート">
              </figure>
            </a>
          </article>
        </div>
        <!-- /.grid -->

        <p><a href="#">全ての記事を見る</a></p>
      </div>
      <!-- /.container -->
    </section>
  1. 上書き保存
  2. 「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
  3. メインビジュアルのCSSの下に、グリッド部分のレイアウトのCSSを行う
www/css/common.css
/*
  Grid
----------------------------------------------- */
.grid {
  overflow: hidden;
  margin-top: -24px;
}

.grid-item {
  float: left;
  margin-left: 24px;
  margin-top: 24px;
}

.grid-2 .grid-item {
  width: 468px;
}

.grid-4 .grid-item {
  width: 222px;
}

.grid-2 .grid-item:nth-child(odd),
.grid-4 .grid-item:nth-child(4n + 1) {
  margin-left: 0;
}

答えを見る

  1. 上書き保存
  2. ブラウザで「www」フォルダ内の「index.html」にアクセスし、
    グリッドがレイアウトされているかを確認
ブラウザでの表示例

RERUN

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