【Chapter6】ギャラリーサイトを完成させよう

概要と目標サイトを完成させよう。

メイン部分のメインビジュアルや見出し、カード
ボタン、フッターなどを作成しサイトを完成させよう。

今回のゴール

RERUN

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

メインのスタイルメインエリアは、
ヘッダーに潜っている。

ヘッダーは、position: fixedで固定している、
従って、メインエリアはヘッダーの下に潜り込んでいるので、
paddingで調整する。

メインエリアをデザインしてみよう

「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
.l-mainに、以下のCSSを追記

dummy-photo-gallery/css/common.css

/* Main */
.l-main {
  clear: both;
  padding-top: 3em;
  background-color: #fafafa;
}

@media screen and (min-width: 768px) {
  .l-main {
    padding-top: 4.5em;
  }
}

@media screen and (min-width: 1024px) {
  .l-main {
    padding-top: 5em;
  }
}

上書き保存
ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
ヘッダーに潜り込んでいないかを確認

完成例

RERUN

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

メインビジュアル写真の中央にテキストを重ね、
ウインドウ幅に応じて文字サイズを変える。

メインビジュアルは、positionプロパティを活用し、写真の上にテキストを重ねる。
ウインドウのサイズに合わせて文字サイズを変更するため、単位は vwを使う。

メインビジュアルをレイアウトしよう

「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
下の「メインビジュアルの構成」を参考に、div要素を追加し、
そのdiv要素やpicture要素、p要素、em要素に、 class属性を追加する。

dummy-photo-gallery/index.html

<div class="hero hero-home">
  <picture class="hero-image">
    <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>
  <div class="hero-body">
    <p class="hero-copy" lang="en">
      The Picture Taken By Me is
      <em class="hero-emphasis">Beautiful</em>
    </p>
  </div>
  <!-- /.hero-body -->
</div>
<!-- /.hero -->

上書き保存
「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
ボタン関連のスタイルの上に、以下のCSSを記述

dummy-photo-gallery/css/common.css

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

.hero-body {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Android, Brackberry  */
      -ms-transform: translate(-50%, -50%); /* IE9  */
          transform: translate(-50%, -50%);
}

.hero-home .hero-body {
  margin-left: 22%;
}

.hero-home .hero-copy {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, .3);
  font-weight: 700;
  font-size: 4vw; /* IE8以下非対応 */
}

.hero-home .hero-emphasis {
  display: block;
  font-size: 2.75em;
}

@media screen and (min-width: 768px) {
  .hero-home .hero-copy {
    font-size: 3vw;
  }
}

上書き保存
ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
写真の上に文字が配置されているかを確認

ただし、このままではメインビジュアルが、ヘッダより上に重なってしまうので、
z-indexを使って、header要素の重なり順を上にする

dummy-photo-gallery/css/common.css

/* Header */
.l-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: .75em 0;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
  z-index: 1;
}

ブラウザでの表示例

RERUN

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

見出しのスタイル左に`border`を付けて、
日本語部分を小さくする。

今回の見出しは、よく見かける、左にborderがあるデザインにする。
日本語部分は、文字サイズを小さくし、色を薄くする。

見出しのスタイルを作成しよう

「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
下の「見出しの構成」を参考に、日本語部分を囲んだspan要素を新たに生成に、
そのspan要素と、h2要素にclass属性を追加する

dummy-photo-gallery/index.html

<h2 class="heading-primary">
  <span lang="en">Latest Photos</span><br>
  <span class="heading-caption">最新の写真</span>
</h2>

上書き保存
「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
メインビジュアル関係のスタイルの下に、以下のCSSを記述

dummy-photo-gallery/css/common.css

/* Heading */
.heading-primary {
  margin-bottom: 1em;
  padding-left: .5em;
  border-left: 4px solid #263238;
  font-weight: 700;
  font-size: 1.5em;
  line-height: .8;
}

.heading-caption {
  color: #90a4ae;
  font-weight: 500;
  font-size: .5em;
}

@media screen and (min-width: 768px) {
  .heading-primary {
    font-size: 1.8em;
  }
}
@media screen and (min-width: 1024px) {
  .heading-primary {
    font-size: 2em;
  }
}

上書き保存
ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
見出しが出来ているかを確認

ブラウザでの表示例

RERUN

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

カードのスタイル写真を`100%`に広げ、
白い背景を付ける。

カード型の装飾部分は、全体に白い背景を付けて、img要素の横幅を、100%に広げる。
文字は黒文字にし、余白を付ける。

カードのスタイルを作成しよう

「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
上の「カードのデザイン」を参考に、a要素と、fugure要素に、
class属性を追加する。

dummy-photo-gallery/index.html

<ol class="l-grid">
  <li class="l-grid-item">
    <a href="images/thumbnail1@2x.jpg" class="card">
      <figure class="card-thumbnail">
        <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" class="card">
      <figure class="card-thumbnail">
        <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" class="card">
      <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" class="card">
      <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" class="card">
      <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" class="card">
      <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" class="card">
      <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" class="card">
      <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" class="card">
      <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" class="card">
      <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" class="card">
      <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" class="card">
      <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>

上書き保存
「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
ヘディング関係のスタイルの下に、以下のCSSを記述

