今からレスポンシブサイトを作る時のメディアクエリとブレイクポイント【2017年度版】

新しくサイトを作ることになった。
もちろん、レスポンシブ対応で。

そこで改めて、ブレイクポイントを考えてみことにした。

Googleでは「モバイルファースト」を推奨している。さらに「モバイルファーストインデックス（MFI：Mobile First Indexing）」が、ついに今年実装されるとか。実装時期は未定だが、導入することは確実に決まっている。MFIとは、従来はPC向けページの評価を検索結果の基準にしていたところを、モバイル向けの評価を基準にするというもの。
今後はモバイルサイト主体になることは確実だし、それを見越してホームページ環境を整えておきたい。そういった状況から今回は、Googleが強く勧めている、モバイルファーストで制作してみることにする。

そこで気になるのがブレイクポイントの設定。

細かく切り分ければいいのだが、CSSが面倒。
シンプルにPCとスマホで切り分けようと思う。

PC用のブレイクポイントはタブレットと兼用で768px以上のとした。
CSSのサンプルコードはこちら↓

/* --------------------------------------------- */
/* ▼モバイルファースト (全デバイス共通) */
/* --------------------------------------------- */
　：　：　：
　：　：　：
/* -------------------------------------------- */
/* ▼タブレット用として付け足すデザイン */
/* -------------------------------------------- */
@media all and (min-width: 768px) {
　　：　：　：
　　：　：　：
}
/* ------------------------------------ */
/* ▼PC用として付け足すデザイン */
/* ------------------------------------ */
@media all and (min-width: 920px) {
　　：　：　：
　　：　：　：
}

モバイルファーストのCSSの書き方は、
始めに、全体の共通設定を書き、
次に、横画面サイズの小さなものから記述していく。
メディアクエリは、最大を示す「max-width」ではなく、最小の「min-width」を指定する。

あと、HTMLファイルに、

<meta name="viewport" content="initial-scale=1">

の1行を追加しておくこと。

ただし、IE8以下はメディアクエリに非対応なので、そのままではスマホ用のレイアウトで表示される。現在IE8ユーザーは減少しつつあるので、カバーしなくてもよいと思うが、古いブラウザでもメディアクエリを有効にするには、スクリプトを読み込む。

■Respond：
IE6～8でもメディアクエリが使えるようになるスクリプト。ただし、有効な条件指定は「max-width」と「min-width」のみ。このスクリプトは、CDN経由で提供されているので、自力で設置する必要はなく、HTML中にIEの条件付きコメント機能を使って記述しておけばOK。

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

上記のように記述すると、IE9未満の場合にだけスクリプトが読み込まれ、それ以外のブラウザでは、HTMLのコメントとして扱われるためスクリプトは読み込まれない。

保存保存

保存保存

保存保存