/SEOツール無料デモを申し込むこの“メディアクエリ”とは、主にスマホ対応するレスポンシブデザインに必須となるタグで、メディアタイプやメディア特性によって各種対応するデバイスや、分岐条件(widthを用いた横幅のサイズ)などを指定するとことによって、Webサイトを各種デバイスに適した形で見せることができ、最近ではheadタグやcssに必ずと言って良いほど記述されていると思われます。※アクセスしてきたデバイスの幅を読み取る“viewport(ビューポート)”の記述も必須です。その設定・記述方法は思ったよりも簡単で、Webページに関して言えば単純に横幅を指定して読み込むcssを変えるだけのもので、後ほど詳しくご説明しますが、複雑にならないための管理方法としてひとつのcssに全てをまとめているという方も多いのではないでしょうか?このようにメディアクエリとは、以下のようにcssファイルそのものをデバイスの幅によって変更させたり、cssファイル内で読ませるスタイルを変更することも可能です。読み込むcssファイルそのものをデバイスによって変える読み込むスタイルをデバイスによって変える両者は似ているようですが、要はstyle.cssを振り分けるのか?それともcss内で読み込むスタイルを切り替えるのか?といった違いで、その場合メディアクエリの記述方法が若干異なり、基本的にデバイスの横幅を指定するだけで各種css・スタイルを適応させることができるというものです。※ここで指定する横幅の数値をブレイクポイントと呼びます。そのため、このメディアクエリはレスポンシブデザインには欠かせないもので、簡単に言うと...ビューポートでアクセスしてきたデバイスの横幅を取得、メディアクエリで読み込むcssを振り分けることで適宜デバイスに合った見せ方ができ、SEOやユーザビリティにも繋がる重要な役割を果たすタグと覚えておくと良いでしょう。今回は、アクセスして来たデバイスによって適したcssを振り分けるために必要な“メディアクエリ”について、意味や記述方法など詳しくご説明していきたいと思います。【キーワードツール】おすすめ&役立つ!目的別キーワードツール12選メディアクエリとは?“メディアクエリ”とは、訪問ユーザーが使用するデバイスの幅に合わせたWebの見せ方を可能にするもので、スマホからアクセスした際にPC用のページが表示されると当然文字が小さくて閲覧しにくい...といったユーザビリティを考慮して画面サイズに適したデザイン表示させるために必要なタグです。いったサイトは使いづらい・見にくいといった理由から一瞬で検索結果ページに戻ってしまう可能性が高いため、多くのサイトがスマホ対応を重要視しているのではないでしょうか?また、スマホが普及しはじめた頃はまだまだPCによる検索が多くを占めていましたが、2016年11月にGoogleが公式ブログにて発表したモバイルファーストインデックスを機会に多くのサイトがレスポンシブデザインを導入し、特に最近ではスマホからの検索数の方が増えていますので、スマホ対応はもちろん必須の対策と言えます。インデックスに向けて他にも最近ではiPadなどのタブレットも大変多くの機種が発売され、その画面サイズも実に様々あり、モニターサイズも年々大きく鮮明になる傾向ですので、敢えてタブレット対応までは考慮していないというサイトも少なくありません。(この辺りはWordPressをお使いの場合ならすでにテーマ側で対応済みかと思われます。)そのため、独自でスマホ対応する際は主にPCとスマホの表示を区別するだけでも十分かと思われ、後ほどご説明する“ブレイクポイント”と呼ばれるデバイスの幅(PC・スマホに適応させるcssを振り分ける境界となるサイズ)を現在発売されているスマホやタブレットなどから決めると良いでしょう。そのメディアクエリに記述するメディア属性は主に“メディアタイプ”と“メディア特性”から成り立っています。キーワード選定におすすめのキーワードツールをご紹介しています。【キーワードツール】おすすめ&役立つ!目的別キーワードツール12選サイトに効果的なキーワード選定を行っていますか?キーワードを選ぶには検索ボリュームや難易度など...続きを見るメディアタイプメディアタイプとは、メディアクエリのメディア属性に記述するもので、どのメディアにcssを適応させるのかを指定します。4”からは、以下の4つがメディアタイプとして推奨とされているようです。このように簡素化されたことによって、主に使用するメディアタイプは“all”もしくは“screen”、そして印刷用のcssを考慮した“print”辺りを覚えておくと良いでしょう。screen“)」と記述することで、指定したcssを読み込んだ状態でプリントすることが可能です。(メディアタイプはカンマで複数指定可能です。注意点としては、印刷に対応していないcssのプロパティも多いので、Chromeのエミュレーターを利用して印刷時の見え方をチェックしてみたり、実際にプリントアウトしてみると良いでしょう。type”の項目から“print”を選択すると確認することができます。media=”print“)」と記述し、別途印刷用のcssを用意する必要があります。ポイントとしては、主に印刷する際は当然クリックできるわけでもありませんので、場合によってはグローバルメニューやスライド画像を非表示にしたり、資料としての見やすさを優先させてcssを記述していくと良いかと思われます。(意外と崩れているケースも多いので、一度チェックしてみても良いかもしれません。(max-width:787px)“」の下線の箇所を指します。※「and」という演算子をメディアタイプとの間に記述するわけですが、「,(カンマ)」もそのひとつです。他にも“height(ビューポートの高さ)”や“orientation(ビューポートの向き:portraitは縦向き・landscapeは横向き)”など“メディア特性”には数多くの種類がありますが、レスポンシブデザインの導入によってスマホ対応するために必要なのは概ね“width(ビューポートの横幅)”だと認識しておいて間違いありません。MDNこれは主にブレイクポイントと呼ばれるデバイスの横幅といった意味で、上記の場合だと横幅最大787pxまでのデバイスを対象とするわけです。(787px以下のスマホを対象とする。)ただし、ここで注意したいのは...iPhoneシリーズに記載されている解像度(px)は主にデバイスピクセルと呼ばれるRetinaディスプレイなど1ピクセルに含まれる数を考慮したもので、実際のサイズとはまた異なります。(実際に着目するべきサイズはcssピクセルと呼ばれる論理上の画面サイズです。XS”の場合だと公式ページには2,436×1,125ピクセル解像度と記載されていますが、2xや3xと表示されるデバイスピクセル比を考慮するとブレイクポイントとする数値は375×812(横・縦)となります。Resolutionsちなみにこのデバイスピクセル比は、ChromeやFirefoxのデベロッパーツールからも確認することができます。(レスポンシブデザインモードの各種デバイスを変更するとチェックできます。X”からのアクセスが多いものと思われます。メディアクエリの記述方法では続いてこの“メディアクエリ”の記述方法についてです。通常、cssを外部ファイルとして読み込む際、各ページのhead内には以下のような記述があるはずです。href="/css/style.css">メディアクエリはこのリンクタグにメディアタイプとメディア特性を追記する形で記述していき、htmlファイルに書くケースと、cssファイルそのものに書くケースと2パターン存在します。要は外部ファイルとして指定するパターンと直接記述するパターンがあるというわけです。cssファイルを分けて管理するのか?それともひとつのcssファイルで切り替えるのか?これはサイト・ブログのボリュームにもよって選択すると良いでしょう。このメディアクエリはビューポートがあってはじめて機能するので、基本となる以下のタグもhead内に必ず記述してください。(「width=device-width」とは文字通りデバイスサイズのことを意味します。content="width=device-width">htmlに記述する場合ここでスマホ対応するために読み込むcssを切り替えるためには、以下のように“media=〜”のタグを追記します。この部分をメディアクエリと呼び、中身の部分をメディア属性と呼びます。(max-width:767px)">そしてcssファイルそのものを分岐させるのであれば、上記のような書き方で問題なく、PC用のcssファイルも考慮すると以下のように複数指定することとなります。この場合だと“screen(ディスプレイ)”を対象に横幅最大767pxまでのデバイスにmobile.cssを適応させるという意味合いとなります。(max-width:767px)">この場合、上記と同じく“screen(ディスプレイ)”を対象に「min-width:768px」...横幅768px以上のデバイスはstyle.cssを読み込み、「max-width:767px」...767px以下のデバイスではmobile.cssを読み込むという意味となります。ブレイクポイントについてはここまで大きなサイズのスマホが主流となっているわけではありませんので、あくまでiPadの最低サイズを指標としているというわけです。キーワード選定に悩んでいませんか?関連記事キーワード選定を完全サポートする“キーワードファインダー”とは?需要があり、競合が多いキーワードで上位表示させることが難しい...と思っていませんか?なぜ様々な施策を行っても効果が出ないのかというと...続きを見るcssに記述する場合また、この記述方法については冒頭でもお伝えした通り2パターンのケースがあり、上記のようにcssファイルそのものをリンク要素として振り分ける以外にも、css内で読み込むスタイルを分岐させることも可能です。}」の中に適宜適応させるスタイルを記述していきます。これだとひとつのcssファイルで管理することもできますので、サイトの規模を考慮して使い分けると良いでしょう。(あまりにも大規模なサイトだと数千...場合によっては1万行を超える膨大な行数となってしまいますので、別途スマホ用のcssを分けて管理した方が修正しやすいかと思われます。)そしてこの中に書いたスタイルに関しては、メディアクエリで指定したサイズのデバイスのみ適応となるわけです。注意点としては、修正作業中にスタイルが適応されないと思っていたら...異なるデバイスの箇所に記述・変更を加えていたというケースもありますので、その辺りに関しては適宜確認しながらの作業が必要となります。{(ここにモバイル用スタイルを記述)}ちなみにその中間としてタブレットにも対応したいという場合は以下のように記述します。{(ここにタブレット用スタイルを記述)}ここでは“StatCounter”を参考に、国内で使用されているPC用ブラウザのシェアを元にブレイクポイントを設定したと仮定しています。(最も小さいサイズをブレイクポイントとした場合。Shareちなみにひとつのcssで管理する場合のコツとしては、まずPC用のスタイルをそのままコピーして、それぞれをPC用・スマホ用のスタイルをメディアクエリで囲みます。スマホ対応として必要なプロパティをデベロッパーツールなどでチェックしながら書き換えていくと管理しやすいかと思われます。いうのも...PC・スマホ共通のスタイルを使い回し、部分的にスマホ用のスタイルを追記していくと、後々PC用のスタイルを調整したつもりがスマホでは想定外のデザイン・表示となってしまう可能性があるからです。いった管理方法で長期間運用してしまうと、一箇所変更すると様々なところに影響を及ぼしてしまいますので、できればPCのスタイルをそのままスマホにも適応させて、適宜修正していった方が間違い・ミスを防げるでしょう。まとめ今回は、ユーザーファーストのためには欠かせないスマホ対応のレスポンシブデザインに必須となる“メディアクエリ”について意味や記述方法について詳しくご説明しました。このように“メディアクエリ”とは、メディア属性・メディアタイプ・メディア特性といった若干複雑な名称が並ぶため、少しややこしく感じられるかもしれませんが、正しく理解することによって様々なデバイスにも対応することも可能ですし、拘るならRetinaディスプレイに対応するcssをそれぞれ記述することもできる非常に便利なcssの仕様のひとつです。冒頭でもご説明した通り、このメディアクエリはビューポートがあってはじめて機能するものなので、こちらの記述も必ず一緒に覚えておくと良いでしょう。以前はスマホ対応したからといって順位に影響することはありませんでしたが、最近は特にユーザーエクスペリエンスといったユーザーのサイト内での行動なんかも重要視されているため、見やすさ≒ユーザビリティと考慮してストレスなく閲覧できるデザイン設計を心がけることが重要となります。可能!また、自動取得したキーワードは、ご自身のサイトだけでなく競合の順位も取得します。【2024年最新】SEOとは?SEO対策の基本と具体的な施策方法を詳しく解説しますオーガニック検索とは?表示場所やアクセスを増やす方法Google検索で上位表示させるために必要な要素とは?#レスポンシブキーワードファインダー編集部キーワードツール「キーワードファインダー」の編集部です。今までのSEOツールとは違う弊社独自の方法で様々なソースからあなたのサイトに最適なキーワードを毎日自動で取得していきます。キーワード選定及びSEO対策でお悩みの方は是非、無料体験デモをご利用下さい。/SEOツール無料デモを申し込む。