dummy-photo-gallery/css/common.css

/* Card */
.card {
  display: block;
  background-color: #fff;
  text-decoration: none;
}

a.card:hover {
  background-color: #eee;
}

.card-thumbnail figcaption {
  padding: 1em;
  color: #263238;
  font-size: .8em;
}

.card-thumbnail img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .card-thumbnail figcaption {
    padding: 1.5em;
    font-size: 1em;
  }
}

上書き保存
ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
カードのスタイル出来ているかを確認

ブラウザでの表示例

RERUN

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

ボタンのスタイル境界線のみのシンプルな
角丸ボタン。

ボタンは境界線のみのシンプルなボタンにする。
角丸を使ってボタンっぽさを演出。

ボタンのスタイルを作成しよう

「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
上の「ボタンのデザイン」を参考に、p要素と、a要素に、
class属性を追加する。

dummy-photo-gallery/index.html

<p class="l-section-button"><a href="#" class="button button-primary">写真をもっと見る</a></p>

上書き保存
「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
セクション関係のスタイルに、以下のCSSを追記

dummy-photo-gallery/css/common.css

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

.l-section-button {
  clear: both;
  margin: 1.5em auto 0;
  max-width: 360px;
}

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

  .l-section-button {
    margin-top: 2em;
  }
}

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

  .l-section-button {
    margin-top: 2.5em;
  }
}

ハンバーガーボタン関係のスタイルの上に、以下のCSSを記述

dummy-photo-gallery/css/common.css

.button {
  position: relative;
  display: block;
  padding: 1em;
  border-radius: .5em;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease-in-out; /* IE9非対応 */
}

.button-primary {
  border: 1px solid #263238;
  color: #263238;
}

.button-primary:before,
.button-primary:after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: inline-block;
  margin: auto 0;
  width: .5em;
  height: .5em;
  content: '';
  transition: all .2s ease-in-out; /* IE9非対応 */
  -webkit-transform: rotate(-45deg); /* Android, Brackberry  */
      -ms-transform: rotate(-45deg); /* IE9  */
          transform: rotate(-45deg);
}

.button-primary:before {
  right: 2em;
  background-color: #263238;
}

.button-primary:after {
  right: 2.1em;
  background-color: #fafafa;
}

.button-primary:hover {
  background-color: #263238;
  color: #fff;
}

.button-primary:hover:before {
  right: 1.5em;
  background-color: #fff;
}

.button-primary:hover:after {
  right: 1.6em;
  background-color: #263238;
}

上書き保存
ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
ボタンのスタイル出来ているかを確認

ブラウザでの表示例

RERUN

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

フッターのスタイル背景色と文字の色を変更し、
テキストの位置を揃えたら完成。

フッター部分は、背景色と文字の色を変更し、
テキストやロゴ、著作権表記の位置を揃える。

フッターのスタイルを作成する

「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
下の「フッターの構成」を参考に、span要素と、a要素にclass属性を追加する

dummy-photo-gallery/index.html

<footer class="l-footer" role="contentinfo">
  <div class="l-wrapper">
    <address class="l-footer-address">
      <span class="screen-reader-text" lang="en">Dummy Photo Gallery</span>
      <a href="mailto:info@dummy.jp" class="logo-secondary">
        <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>© 2017 <a href="mailto:info@dummy.jp">Dummy Photo Gallery</a>.</small></p>
  </div>
  <!-- /.l-wrapper -->
</footer>

上書き保存
「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
l-footer 関連のところに、以下のCSSを追記

dummy-photo-gallery/css/common.css

/* Footer */
.l-footer {
  padding: 1.5em;
  background-color: #263238;
  color: #90a4ae;
  text-align: center;
}

.l-footer-address {
  font-style: normal;
  font-size: .8em;
  line-height: 1.3;
}

.l-footer-copyright {
  margin-top: 1em;
  font-size: .8em;
}

.l-footer-copyright a {
  color: #90a4ae;
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  .l-footer {
    text-align: left;
  }

  .l-footer-address {
    float: left;
  }

  .l-footer-copyright {
    float: right;
    margin-top: 4em;
    text-align: right;
  }
}

.heading 関連の下に、以下のCSSを記述

dummy-photo-gallery/css/common.css

/* Logo */
.logo-secondary {
  display: inline-block;
  margin-bottom: 1em;
}

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

ブラウザでの表示例

RERUN

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

Smartphone Site

Chapter06 ギャラリーサイトを完成させよう

概要と目標サイトを完成させよう。

メインのスタイルメインエリアは、
ヘッダーに潜っている。

メインエリアをデザインしてみよう

メインビジュアル写真の中央にテキストを重ね、
ウインドウ幅に応じて文字サイズを変える。

メインビジュアルをレイアウトしよう

見出しのスタイル左に`border`を付けて、
日本語部分を小さくする。

見出しのスタイルを作成しよう

カードのスタイル写真を`100%`に広げ、
白い背景を付ける。

カードのスタイルを作成しよう

ボタンのスタイル境界線のみのシンプルな
角丸ボタン。

ボタンのスタイルを作成しよう

フッターのスタイル背景色と文字の色を変更し、
テキストの位置を揃えたら完成。

フッターのスタイルを作成する