CSSで華やかなサイトにしたい⑤～レスポンシブに対応させよう～

レスポンシブとは

今回はCSSのレスポンシブについての記事です
レスポンシブデザイン、レスポンシブwebデザインとも言います。
簡単に言うとレスポンシブ化というのは、サイトをいろんな画面サイズに対応させる事です。
例えば、スマートフォンとかでWebサイトを見ることがありますよね
スマートフォン用の小さい画面でも見られるようにCSSを調整することをレスポンシブに対応させるといいます

今回の記事

• レスポンシブWebデザインとは
• レスポンシブに対応させる手順
  • 「viewport」の設定
  • メディアクエリーの基本
• ブレークポイントについて考える
• Webページをレスポンシブに対応にする～実践編～
  • 文字サイズと余白の調整
  • コンテンツを縦並びにしよう
• デベロッパーツールを利用して見た目を調整しよう

レスポンシブWebデザインとは

レスポンシブWebデザインとは、表示領域の幅によって見え方が変わるようにデザインされたWebサイトのことです。
先程例に出したスマートフォンの画面とパソコンの画面の横幅は違います。レスポンシブWebデザインを使えば、Webサイトに掲載するコンテンツは変えずに、デバイスのサイズに合わせて、CSSだけで見た目を変更することができます。
Webサイトを違うデバイスで見てみるとわかりやすいでしょう。

レスポンシブに対応させる手順

早速、レスポンシブに対応の手順を見ていきましょう。

「viewport」の設定

viewportとは、様々なデバイスにおける表示領域のことです。特に何も指定しないと、スマートフォンで表示したときに、デスクトップサイトの横幅に合わせてすべてそのままの大きさに表示するので、文字が小さくなり、読みにくくなってしまいます。
そこでHTMLの「head」内に下記のタグを記述して表示領域の横幅を合わせます。

HTML「head」内

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

しかし、これだけではレイアウトが崩れてしまうのでさらに調整していきます。

メディアクエリーの基本

そこで、メディアクエリーを利用していきます。メディアクエリーは、Webページが表示された画面サイズに合わせて適応する、CSSを切り替える機能です。
例えば、「画面のサイズが600pxより、小さければ文字の大きさを小さくする」といったように、ユーザーの見ている環境に合わせてスタイルを変更できます。

メディアクエリーCSSの記述方法についてです。
「@media」と書いて「メディアクエリーを書く」といいます。
丸かっこの中に画面サイズの範囲を指定します。上記のように「max-width:600px」と書くと「最大の幅がが600pxの時」という意味になります。

メディアクエリーCSS

@media screen and (max-width:600px){
  /*画面幅が600pxまでの時*/
}

この中に、以下のようにコーディングしていく事で、指定した画面幅内でのみその内容が適用されます。この場合、0~600pxの範囲の画面サイズの時＜p＞タグの文字色が水色になります。

メディアクエリーCSS

@media screen and (max-width:600px){
  p {
    color: blue;
  }
}

ブレークポイントについて考える

メディアクエリーを使えば、デバイスの画面サイズによってスタイルを変更できることを学びました。その切り替わるポイントとなる画面サイズを**「ブレークポイント」**といいます。
これまでの例では、「@media (max-width:600px)」と指定していたので、ブレークポイントは600pxです。モバイルデバイスは縦に持って使うことが多いので、縦にした時の画面幅＝デバイスの短い方の幅を基準にブレークポイントを考えると良いでしょう。
多くの場合、小さい画面サイズは450pxあたり、大きい画面サイズは760pxあたりを起点に設定されています。ですので、その中間の600px前後にブレークポイントを設定しておくのが無難でしょう。

主なiOSデバイスの画面幅

デバイス	横にした画面幅	縦にした画面幅
iPad Pro(10.5")	1112	834
iPad(9.7")/iPad mini	1024	768
iPhone Xs Max	896	414
iPhone X/iPhone Xs	812	375
iPhone 6~8 Plus	736	414
iphone 6~8	667	375

Webページをレスポンシブに対応にする～実践編～

実際私が制作したWebページをレスポンシブに対応にして見え方のイメージを付けていきましょう。カフェのホームページをイメージして作ってみました。こちらをレスポンシブに対応していきます。

すべてのコードはにgithubに載せてますので、そちらを参考にしてください。

文字サイズと余白の調整

ここでは600px以下の画像で、キャッチコピーやナビゲーションメニューの文字サイズ、ホームページのコンテンツ部分の余白などを小さくして小さい画面でも見やすく調整しています。

モバイル版コード例

コンテンツを縦並びにしよう

ロゴとナビゲーションメニューを横並びになっていますが、スマートフォン版で縦に並べてみるのもいいでしょう。
Flexのプロパティである「flex-direction」を使えば、どの方向に並べるかを指定できます。
このプロパティの値を「column」にすることで要素を縦並びにできます。
「align-items: center;」で画面中央に指定できます。

コード一部の例です

一部抜粋

.page-header{
    display: flex;
    justify-content: space-between;
}

モバイル版

@media screen and (max-width:600px){
    .page-header{
        flex-direction: column;
        align-items: center;
    }
}

ヘッダーの部分が縦に並びました。
いろんなデバイスで以下のページを見比べて見てみてください
カフェホームページのサンプル

CSSのすべてのコードはこちら
github

デベロッパーツールを利用して見た目を調整しよう

CSSの確認用などで使用されるChromeデベロッパーツールの使い方を紹介します。
Chromeデベロッパーツールとは、Chromeブラウザに付属している検証ツールです。
レスポンシブに対応した際のサイズの確認ができる便利機能です

Chromeで確認したいページで右クリック→検証

検証用のページの携帯のマーク？をクリック

様々なデバイスの大きさで画面を見ることができます

この便利なのでぜひ使ってみてください

参考文献

Mana著、「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」、SBクリエイティブ株式会社、2019年