【Chapter5】ヘッダー部分のCSSを作成

概要と目標ヘッダーを完成させよう。

ヘッダーやグローバルナビ、ハンバーガーメニュのCSSを定義し、
ヘッダー部分を完成させよう。

今回のゴール

RERUN

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

ヘッダーのスタイル`position: fixed`で固定して、
音声ソフト用テキストを非表示に。

ヘッダー全体は、position: fixedで固定し、
スクリーンリーダー用のテキストは非表示にする。

ヘッダーをデザインしてみよう

「dummy-photo-gallery」フォルダ内の「index.html」を開く
スクリーンリーダー用のテキストに、
class属性を追加する。

dummy-photo-gallery/index.html

<header class="l-header" role="banner">
  <div class="l-wrapper">
    <h1 class="l-header-title">
      <span class="screen-reader-text" 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 class="screen-reader-text">サイト内メニュー</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>

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

基本のスタイル
セレクタ	プロパティ	値
`.l-header`	ポジション	固定配置モード
	配置位置	上： `0` 左： `0` 右： `0`
	余白	上下： `0.75em` 左右： `0`
	ボーダーの幅（下）	`1px`
	ボーダーのスタイル（下）	`実線`
	ボーダーの色（下）	`#e0e0e0`
	背景の色	`#fff`

画面幅が768px以上の時のスタイル
セレクタ	プロパティ	値
`.l-header`	余白	上下： `1.5em` 左右： `0`

画面幅が1024px以上の時のスタイル
セレクタ	プロパティ	値
`.l-header`	余白	上下： `1.75em` 左右： `0`

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;
}

.l-header-title {
  float: left;
}

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

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

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

答えを見る

footer関連のスタイルの下に、以下のCSSを記述

dummy-photo-gallery/css/common.css

/*
  Module
-----------------------------------------------------*/

/* Accesibility */
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}

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

完成例

RERUN

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

グローバルナビゲーションスマホの時はドロワー、
タブレット以上は、上部メニュー。

スマホの時はドロワーメニューで表示する。

グローバルナビゲーションをレイアウトしよう

「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
上の「ヘッダーのレイアウト」を参考に、ul要素に、
class属性を追加する。

dummy-photo-gallery/index.html

<nav class="l-header-nav" role="navigation">
  <h2>サイト内メニュー</h2>
  <button type="button" aria-controls="global-nav" aria-expanded="false">メニューを開閉する</button>
  <ul id="global-nav" class="l-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>

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

基本のスタイル
セレクタ	プロパティ	値
`.l-global-nav`	ポジション	固定配置モード
	配置位置	上： `0` 右： `0` 下： `0` 左： `0`
	ボックスの幅	`100%`
	ボックスの高さ	`120%`
	余白	上下： `3em` 左右： `0`
	背景の色	`#263238`
`.l-global-nav` の中の `a`要素	表示モード	ブロック
	余白（上下左右）	`1em`
	文字の色	`#90a4ae`
	テキストの装飾	なし
	文字の太さ	`700`
`.l-global-nav` の中の `a`要素のホバー時	背景の色	`#212121`
`.l-global-nav` の中の `a`要素のホバー時	文字の色	`#fff`

画面幅が768px以上の時のスタイル
セレクタ	プロパティ	値
`.l-global-nav`	ポジション	通常配置モード
	余白（上下左右）	`0`
	背景の色	透明
`.l-global-nav` の中の `li`要素	フロート	左
`.l-global-nav` の中の `li`要素と隣接している `li`要素	ボックスの間隔（左）	`1em`
`.l-global-nav` の中の `a`要素	余白	上下: `0.2em` 左右: `0.5em`
`.l-global-nav` の中の `a`要素	文字の色	`#263238`

dummy-photo-gallery/css/common.css

/* Global Nav */
.l-global-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 3em 0;
  width: 100%;
  height: 120%;
  background-color: #263238;
}

.l-global-nav li a {
  display: block;
  padding: 1em;
  color: #90a4ae;
  text-decoration: none;
  font-weight: 700;
}

.l-global-nav li a:hover {
  background-color: #212121;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .l-global-nav {
    position: static;
    padding: 0;
    background-color: transparent;
  }

  .l-global-nav li {
    float: left;
  }

  .l-global-nav li + li {
    margin-left: 1em;
  }

  .l-global-nav li a {
    padding: .2em .5em;
    color: #263238;
  }
}

答えを見る

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

ブラウザでの表示例

