前回までの模写コーディングで、PCでの表示はいい感じに整いました。
※ご覧になっていない方は是非ご覧ください！
しかし、Webサイトを構築する際、PCだけではなく、タブレット、スマホから閲覧しても見やすいスタイルとなっていなければなりません。
前回までに模写したものをスマホ等から閲覧すると、かなり見た目が崩れていると思います。
この記事から、各端末での見た目を整えるレスポンシブ対応をやっていきます！
今回はとりあえず下準備をメインに紹介します。
完成形の確認
まずは模写するサイトで、デベロッパーツールを開き、デバイスモードで画面幅を狭くし、スマホ版のCSSが適用された状態とします。
このようなスタイルにしていきましょう。本来はタブレット、スマホと見た目を整えますが、今回はスマホ用のデザインのみの実装を紹介します！
ただ、模写するサイトによっては、レスポンシブとなっていなかったりしますし、実務でも、PC版のデザインは提示されても、タブレット・スマホ版のデザインはコーダーにお任せということがあります。
その場合、基本的にはPC版のデザインを尊重し、配置・サイズを次のようにちょこっと変えるだけの場合が多いです。
- ナビゲーションメニューは初期非表示で、ハンバーガーメニュー等から表示する。
- 横並びにしてる要素は横並びを解除して縦に並べたり、横にスクロールできるようにする。
width、height、margin、padding、font-sizeをpx指定からvw指定に変更を基本とする。
となります。
固定値pxからvwへの単位変換が悩ましい所ですが、基準となる画面幅において、どのくらいの大きさで表示したいかを決めると、次のように求めることができます。
[固定値] / [基準となる幅] * 100例えば、画面幅320pxの時に、20pxで指定したい場合は、20 ÷ 320 × 100 = 6.25vwとなります。
ビューポート、メディアクエリの設定
レスポンシブ対応の下準備として、ビューポートの指定と、メディアクエリの指定が必要です。
ビューポートの指定にはindex.htmlを開き、<head>内に、次の<meta>要素がある事を確認します。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" rel="stylesheet">
<title>Document</title>
</head>viewport(画面の表示領域)のwidth(幅)を表示するデバイスの幅に合わせて、initial-scale(初期の表示倍率)を1.0とする記述です。
これはemmetでテンプレートを呼び出した時に記述されていると思いますが、無ければ追加してください。
メディアクエリの指定には、style.cssを開き、前回までの記事で記述した、PC用のCSSの下に、次を追加します。
/* 前回までの記事でコーディングしたCSS */
@media screen and (max-width: 768px) { /* 画面幅"小"版のスタイルを記述 */}このメディアクエリの中括弧内に記述したCSSは、画面幅768px以下(max-width:768pxの部分)のデバイスにのみ適用されます。
前回までの記事で記述したPC用のCSSも一度読込まれるので、それをベースに、不要なCSSは初期化したり、スマホ用のCSSを追記していく流れになります。
尚、この場合、タブレット・スマホからページを読み込んだ場合、PC用のCSSを不要なプロパティも含めて1度読み込まなければいけないので、ページの読込時に一瞬表示が崩れる・速度が遅くなるなどの問題があります。
スマホからのアクセスの方が多いと見込むのあれば、逆にスマホ用のCSSをベースとしてPC用のCSSを記述していくパターンもあり、これはモバイルファーストと呼ばれる設計になります。
今回はスマホ用の画面幅768px以下のデザインのみを実装しますが、実務では次のような感じでデザインを区切っています。
- PC用 : 1220px〜
- タブレット用 : 769px〜1219px
- スマホ用 : 〜768px
この分岐の値はブレイクポイントと呼ばれます。
CSSで表すと次のような感じです。
/* PC用スタイル */
@media screen and (max-width: 1219px) and (min-width: 769px) {
/* タブレット用スタイル */
}
@media screen and (max-width: 768px) {
/* スマホ用スタイル */
}実務では全てのスタイルを実装して、画面幅が変わってもスタイルが崩れないようにしなければなりません。
次の記事
実際にレスポンシブ対応を実施していきます！
