【CSS】レスポンシブウェブデザインの作り方

こんにちは、ジョージです。

今日はレスポンシブウェブデザインの作成方法をご紹介します。

レスポンシブウェブデザイン（RWD）とは

レスポンシブウェブデザインとは、1つのHTMLファイルでパソコンやスマホなど

様々なデバイスの画面サイズに応じて適切なデザインを表示するものです。

レスポンシブウェブデザイン（Responsive Web Design）を略してRWDとも言います。

近年、このレスポンシブウェブデザインが注目されています。

その理由の1つとして

Googleが2018年3月にモバイルファーストインデックス（MFI）を発表したことにより

今までページの評価基準はパソコンサイトがメインでしたが

モバイルファーストインデックスという名前の通り

スマホサイトがページの評価基準になったということが挙げられます。

モバイルファーストインデックスを開始します［Googleウェブマスター向け公式ブログ］

世界的にスマホの普及率は高いので当然の流れですよね。

これによりスマホサイトの重要性が増すこととなりました。

今までパソコンサイトしか持っていなかった方たちが

Googleから高評価を受けたければ

スマホサイトに対応しなければならなくなったということですね。

レスポンシブウェブデザインにしたからといって

かならずしも検索結果が上位に上がるわけではありませんが。

それではレスポンシブウェブデザインの作り方をみていきましょう。

レスポンシブウェブデザインの作り方

レスポンシブウェブデザインは1つのHTMLファイルを使って

パソコンでページを見たときやスマホでページを見たときなど

ウェブサイトを閲覧した時に

デバイスのサイズによってレイアウトを変更させるものです。

具体的には

そのページを表示するブラウザの横幅が変わることで

その横幅に最適なレイアウトでページを表示するという流れです。

ページにレスポンシブウェブデザインを適用する

レスポンシブウェブデザインにするには

メディアクエリというものを使います。

メディアクエリとは

表示される画面の大きさによって

CSSのスタイルを適用することができるもので

CSSファイル1つで複数のサイズの画面で

それぞれレイアウトを変更させ

閲覧するデバイスに合わせて最適なデザインのページを作ることができます。

メディアクエリの書き方

それでは実際にメディアクエリを書いてみましょう。

link要素にメディアクエリを指定する場合

HTMLのheadタグ内に記述する方法です。

<head>
<link rel="stylesheet" href="style.css" media="screen and (max-width:600px)">
</head>

画面の横幅が600px以下のブラウザで閲覧した場合style.cssを適用するという記述です。

max-width:600pxというのは、横幅が600px以下という意味の記述です。

横幅が600pxより大きいの場合はこのスタイルは無視されます。

この場合の600pxはブレイクポイントと呼ばれます。

CSSファイルにメディアクエリを記述する場合

こちらの方法で実装されているウェブサイトの方が多いんじゃないでしょうか。

メディアクエリをCSSファイルの中に記述する場合は以下のような記述を行います。

@media only screen and (max-width: 600px){}

「画面の横幅が600px以下のブラウザで閲覧した場合は{}内のCSSを適用する」という記述になります。

{}の中にCSSを書いてみます。

@media only screen and (max-width: 600px){
    .text-red{
        color:red;
    }
}

この記述の場合、画面の横幅が600px以下のブラウザで閲覧するとtext-redクラスのついたタグの文字は赤色になります。

これを応用して

複数の要素を、パソコンで見るときは横並びにして

スマホで見るときには縦並びにするというレイアウトを書いてみます。

ブレイクポイントは600pxです。

HTML

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

CSS

.content{
    display: flex;
}

.box{
    width: 25%;
    background-color: #81D4FA;
    border: 2px solid #3F51B5;
    text-align: center;
    padding: 5%;
}

@media only screen and (max-width: 600px){

.content{
    flex-direction: column;
}

.content .box{
    width:100%;
}

}

要素のレイアウトには、display:flex;を使っています。

また、contentクラスの子要素にboxクラスがついた要素を複数配置しています。

メディアクエリを使って

ブラウザの横幅が600px以下の場合

contentクラスにflex-direction: column;をつけることで

boxクラスのついた要素が縦並びになるように設定しています。

サンプルページはこちらです。