RERUN

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

このままでは、スマホ時ドロワーメニューが常時表示されるので、
スマホで閲覧している時は、グローバルナビをブラウザの外に移動させておく。

dummy-photo-gallery/css/common.css

/* Global Nav */
.l-global-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 3em 0;
  width: 100%;
  height: 120%;
  background-color: #263238;
  transition: transform .3s ease-in-out; /* IE9非対応 */
  -webkit-transform: translateX(100%); /* Android, Brackberry  */
      -ms-transform: translateX(100%); /* IE9 */
          transform: translateX(100%);
}

.l-global-nav li a {
  display: block;
  padding: 1em;
  color: #90a4ae;
  text-decoration: none;
  font-weight: 700;
}

.l-global-nav li a:hover {
  background-color: #212121;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .l-global-nav {
    position: static;
    padding: 0;
    background-color: transparent;
    -webkit-transform: translateX(0); /* Android, Brackberry  */
        -ms-transform: translateX(0); /* IE9 */
            transform: translateX(0);
  }

  .l-global-nav li {
    float: left;
  }

  .l-global-nav li + li {
    margin-left: 1em;
  }

  .l-global-nav li a {
    padding: .2em .5em;
    color: #263238;
  }
}

上書き保存
ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
スマホで閲覧時にナビが非表示になるかを確認

ブラウザでの表示例

RERUN

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

ハンバーガーメニュー`span`要素で中の具を、
`before`と`after`でパンを作る。

ハンバーガーメニューは、span要素で、真ん中の横棒を作成し、
span要素のbeforeで上、 span要素のafterで下の横棒を作成する。

ハンバーガーメニューをレイアウトしよう

「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
下の「ハンバーガーメニューの要素」を参考に、button要素に、class属性を追加し、
span要素を作成する

dummy-photo-gallery/index.html

<nav class="l-header-nav" role="navigation">
  <h2 class="screen-reader-text">サイト内メニュー</h2>
  <button type="button" class="button-hamburger" aria-controls="global-nav" aria-expanded="false">
    <span class="hamburger">
      <span class="screen-reader-text">メニューを開閉する</span>
    </span>
  </button>
  <ul id="global-nav" class="l-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>

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

基本のスタイル
セレクタ	プロパティ	値
`.button-hamburger`	配置モード	絶対配置
	配置位置	上: `0` 下: `0` 右: `2.5%`
	ボックスの重なり順序	`1`
	ボックスの幅	`24px`
	ボックスの高さ	`24px`
	ボックスの間隔	上下: 自動左右: `0`
	ボーダー（上下左右）	`0`
	アウトライン	`0`
	アピアランス（ベンダープレフィックス： `-webkit-`と`-moz-`）	なし
	カーソルの形状	ポインター
	背景の色	透明
`.hamburger`	配置モード	絶対配置
	配置位置	上: `0` 右: `0` 下: `0` 左: `0`
	表示モード	ブロック
	ボックスの幅	`18px`
	ボックスの高さ	`2px`
	ボックスの間隔（上下左右）	自動
	角丸（上下左右）	`4px`
	背景の色	`#263238`
`.hamburger`の `before`と`after`	コンテンツ	空白
	配置モード	絶対配置
	表示モード	ブロック
	ボックスの幅	`100%`
	ボックスの高さ	`100%`
	角丸（上下左右）	`4px`
	背景の色	継承
`.hamburger`の `before`	表示位置	上: `-5px`
`.hamburger`の `after`	表示位置	上: `5px`

画面幅が768px以上の時のスタイル
セレクタ	プロパティ	値
`.button-hamburger`	表示モード	なし

dummy-photo-gallery/css/common.css

/* Button */
.button-hamburger {
  position: absolute;
  top: 0;
  right: 2.5%;
  bottom: 0;
  z-index: 1;
  width: 24px;
  height: 24px;
  margin: auto 0;
  border: 0;
  outline: 0;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none; /* Chrome, Safari, Opera, Android */
     -moz-appearance: none; /* Firefox */
          appearance: none; /* IE非対応 */
}

.hamburger {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 18px;
  height: 2px;
  margin: auto;
  border-radius: 4px;
  background-color: #263238;
}

.hamburger:before,
.hamburger:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: inherit;
  content: '';
}

.hamburger:before {
  top: -5px;
}

.hamburger:after {
  top: 5px;
}

@media screen and (min-width: 768px) {
  .button-hamburger {
    display: none;
  }
}

