レスポンシブデザインを学ぼう
メディアクエリ
（Media Queries）とは
ここからはメディアクエリについて学んでいきます。
メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法です。
メディアクエリの書き方
@media
メディアクエリの書き方を見てみましょう。
メディアクエリは、@media (条件) { …. }という様に書きます。
指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。
max-widthとmin-width
メディアクエリの条件には、max-width(最大幅)、またはmin-width(最小幅)を指定できます。
max-width: ◯◯pxと指定すると、画面幅が◯◯px以下の時にCSSを適用できます。min-widthはその反対となります。
ブレイクポイント
max-width: ◯◯px（またはmin-width: ◯◯px）のようにメディアクエリの条件を指定するとき、「◯◯px」の部分をブレイクポイントと呼びます。
今回はスマートフォンの画面幅は670px以下、タブレットの画面幅は670px ~ 1000pxと想定して、ブレイクポイントを設定しましょう。
/* ブレイクポイントをmax-width: 1000pxに指定してください */
@media (max-width: 1000px) {
/* h1のcolorをblueに指定してください */
h1 {
color: blue;
}
}
メディアクエリによる
レイアウトの例
レスポンシブデザインを適用しないと、画面幅が小さいときにコンテンツの内容も小さくなり、見づらくなってしまいます。
ここでは画面幅によって、コンテンツのwidthを大きくするようにしてみましょう。
/* タブレット向けレイアウト */
/* ブレイクポイントをmax-width: 1000pxに指定してください */
@media (max-width: 1000px) {
.item {
width: 50%;
}
}
/* スマートフォン向けレイアウト */
/* ブレイクポイントをmax-width: 670pxに指定してください */
@media (max-width: 670px) {
.item {
width: 100%;
}
}
レイアウト崩れを直す
box-sizingborder-box
先ほどの演習で作成したitemクラスに、paddingを加えたものが左下の画像です。itemクラスのwidthが25%で指定されているため、左右のpaddingを追加すると要素の幅の合計が100%を超えてしまい、レイアウトが崩れてしまっています。このようなレイアウト崩れは、box-sizing: border-box;を用いることで防ぐことができます。
box-sizing: border-box;の仕組み
box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになります。そのため、paddingやborderを追加した時に生じるレイアウト崩れを未然に防ぐことができます（※ただし、marginはborder-boxでの合計値に含まれません）。
全要素にCSSを適用する
*
box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されています。
*はすべての要素に対してCSSを適用したい場合に用います。
border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなります。
/* すべての要素に対して box-sizing: border-box; を指定してください */
* {
box-sizing: border-box;
}
.item {
width: 25%;
float: left;
/* 左右にpaddingを15pxずつ追加してください */
padding-left: 15px;
padding-right: 15px;
}
viewportの設定
レスポンシブデザインを適用する準備として、<head>タグ内にviewportを設定しましょう。
viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しません。
ただし、ここでviewportの中身の書き方を暗記する必要はありません。
width: 100%
HTML中級編では、全体のwidthを1170pxで固定していました。
これでは、スマートフォンなどの小さい画面でも、widthが1170pxのままになってしまいます。
画面幅によって全体のwidthが変わるように、width: 100%;に変更しましょう。
index.html
<!– viewportを読み込むための<meta>タグを記述してください –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
stylesheet.css
.container {
/* widthを100%にしてください */
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
タブレット向けのレイアウトを作ってみよう
responsive.cssの読み込み
stylesheet.cssにメディアクエリ用のCSSを記述しても問題ありませんが、整理しやすいように今回はCSSファイルを分割し、responsive.cssにメディアクエリ用のCSSを記述していきます。
このresponsive.cssを読み込む際には、必ずviewportよりも下の行に記述するようにしましょう。
lesson要素の配置を変更
タブレット向けのレイアウトを作成していきましょう。
今のままだと、タブレットの画面幅にした時にレッスン紹介の部分が見づらくなっています。
lessonクラスのwidthを50%に指定して、タブレットの画面幅では２段で表示するようにしましょう。
<!– responsive.cssを読み込むための<link>タグを記述してください –>
<link rel=”stylesheet” href=”responsive.css”>
responsive.css
/* ブレイクポイントが1000px以下のときのメディアクエリを設定してください */
@media (max-width: 1000px) {
/* lessonクラスのCSSを指定してください */
.lesson {
width: 50%;
margin-bottom: 50px;
}
}
レイアウトが崩れている原因
先ほどの演習で、背景色が途中で切れてしまうという問題が生じました。
これはlesson-wrapper要素の高さが580pxに固定されているためです。
高さがコンテンツの中身によって変わるように、この指定を消しましょう。
floatと親要素の高さ
float
通常、親要素の高さは子要素を包む高さとなります。
しかし、子要素が全てfloatの時、親要素の高さは0となってしまうという性質があります。
これは、floatは「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えるからです。
floatの解除
clear
子要素が全てfloatでも、親要素が高さを持つように設定してみましょう。
floatはclear: left;で「浮いている」状態を解除できます。
ここではclear: left;を適用するためだけの空のタグを用意しましょう。
空タグとclearでfloatを解除するのはよく使うテクニックなので、覚えておくようにしましょう。
stylesheet.css
/* clearクラスにfloatを解除するためのCSSを記述してください */
.clear {
clear: left;
}
スマートフォン向けのメディアクエリ
ここからスマートフォン向けのレイアウトを組んでいきます。
ブレイクポイントを670pxに設定します。
lesson要素のwidthを100%にして縦並びになるように変更しましょう。
footerの位置調整
text-align
また、スマートフォンサイズではfooterが中央寄せになるように配置しましょう。
responsive.css
/* スマホ向けレイアウト */
/* ブレイクポイントが670px以下の時のメディアクエリを設定してください */
@media (max-width: 670px) {
/* .lessonのwidthを100%に指定してください */
.lesson {
width: 100%;
}
/* <footer>の中身を中央寄せにしてください。 */
footer {
text-align: center;
}
}
SNSボタンの調整
続けて、スマートフォン環境でもボタンをタップしやすいように、ボタンの幅を画面いっぱいに広げましょう。
ボタン間のmarginも調整します。
/* .btnのwidthを100%に指定してください */
.btn {
width: 100%;
}
/* .facebookにmargin-bottom: 10px;を追加してください */
.facebook {
margin-bottom: 10px;
}
/* .top-wrapperの中身を左寄せに、padding-topを130pxに指定してください */
.top-wrapper {
text-align: left;
padding-top: 130px;
}
フォントのレスポンシブ化
画面幅が小さいときは、フォントサイズを小さくしたほうが読みやすくなります。
画面幅によって、フォントサイズを調整していきましょう。
/* タブレット向けレイアウト */
@media (max-width: 1000px) {
.lesson {
width: 50%;
margin-bottom: 50px;
}
/* 「.top-wrapper h1」のfont-sizeを32pxに指定 */
.top-wrapper h1 {
font-size: 32px;
}
/* 「.heading h2」のfont-sizeを20pxに指定 */
.heading h2 {
font-size: 20px;
}
}
/* スマホ向けレイアウト */
@media (max-width: 670px) {
.lesson {
width: 100%;
}
footer {
text-align: center;
}
.btn {
width: 100%;
}
.facebook {
margin-bottom: 10px;
}
.top-wrapper {
text-align: left;
}
/* 「.top-wrapper h1」のfont-sizeを24pxに指定 */
.top-wrapper h1 {
font-size: 24px;
}
/* 「.top-wrapper p」のfont-sizeを14pxに指定 */
.top-wrapper p {
font-size: 14px;
}
}
画面サイズが大きい時に対応しよう
ここまで、タブレットやスマートフォンなどの小さい画面でも綺麗なレイアウトで表示できるようにしてきました。
しかし、とても大きい画面ではどうでしょうか？
例えば2000pxの画面幅で表示すると、レッスン部分がお互いに離れすぎていて、見づらくなっています。これを直しましょう。
max-widthを指定する
container要素のwidthが100%なので、画面幅が2000pxなどとても大きい時も画面いっぱいに広がってしまいます。
max-width: ◯◯px;と指定すると、画面幅を拡大しても、要素の幅の上限が◯◯pxとなります。
stylesheet.css
.container {
/* max-widthを1170pxに指定してください */
max-width: 1170px;
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
スマートフォンのヘッダーレイアウト
最後に、スマートフォンでのヘッダーのレイアウトを整えていきましょう。
スマートフォンでは、ヘッダーメニューを表示しきれないため、メニューをアイコンに変更します。
（本来はjQueryなどを用いてアイコンをクリックした時の動作をつけるべきですが、このレッスンでは扱いません）。
要素の表示/非表示
displaynoneblock
メニューアイコンはデフォルトでは非表示にし、画面幅が670px以下（スマートフォンサイズ）の時にのみ表示されるようにします。
要素を非表示にするにはdisplay: none;を用います。
非表示にした要素を表示させる時は、display: block;を用いて表示します。
index.html
<!– ここにメニューアイコンを追加してください –>
<span class=”fa fa-bars menu-icon”></span>
stylesheet.css
/* menu-iconのCSSを貼り付けてください */
.menu-icon {
color: white;
float: right;
font-size: 25px;
padding: 21px 0;
/* displayをnoneに指定してください */
display: none;
}
responsive.css
/* スマホ向けレイアウト */
@media all and (max-width: 670px) {
.lesson {
width: 100%;
}
.btn {
width: 100%;
}
.facebook {
margin-bottom: 10px;
}
.top-wrapper {
text-align: left;
}
/* header-rightクラスのdisplayをnoneに指定してください */
.header-right {
display: none;
}
/* menu-iconクラスのdisplayをblockに指定してください */
.menu-icon {
display: block;
}
.top-wrapper h1 {
font-size: 24px;
}
.top-wrapper p {
font-size: 14px;
}
}