ブログ型ホームページ制作ならWebma! 制作費無料、月額格安。無制限フォローと強力なSEO、そしてアクセス解析レポートも毎週提供の集客できるホームページ制作サービス
お気軽にお問い合わせください。
0120-980-939
受付時間 10:00~18:00(土・日・祝日除く)
公開日:2016年12月7日
最終更新日:2016年12月12日

メディアクエリ(Media Queries)とは


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

mediaタイプを使った記述

<link rel="stylesheet" href=/style.css/ type="text/css" media="screen" >
/* ↑ パソコン用のスタイルシート */
<link rel="stylesheet" href=/print.css/ type="text/css" media="print" >
/* ↑ プリンタ用のスタイルシート */

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

メディアクエリ(Media Queries)で画面サイズの指定を細かく設定!

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

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

メディアクエリの書き方

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

/*
@media以外の所は全てのサイズで読み込まれます。
*/
p {
 color:blue;
}
@media screen and (min-width:480px) { 
    /* 画面サイズが480px以上の場合はここを読み込む */
p { color:#000;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /* 画面サイズが768px~1024pxの場合はここを読み込む */
p { color:#fff;}
}
@media screen and (min-width:1024px) {
    /* 画面サイズが1024pxからはここを読み込む */
 
}

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

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

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

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

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

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

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

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

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

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

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

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

この記事の著者

多胡祐子
多胡祐子

Webma!チーム デザイナー

記事一覧

PR

engage



著者一覧

多胡祐子
多胡祐子

Webma!チーム デザイナー

渡邉清子
渡邉清子

Webma!チーム デザイナー

増子貴仁
増子貴仁

Cross&Crown LLC代表社員、Cross&Crown Security Intelligence LLC代表社員。