答えを見る

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

ブラウザでの表示例

RERUN

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

jQueryによるクリックイベントハンバーガーメニューをクリックしたら、
jQueryで`body`にクラスを付ける。

ハンバーガーメニューの動作は、jQueryを活用する。
ハンバーガーメニューをクリック時に、 body要素にクラス属性を付加し、
そのクラスが付いている時は、ドロワーメニューを表示する。

jQueryによるクリックイベントを設定しよう

「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
button要素に、jQuery用のclass属性「js-button-hamburger」を追加する。

dummy-photo-gallery/index.html

<button type="button" class="js-button-hamburger button-hamburger" aria-controls="global-nav" aria-expanded="false">
  <span class="hamburger">
    <span class="screen-reader-text">メニューを開閉する</span>
  </span>
</button>

「js」フォルダ内に「common.js」ファイルを作成
</body>の直前に、jQuery本体（「js」 › 「lib」フォルダ内）と、
上記で作成した「common.js」ファイルを読み込む

dummy-photo-gallery/index.html

<script src="js/lib/jquery-1.12.1.min.js"></script>
<script src="js/common.js"></script>

上書き保存
「dummy-photo-gallery」› 「js」フォルダ内の「common.js」を開く
「.js-button-hamburger」をクリックしたら、body要素に、
「 is-active-drawer」というクラス属性をトグルするjQueryのコードと、
button要素のaria-expanded属性を切り替える（true / false）jQueryのコードを記述

dummy-photo-gallery/js/common.js

$(function () {

    /*
      drawer Menu
    ------------------------------------------------*/
    $('.js-button-hamburger').click(function () {
        $('body').toggleClass('is-active-drawer');

        if($(this).attr('aria-expanded') == 'false') {
            $(this).attr('aria-expanded', true);
        } else {
            $(this).attr('aria-expanded', false);
        }
    });

});

答えを見る

上書き保存
ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
デベロッパーツールでbody要素にクラスが付加されるかと
button要素のaria-expanded属性が変更されているかを確認

ブラウザでの表示例

RERUN

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

ドロワーの表示`is-active-drawer`というクラスが、
`body`要素にあれば表示する。

body要素に、is-active-drawerクラスがある時は、
非表示にしていた、グローバルナビを表示させる。

ドロワーを表示させよう

「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
l-global-nav 関連のところに、以下のCSSを記述

dummy-photo-gallery/css/common.css

.is-active-drawer .l-global-nav {
  -webkit-transform: translateX(0); /* Android, Brackberry  */
      -ms-transform: translateX(0); /* IE9 */
          transform: translateX(0);
}

.hamburger 関連のところに、以下のCSSを記述

dummy-photo-gallery/css/common.css

.hamburger:before,
.hamburger:after {
  position: absolute;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 4px;
  background: #263238;
  content: '';
  transition: transform .2s ease-in-out; /* IE9非対応 */
}

.is-active-drawer .hamburger {
  background-color: transparent;
}

.is-active-drawer .hamburger:before,
.is-active-drawer .hamburger:after {
  top: 0;
  background-color: #90a4ae;
}

.is-active-drawer .hamburger:before {
  -webkit-transform: rotate(-45deg); /* Android, Brackberry  */
      -ms-transform: rotate(-45deg); /* IE9  */
          transform: rotate(-45deg);
}

.is-active-drawer .hamburger:after {
  -webkit-transform: rotate(45deg); /* Android, Brackberry  */
      -ms-transform: rotate(45deg); /* IE9  */
          transform: rotate(45deg);
}

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

ブラウザでの表示例

RERUN

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

Smartphone Site

Chapter05 ヘッダー部分のCSSを作成

概要と目標ヘッダーを完成させよう。

ヘッダーのスタイル`position: fixed`で固定して、
音声ソフト用テキストを非表示に。

ヘッダーをデザインしてみよう

グローバルナビゲーションスマホの時はドロワー、
タブレット以上は、上部メニュー。

グローバルナビゲーションをレイアウトしよう

ハンバーガーメニュー`span`要素で中の具を、
`before`と`after`でパンを作る。

ハンバーガーメニューをレイアウトしよう

jQueryによるクリックイベントハンバーガーメニューをクリックしたら、
jQueryで`body`にクラスを付ける。

jQueryによるクリックイベントを設定しよう

ドロワーの表示`is-active-drawer`というクラスが、
`body`要素にあれば表示する。

ドロワーを表示させよう