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★画像を右寄せにする

画像を右寄せにする方法 デフォルトは左寄せになっています。   右寄せにする手順 (1)画像をブロック要素として囲む。    ブロック要素= div・p・ul・li・dl など ブロック要素 …

no image

リストマーカや番号の左側の隙間について

<ol>や<ul>といった箇条書きを指定した場合、リストマーカや番号の左側に大きな隙間ができてしまう。 ここは、CSSで何も指定していなくても、ブラウザが気を利かせてある程度の …

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

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

CSS★h1やh2に特定のクラスを付ける

サイトを構築していて、特定のh2だけにクラスを指定して、見た目を変えたいときにどのように設定すればいいのか、わからなかったので調べてみた。 誤: .article h2 .title 正: .arti …

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

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

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