シリーズ第23回は、前回の聖杯レイアウトを使ってレスポンシブデザインにする方法を解説します。スマホ時代には必須のレスポンシブとは何か、レスポンシブデザインを実現するため、CSSでスタイルを指定するにはどうすればよいでしょうか。分かりやすく解説していきます。
レスポンシブデザインとは？
簡単に言えば、どんな画面サイズでも自動的に見やすいレイアウトに調整できるということです。
インターネットを利用する端末はPCだけでなく、タブレットやスマホなどがあり、画面サイズも様々です。最近の調査では、インターネット利用端末の第1位がスマホになりました。“スマホで検索”が当たり前の時代ですから、スマホの小さな画面でも見やすいレイアウトにすることは大切です。今やレスポンシブ・ウェブ・デザイン（responsive web design）は、ウェブ制作で必須のスキルとなっています。
聖杯レイアウトを固定幅で表示する
レスポンシブデザインを分かりやすく説明するために、前回作った聖杯レイアウトを固定幅表示にしてみます。前回までの聖杯レイアウトのHTMLとCSSは第22回を参照ください。
シリーズ第22回は、これまで学習してきたフレックスボックスを使って「聖杯レイアウト」を作成してみたいと思います。多くのサイトで採用されているレイアウトを実際に記述しながら、書いてみましょう。 聖杯レイアウトとは？ ま[…]
現状では画面幅いっぱいに表示するようになっていますが、横幅800pxにしてみましょう。bodyに対して、以下のようにスタイルをあてます。
width: 800px;
margin: 0 auto;
幅をwidth: 800px; とするだけでなく、marginで左右の値をautoにしています。widthだけだと、全体はデフォルトのスタイルで左側に寄ります。marginで左右をautoにすると、余白が左右均等に配置されます。そのためコンテンツは中央になるというわけです。このスタイルもよく使われるので覚えておきたいですね。
表示するとこうなります。
画面幅が800px以上であれば特に問題にはなりませんが、800px以下になった場合どうなるでしょうか。開発者ツールで画面幅を狭めながら見てみると分かりやすいと思います。
上の画像（画面幅は650pxの状態）のように、rightの部分が見切れてしまい、横スクロールをしない限り見られなくなってしまいます。スマホユーザーはこれを嫌います。そもそも聖杯レイアウトは、画面の横幅が広いPCなどに向いています。逆にスマホのように縦長の画面に向かないレイアウトですね。ここで力を発揮するのがレスポンシブデザインです。どうしたらスマホの画面でも見やすいレイアウトに自動で調整できるのでしょうか。
レスポンシブを実現するメディアクエリ（@media）
CSSでメディアクエリを使ってレスポンシブデザインにレイアウトできます。メディアクエリを指定して、それに一致する場合だけ特定のスタイルを適用できるようになります。言葉の説明だけでは難しいので、実際にCSSファイルに書いてみましょう。
横幅をレスポンシブにしてみる
このように記述すると、画面幅1000px以下になった場合のみ、その後に指定したスタイルを適用するという意味になります。
例えば、現在はbodyにwidth: 800px; で固定幅になっています。しかし、次のように記述してみます。
このように記述すると、画面幅1000px以下になった場合width(横幅)は画面幅の100%にするという意味です。先にbodyセレクタで指定したwidthが上書きされます。実際に画像で見てみましょう。
◆1001pxの時
◆1000pxの時
1001pxまでは、最初にbodyに指定した800pxになっていますが、1000px以下になると横幅いっぱい（width: 100%;）に切り替わっているのを確認できます。
どんどん画面幅を狭めていくと、今度はwidthを設定していないcenter(main)の幅がleftやrightの幅より狭くなり、一番伝えたい情報が見にくくなってしまいます。
スマホのような縦長の画面の場合は、レイアウトを横並びではなく縦並びにすると見やすくなります。これもメディアクエリを活用してCSSで実現できます。もちろん、画面幅に合わせたレスポンシブです。
縦並びのレイアウトにしてみる
もともとdivに対してdisplay: flex; をあててleftとcenterとrightを横並びにしました。これを画面幅1000px以下になった場合は縦並びに変えてみましょう。
軸を変えるプロパティはflex-directionでしたね。divに対してflex-direction、値をcolumnで指定します。
なお、縦並びにした場合でもleftとrightが横幅いっぱいに広がるように、width: 100%; を指定するセレクタにnav(left)とaside(right)を加えています。
1000px以下になると、div内の要素であるleftとcenterとrightが縦並びになっていることを確認できますね。
2枚目の画像は500pxの時です。
最後に、今回解説したスタイルを反映したCSSファイルを貼っておきます。
body {
width: 800px;
margin: 0 auto;
min-height: 100vh;
display: flex;
flex-direction: column
}
header {
outline: 1px solid gray;
background-color: lightcyan;
height: 100px;
}
div{
display: flex;
flex: 1;
}
main {
outline: 1px solid gray;
flex: 1;
}
nav {
outline: 1px solid gray;
width: 150px;
}
aside {
outline: 1px solid gray;
width: 200px;
}
footer {
outline: 1px solid gray;
background-color: lightcyan;
height: 100px;
}
@media screen and (max-width: 1000px){
body,nav,aside{
width: 100%;
}
div{
flex-direction: column;
}
まとめ
初心者もできる！プログラミング基礎講座【第23回】はいかがでしたか。今回はレスポンシブデザインにする方法をご紹介しました。聖杯レイアウトで画面幅に応じた見やすいレイアウトに自動調整するために、メディアクエリを使います。これから作るサイトはどれもレスポンシブデザインが基本といっても過言ではないと思います。しっかり覚えておきたいですね！
では、次回もお楽しみに！