現代において、Webサイトを閲覧する媒体は圧倒的にスマートフォンが多くなってきています。スマホでPCのサイトが表示されてしまうと、その見にくさからユーザーの大半は離脱してしまいます。
スマホや、PCなど異なる画面サイズにWebサイトを対応させることを「レスポンシブ化」といいます。
画面幅で変化するレスポンシブデザインの作り方を今回は学んでいきましょう。
- 画面幅ごとにデザインを変更する方法
レスポンシブWebデザインとは
レスポンシブWebデザインとは、デバイスの画面サイズに依存しないWebサイトを構築する手法です。
パソコン、スマホ、タブレットなど、皆さん様々な形でWebサイトを閲覧すると思います。
どのデバイスから閲覧しても見やすいものを作るための手段がレスポンシブデザインです。
レスポンシブデザインを組み込む事で、スマホ用サイト・PC用サイトの様に、デバイスごとに別のサイトを準備する必要がなくなります。
HTMLの変更はせずに、それぞれのデバイスの画面幅ごとに、CSSで表示させるデザインを変更します。
レスポンシブWebデザインをする理由
レスポンシブWebデザインをする理由を改めて整理してみましょう。
スマホユーザーが増えている
スマホ対応していないとSEOにマイナス
ユーザーが見にくい
これらの理由が挙げられます。
また、HTMLが1つ(ワンソース)なため、内容の変更等があれば1つのHTMLを変更するだけで、PC用・スマホ用のページを一斉に更新・管理する事ができます。
つまり、さまざまな大きさのデバイスでサイトをきれいに表示するために、レスポンシブ対応は必須であると言えます。
レスポンシブに必要なもの
レスポンシブ用のmetaタグ
<meta name="viewport" content="width=device-width, initial-scale=1" >
レスポンシブWebデザインを導入するためには、まずheadタグ内にviewportが設定が設定されている必要があります。
viewportは、それぞれの画面幅に合わせて表示する大きさを調整するためのコードです。ただ、このコードは暗記する必要がなく、基本的にはheadタグ内に初めから書かれています。
メディアクエリとブレイクポイント
メディアクエリ
次に「メディアクエリ」を使用して、適用するCSSを変更します。
書き方が2種類あるので紹介します。
1つのCSSファイル内で指定する場合
@media screen and (max-width: 1024px){
p {
display: none;
}
}
と記述する事で、「画面幅が0〜1024pxの場合、p要素を表示しない」ようになります。
デバイスごとにCSSを準備する場合
<link rel="stylesheet" href="css/~~.css" media="(max-width: 1024px)">
デバイスごとに別のCSSを準備し、HTMLのheadタグにて読み込みます。
これで「画面幅が0〜1024pxの場合、CSSファイル内の ”~~.css” を読み込む」ようになります。
ブレイクポイント
次に、レスポンシブデザインをする際のブレイクポイントについて説明します。
レスポンシブデザインにおいて「表示を切り替える画面幅のサイズは何pxか」がブレイクポイントです。かつては複数のスマホや、縦・横の画面と、細かに分類して見栄えの変更を行っていました。しかし年々、スマホやタブレット端末も画面のサイズが多種多様となっており、全ての画面幅に対応させるのはモグラ叩きのようで生産性に欠けます。
見解は様々ありますが、主なブレイクポイント2つについて紹介します。以下の二つは、PCのデザインから作成している場合です。
@media screen and (max-width: 768px)
タブレットの縦の画面幅、そしてスマホの横の画面幅に対応しやすいブレイクポイントと考えられています。
@media screen and (max-width: 500px)
モバイルファースト(またはモバイルオンリー)のサイト作りが進んでいる事もあり、スマホの縦の画面で閲覧することを想定して、画面幅を設定する必要があります。スマホの縦の画面幅に対応する際は、500pxでの設定をする事が多いようです。
例：
.example {
display:block
}
/* exampleというクラス名の要素を、画面幅が500px以下のとき「display: none;」を適用する */
@media screen and (max-width: 500px) {
.example {
display: none;
}
}
反対に、モバイルサイズからコーディングしている場合は、以下の2つのブレイクポイントが中心になります。
@media screen and (min-width: 1080px)
これは画面幅が1080px以上の時、なのでスマホからPCに広がった時に設定するブレイクポイントの目安になります。
@media screen and (min-width: 768px)
この場合は、スマホとPCの間のタブレットサイズのときになります。
どちらも、「min-width」になっている点に注意しましょう。
例：
.example {
display:block
}
/* exampleという名前の要素を、画面幅が1080px以上のとき「display:none;」を適用する */
@media screen and (min-width: 1080px) {
.example {
display: none;
}
}
では、実際にメディアクエリを用いたページのレスポンシブ化の使用例を見てみましょう。
書いてみよう
それでは、実際にレスポンシブ対応をやってみましょう。
デザインの確認
まずはデザインの確認をしてみましょう。
スマホのデザイン
スマホのデザインでは2つのボックスが縦並びになっています。
PCのデザイン
PCの画面で見たときは、四角いボックスが2つ横並びにしています。
スマホサイズでの見え方を作る
<div class="wrapper">
<div class="box1">1</div>
<div class="box2">2</div>
</div>.wrapper {
max-width: 800px;
margin: 50px auto;
display: flex;
flex-direction: column;
align-items: center;
}
.box1,
.box2 {
width: 200px;
height: 200px;
background-color: #f00;
color: #fff;
font-size: 50px;
}
.box2 {
margin-top: 30px;
}
ブラウザでの表示
このように表示されました。
検証ツールを使って確認してみよう
検証ツールでの見方
まずはいつも通り、表示したいページをブラウザで開きます。（Google Chromeを使用しています）
検証ツールを使って画面幅を変えてみよう
検証ツールは、ページのHTMLやCSSの確認以外にも確認したいモバイル端末、タブレット端末、PCの幅に変更することができます。
開発時もおおよそのレイアウトなどの見た目は検証ツールを用います。ただし、実機（実際のiPhoneなどの端末）で見たときのように正確ではないので、実際にWebサイトを制作し最終的な確認は実機を使って確認する必要があります。
検証ツールが開けたら、ここでサイズを「Responsive」（もしくはカタカナで「レスポンシブ」）という表記にします。
すると画面幅の数値を手動で変更できるようになるので、ここにPCであれば1200 などと入力すると、画面幅1200pxの見え方を確認することができます。逆に小さい時の見え方を見たい時も、ここのpx数を変更で確認できます。
（それぞれ画像の赤い部分）
他の端末での見え方を見たい場合は、「iPad Air」や「iPhone6/7/8」など具体的に選択してもOKです。
今回は、スマホサイズの見た目からPCの画面幅にしたいので一度横幅の数値を1080に手動で変更します。
そうするとご覧の通り、スマホを基準に書いたコードでは、PC幅で表示した際に大きく左右の余白が生まれてしまっています。ここから、PC表示で見やすいレイアウトにするためにレスポンシブ対応させていきます。
今回はブレークポイントは、最小画面幅が1080px以上、つまり@media screen and (min-width: 1080px) に設定します。
そして、画面幅に対応したデザインにするために
縦並び(flexbox)の箇所を横並び
横並びにした要素の余白の調整
を行っていきます。
@media screen and (min-width: 1080px) {
.wrapper {
flex-direction: row;
justify-content: space-around;
}
.box2 {
margin-top: 0;
}
}flex-directionを用いてレイアウトを横並びにしつつ、余白をちょうど良くするためにjustify-content: space-around;にしました。そして最後に余白を付けるためにbox2クラスに対して上に空いていた余白を消すようにします。
完成
このようPCサイズでも不自然でない見た目ができたら完成です。
まとめ
今回は画面幅によって表示を変えるレスポンシブ化について解説しました。
- メディアクエリの使い方
- ブレイクポイントでの切り替え方
- 検証ツールでのサイズの変え方
の3つをまずは押さえておきましょう！
レスポンシブは現在必須の知識なので、少しずつ慣れてスムーズにできるようにしていきましょう！
