パソコンでしかWebサイトを見ることができなかった昔と異なり、今ではスマートフォンやタブレットなど様々な端末から見ることができます。
そのため、パソコンのような大きい画面だけではなく、スマートフォンのような比較的小さい画面でもWebサイトがキレイに見えるようにデザインする必要がでてきました。
今回学習する レスポンシブデザイン は、それぞれの端末の画面サイズに合うデザインを CSS で対応する方法となります。
今回の学習内容
レスポンシブデザインとは
簡単に言うと、画面のサイズや端末によって適用させたい CSS を設定するための手法です。
「インターネットはパソコンでするもの」といった時代が過去にはありました。しかし、現在のインターネットのトラフィックのほとんどはスマートフォンによるアクセスです。
「Webページを HTML と CSS で作ったけど、スマートフォンで見るとデザインが崩れてしまう。。」
そのために、パソコン用とスマートフォン用で返却する HTML や CSSファイルをそれぞれ作成する といった対策をとることがあります。
しかし、これだと 開発コストやメンテナンスの煩雑さが増すため、一つのファイルで 対応できないか と考えられたのがこのレスポンシブデザインです。
聖杯レイアウトで学ぶレスポンシブデザイン
Holy Grail Layout（聖杯レイアウト）
聖杯レイアウト というのは、下記のようなデザインのことをいいます。
ヘッダーとフッターがあり、間に３つのカラムが存在します。
このレイアウトをモバイルなどの小さい画面で見た場合は次のように表示されます。（もともと小さい画面で見ている場合は変化はありません）
モバイルで表示する場合は、ナビゲーション と 広告エリア は メインコンテンツエリア の 横 ではなく 下 に表示させたくなるかもしれません。
レスポンシブデザイン では、単一のファイルに追加でCSSを記述 し、画面サイズ によってデザインを変えることで、利用者にとって使いやすいデザインを実現します。
メディアクエリを使用
Media Query（メディアクエリ）
メディアクエリを使用すれば、端末の画面サイズ や メディアの種類（プリンタや画面）などに応じて CSS を指定することが可能になります。
ここでは メディアクエリでも特に使う 画面サイズ ごとにCSSを指定する方法を学習します。
メディアクエリの書き方
メディアクエリは CSSと同様で 内部または外部のスタイルシート に記述することができます。
メディアクエリの構文
@media 条件 {
CSSを記述
}
メディアクエリの例
@media screen and (min-width: 560px) {
.content-body {
...
}
}
この例では、メディアの種類が screen（画面）かつ 横幅が 560px 以上 （つまり端末画面の横幅が560px以上）の場合 に 適用する CSS を 波括弧（{}）内に記述していきます。
この メディアクエリ を使って、スマートフォン、タブレット、パソコン など画面サイズの異なる端末からのアクセスに応じて適用する CSS を設定します。
他にも、画面を印刷する際に適用する print や、スマートフォンやタブレットの横向き (orientation: landscape) などを条件に指定することができます。
より詳しい情報は メディアクエリの使用 – CSS: カスケーディングスタイルシート | MDN をご覧ください。
@importを使用する
CSSで @import を使用して 条件付きでスタイルシートを適用することができます。
@import url('tablet-style.css') screen and (min-width: 560px);
linkタグを使用する
HTML の <link> で media 属性を使用することで、特定のメディアを対象に CSS を適用することができます。
<link rel="stylesheet" href="./tablet-style.css" media="screen and (min-width: 560px)">
<link>や@importを使用した場合で条件が一致しない場合でもファイルは読み込まれます。適用することの制御であってファイル自体の読み込みは制御しません。
ビューポートの指定
メディアクエリ を使用したり、そもそも Webページをスマートフォンなどの端末サイズに 最適化 するために ビューポートを指定する必要があります。
ビューポートは <head>内に記述する meta viewport のことです。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width
画面の幅に合わせてコンテンツのサイズを最適化します。initial-scale=1
画面に表示する際の倍率を指定します。デフォルトでは 1 です。
簡単に言うと、端末ごとに上手い具合にサイズを調整して見やすくしてくれるもの でほぼ確実に必要なものになります。
<head>タグ内にあるかどうかを確認して、なければ コピペ してください。
他に、スマートフォンなどでズームさせたくない場合は、user-scalable=no と追記することで利用者のズームを無効にし、アプリかのように見せることができます。
-
viewportは 定型文 のようなものだと考えておいてください。
聖杯レイアウトをコーディング
聖杯レイアウトをコーディングしてみましょう。
コピペでもいいので 必ずご自身のブラウザで試して みてください。
<body class="flex flex-vertical">
<header>ヘッダー</header>
<div class="content-body flex flex-vertical flex-1">
<main class="flex-1">メインコンテンツエリア</main>
<nav class="order-1">ナビゲーション</nav>
<aside>広告エリア</aside>
</div>
<footer>フッター</footer>
</body>
body {
min-height: 100vh; /* 高さの最小を画面いっぱいに設定 */
margin: 0; /* ブラウザのデフォルトのスタイルを解除 */
}
header, footer {
background-color: #f48fb1; /* 分かりやすいように背景色を設定 */
}
nav {
background-color: #a7ffeb; /* 分かりやすいように背景色を設定 */
}
aside {
background-color: #69f0ae; /* 分かりやすいように背景色を設定 */
}
main {
background-color: #ffeb3b; /* 分かりやすいように背景色を設定 */
}
header {
flex-basis: 50px; /* flex-basis（初期値）を指定 */
}
nav, aside {
flex-basis: 100px; /* flex-basis（初期値）を指定 */
}
footer {
flex-basis: 100px; /* flex-basis（初期値）を指定 */
}
/* Flex Layout */
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-vertical {
-ms-flex-direction: column; /* IE */
flex-direction: column;
}
.flex-1 {
-ms-flex: 1 1 0.000000001px; /* IE */
flex: 1;
flex-basis: 0.000000001px; /* IE */
}
/* アイテムの表示順序 */
.order-1 {
-ms-flex-order: 1;
order: 1;
}
/* 画面サイズの横幅が960px以上である場合 */
@media screen and (min-width: 960px) {
.content-body {
/* Flexで横並び */
-ms-flex-direction: row; /* IE */
flex-direction: row;
}
.content-body nav,
.content-body aside {
flex-basis: 200px; /* flex-basis（初期値）を指定 */
}
.content-body nav {
/* アイテムの表示順序 */
-ms-flex-order: -1;
order: -1;
}
}
ブラウザで表示してみたら、画面サイズを変更してレイアウトが変わることを確認してください。
また、CSSのコメントを読んで分からないところは調べてみてください。
例えば、高齢者や目の不自由な人の中には スクリーンリーダー（画面読上げソフト） を使用して情報を取得している方もいます。
このスクリーンリーダーはCSSの結果を考慮せずHTMLの文章構造をもとに読み上げます。
HTML: アクセシビリティの基礎 - ウェブ開発を学ぶ | MDN
この聖杯レイアウトでは、メインコンテンツエリア<main>よりナビゲーション<nav>を後ろに定義していますが、Flexboxの order を使用して表示順序を変更しています。
- アクセシビリティについても意識できるようになりましょう。
