HTML&CSS Day4:レスポンシブデザインの基本と書き方

１.概要

参考書のChapter５にてレスポンシブデザインについて学習。
サイトのヘッダーとフッターのCSSにモバイルサイト用の記述を追加した。

2.目次

• レスポンシブデザインとは
• プレビュー用のブラウザをレスポンシブモードにする
• モバイル用のヘッダーとフッターの調整
• ハンバーガーメニュー
• 感想

3.レスポンシブデザインとは

端末によってフレキシブルに表示を切り替えられるWebサイトの作り方をレスポンシブデザインと言う。スマホの普及や多様なサイズのタブレットの登場で、さまざまな端末での閲覧を前提としたWebサイト設計やデザイン、コーディングが求められる。ユーザーが使用するシチュエーションや行動をイメージして、サイトの使いやすさを考えることが大切。

●デザインする際に意識したい３つのポイント

• 画面の大きさの違い
  スマホとPCの画面では表示される情報の「量」が異なる。

• 操作性の違い
  スマホはタップやタッチなど指先で操作するためマウスに比べて細かい操作が難しい。
  ボタンを押しやすい大きさにする、タップする要素が隣接しすぎないようにするなど、指先での操作にストレスを感じさせないデザインを心がける必要がある。
  また、スマホだと画面のスクロール量も多くなるため、ユーザーが頻繁に触れる要素は、固定表示するなどして、スクロールで戻らなくてもタップできる位置に配置すると良い。

• 体験の違い
  スマホは移動中に使用することが多いので、地図をタップ→地図アプリを起動する、といった他アプリとの連携を意識する必要がある。

●レスポンシブデザインの制作方法

• CSSで切り替え
  1つのHTMLコードを使用し、ブラウザ幅によって適用するCSSを切り替える方法が主流。
  PCでもモバイルでも同じURLで表示が可能。

• ブレイクポイント
  レイアウトが切り替わる分岐点のこと。
  任意の値を設定でき、制作するサイトのデザインやターゲットによって検討する。
  参考書で作成しているサイトは800pxをブレイクポイントに設定。

• メディアクエリ
  「ここから先の記述はブラウザの表示幅が○○px以下（または以上）の時に適用」という目印のこと。

@media (max-width: 800px) {}

4.プレビュー用のブラウザをレスポンシブモードにする

Chromeのデベロッパーツール（プレビュー表示から右クリック→検証を選択）を使用。
スマホとスクリーンが描かれたアイコンをクリック。

モバイル表示に切り替わる。サイズは「iPhone SE」を使用。

→参考書では、ここでメディアクエリで指定(max-width: 800px)すれば、画面表示が切り替わると記載があるが、実際は切り替わらず。。。理由は不明。
そのため、レスポンシブモードではなく、通常のサイトを表示し、画面サイズを変更することで、レスポンシブデザインを確認していった。

5.モバイル用のヘッダーとフッターの調整

• ナビゲーションメニュー
  PC版のレイアウトのままだと横にはみ出すため、縦並びに変更する。
  ほか、中央揃え、余白設定もする。

• ヘッダー領域を上部に固定
  モバイルではヘッダーを上部に固定し、常時表示されるようにする。

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

ほか、背景色の指定、ヘッダー領域の高さ指定、手前表示、影をつける、内部のサイズ調整、ロゴサイズの調整をする。

positionプロパティは要素を自由に配置できる。
・static ・relative ・absolute
・fixed ・sticky

• フッターの調整
  ヘッダーを上部固定することにより、フッターの上部と重なって見えなくなっている部分ができてしまう。
  それを解消するため、main要素にヘッダーと重なっている高さ分の余白を確保する。

.main {
    padding-top: 50px;
  }

ほか、色々とレイアウトを整える。

6.ハンバーガーメニュー

モバイル用のナビゲーションメニュー。横棒が３つ並んだアイコンが使われ、ハンバーガーに見えることから「ハンバーガーメニュー」と呼ばれている。

• 4章で非表示にしたボタンtoggle-menu-buttonを表示する
  一緒に、ボタンのサイズ及びアイコン画像を指定する。

.toggle-menu-button {
    display: block;
    width: 44px;
    height: 33px;
    background-image: url(../images/common/icon-menu.png);
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;
  }

• メニューの表示／非表示を設定する
  HTML作成の際に「toggle-menu.js」というJavaScriptファイルへリンクを追加している。
  このjsファイルは「ボタンをクリックしたときにheader-site-menuのclass属性に『is-show』と言う値を追加する」と言う処理が書かれている。
  つまり、「クリックしたときにメニューにクラス名が追加される」と言う挙動を利用し、メニューを「最初は非表示にしておき」「is-showと言うクラス名が付いたら表示する」と言う指定をする。

.header-site-menu {
/*   ・・・（略・・・ */
    display: none;
  }

  .header-site-menu.is-show {
    display: block;
  }

7.感想

レスポンシブモードの切り替えがうまくいかなかったのは残念。
モバイルはモバイルでさまざまな調整が必要なので、作成する際はその分の日数が必要だと理解した。