CSS HTML5

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

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

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

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

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

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

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

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

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

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

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

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

あと、HTMLファイルに、

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

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

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

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

保存保存

保存保存

保存保存





-CSS, HTML5

執筆者:

関連記事

CSS 可変で文字サイズを変更する

「画面サイズに合わせて文字の大きさも変化させたい」けど、「em」や「rem」や「%」ではうまくいかない。 早速ググってみると。。。ありました! vw(ViewportWidth)とvh(Viewpor …

CSSでテーブルの背景色を交互に変える方法

今さらですが… CSSだけで表の背景色を交互に変える方法の覚え書き。 ※IE8以下のブラウザには対応していません。 でも、マイクロソフトはIE8のサポートを終了したので、これからはどんどん使えそうです …

CSS★floatの解除にclearfix

floatの解除方法はいくつかありますが、 clearfixを使う方法が1番使い勝手がよいのでメモ。 floatを設定すると、要素が浮くことになり、 高さが消失してしまいます。 きちんとfloatを解 …

二重の打ち消し線にする方法

あるサイトの更新で、日付を打ち消し線で消して、次の行に新しく正しい日付を掲載するよう修正してほしいとの要望がありました。 打ち消し線は、cssでスタイルをもたせてやればスグにできます。   …

CSS★最低の高さを決めて後は可変にする方法

最小の高さだけ決めて、 あとはdivなどの要素の高さに応じて高さを可変にできる指定方法。 CSSで下記のように指定します。  

  I …

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