レスポンシブデザインのサイトを作成するためのメディアクエリの記述方法

目次

メディアクエリ（Media Queries）とは


メディアクエリ（Media Queries）とは、css2あたりで登場したmediaタイプを拡張させたCSS3の記述方式です。

mediaタイプを使った記述

mediaタイプを使った場合、こんな感じで「パソコン用」「プリンター用」の記述をします。
パソコンで見る時はstyle.cssを参照、プリンターで印刷する時はprint.cssを参照します。

メディアクエリ（Media Queries）で画面サイズの指定を細かく設定！

メディアクエリ（Media Queries）の登場で、より細かく画面サイズの指定ができるようになりました。
cssに直接書き込めて編集が楽、というところも魅力の一つです。

レスポンシブデザインはSEO対策になりますので、メディアクエリ（Media Queries）を使ってサイトをレスポンシブにする事で検索順位が大きく変わる可能性もあります。

メディアクエリの書き方

min-widthとmax-widthを使って画面サイズを指定します。

これだけでレスポンシブデザインになります。
サイズ指定があまりにたくさんあり過ぎると編集が大変なので、3～4つくらいで区切るのがおすすめです。

メディアクエリ（Media Queries）を並べる順番にも意味がある

上記の記述では小さい画面サイズから記述していきましたが、これには名前があります。
「モバイルファースト」といいます。

逆に大きい画面サイズから記述する方式を「デスクトップファースト」といいます。

どちらでもきちんと記述ができていれば表示はされます。
ただし、表からは見えないSEOの部分で少し違いがあります。

「モバイルファースト」はGoogleさんが推奨しています。
（2016年にMobile First Index（モバイルファーストインデックス）の導入を正式にアナウンス）

これまではパソコン向けの評価がパソコン・モバイル両方の検索結果のランキングに用いられていました。
しかし今後はモバイルファーストインデックスの導入により、モバイル向けの評価がパソコン・モバイル両方の検索結果に反映します。

つまりモバイル向けサイトが主、パソコン向けがサブの評価、という事になります。

このことからモバイルファーストのサイトは今よりも更にSEOの部分で優位になっていきます。

デスクトップファーストでサイトを構築すると、最初に重いパソコン向けデータを読み込まないといけないので、サイトの表示速度も変わってきます。

ますますデスクトップファーストの立場がなくなっていくように思えますが、デスクトップファーストの方が馴染みがあるというホームページ作成業者も多く存在します。
馴染みがあるというか、今までそうやって作成してきたので今更作成方法を変えるのが難しいのかもしれません。

脅すわけではないのですが、モバイル向けサイトを持っていない、または持っていてもモバイルファーストになっていない、という方は意外と多いのかもしれませんが来年あたりがくんと順位が変わるかもしれません。
サイトの順位が落ちた！と慌てる前に一度確認しておくのもいいですね。

カテゴリ：
タグ：