CSS HTML5

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

投稿日:2017年8月30日 更新日:

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

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

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

<MFI(モバイルファースト)まとめ>

今まで: スマホから検索していても、PC向けページの評価を基準に検索結果を提示

MFI導入後: PCからの検索も含めて、モバイル向けページの評価を基準に検索結果を提示

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

細かく切り分ければいいのだが、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のコメントとして扱われるためスクリプトは読み込まれない。

保存保存

保存保存

保存保存

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS, HTML5

執筆者:

関連記事

CSS★奇数・偶数・n番目の要素を指定するセレクタ

リストの表示で、奇数の li 要素にだけ効くCSS設定をしたかったので、調べてみた。 奇数番目の要素にスタイルを適用する li:nth-child(odd){ background: #ff8080; …

CSS★丸い背景+円形の中央に文字

cssのメモ。 丸形の作り方 基本的な方法は、 (1)div 要素で囲った範囲の上下左右のサイズを指定する(height, width) (2)背景色を付ける(background-color) (3 …

サイトを引っ越したときのリダイレクトの方法について

サイトを別のURLへ引っ越ししたときの対処方法 サイトを別のURLへ引っ越ししたときの対処方法を調べてみました。 その方法は大きく分けて、3つ。 .htaccessファイルを使って自動転送(リダイレク …

フロート解除★clearfixの使い方

フロート解除の指定方法 <CSS> .clearfix:after { content:” “; display:block; clear:both; }   <HTML> <div …

no image

CSS 重なり順序を指定する

背景画像を複数重ねるなら CSS3 より、要素に複数の背景を適用できるようになりました。 複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、指定した順に重ねて …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。