レスポンシブ対応のテーマを使っていても、スマホで確認したら画像や表が画面からはみ出てたり、CSSで装飾したものがPCビューと違って幅の狭いスマホでは表示がおかしい部分がでてきます。そこでメディアクエリの書きかたを知りたくなります。
初心者でもスマホ対応は必要になるので、このページの対象者は…
- 1からCSSを勉強し、スマホ対応を意識し始めたあなた
- CSSに興味あるけど、CSSのどこにstyleを書けば良いか分からない初心者さん。
メディアクエリ@media screen and (min-width: 000px)の書き方関連、スマホファーストとPCファーストのことから、順番に話を進めていきますね♪
レスポンシブ対応させるメディアクエリ「@media screen」について
1つのHTMLやCSSで書いるのに、どの端末（スマホやタブレット、PC）から見ても表示される、レスポンシブwebデザインは今や常識。以前はPC用とスマホ用のURLが違うサイトもあったことを思うと凄いことですよね。
レスポンシブwebデザインにするのに、スマホとPC表示を分岐して表示させたり、CSSで枠からwidthがはみ出さないようスマホ対応します。
そのページ見出し『CSSが反映されない原因！書いてる場所が違ってるときの解決方法』に書いた、初心者が解りにくいメディアクエリの@media screenについて補足。
どんな風に書いていくか初心者向けに、メディアクエリについて順番にまた、徹底的に説明していきますね＾＾
IE8以下のブラウザが未対応だから<!–[if lt IE 9]>を使う
レスポンシブデザインで有効なこのメディアクエリは、今推奨されているCSS3で加えられたCSSになります。そこで問題になるのは、古いブラウザに対応してないこと！
HTMLファイルのhead内で<!–[if lt IE 9]>と言う文字を、見たことありませんか！？古いブラウザ、IE8以下ではCSS3やHTML5に対応してないので、表示させるためJavaScriptを使うよ！っていう決まり文句てきなもの。って感じですかね＾＾
例えばWordPressのテーマ、Gushシリーズでは下記のように対応。
<!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js" charset="UTF-8"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/css3-mediaqueries.js" charset="UTF-8"></script> <![endif]-->
※Stinger、Affingerシリーズでは、こんな感じ。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <script src="<?php echo esc_url( get_template_directory_uri() ) ; ?>/js/html5shiv.js"></script> <![endif]-->
CSS3では『css3-mediaqueries.js』使って、HTML5は『html5shiv.js』で対応させよう！ってことですね。CSSにも同じ記載を目にしますが、これでCSS3のメディアクエリにも対応します。
古いブラウザの対応ってややこしいと耳にしますけど、それだけでは済まない面もあるのでしょう。IE8以下の環境を捨てるだとか聞くけど、初心者はピンときませんよね。
今使ってるテーマGush4にもこの記載はありますけど、古いブラウザIE6で見たらPCビューでも1カラムだし表示もオカシイのでタブン対応してません＾＾
初心者的に出来ることは、IE8以下の環境からのブログの流入がどれほどのモノか知るトコロからです。方法は簡単なので、サクッと説明しますね。
アナリティクスのレポートで、IE8以下からの流入を確認。
- ユーザーよりユーザー環境。
- ブラウザとOSをクリック。
- Internet Explorerをクリック
- IEからの流入の何％がIE8以下かわかる。
比較対象として私の場合、IE8・7・６からの流入は、3％前後のセッションで、全ての流入から見るのに計算したら、0.5%でした。
参考サイト【CSS】CSS3 のメディアクエリをざっと紹介します IE8の対応法もアリ｜SCENE LIVE
CSSのstyleが書かれてる順番 & 読み込みの順番との関係
CSSはHTMLに書いた骨組みを装飾するものです。色々書いてあるけど、どんな内容・装飾が書かれてるか。その順番と読み込む順との関係を見ると解りやすいので、上から何が書いてるかをザックリ説明しますね♪
- ブラウザに元々備わっている余白やフォントのstyleなどがあるので、リセットする記載。※HTMLでリセットしている場合もあるかも。
ブラウザがはいてるCSS
一番上に書いてるのは、ブラウザのstyleを初期値に戻して、ブログの装飾に入る準備の記載です。リセットすると、こんな感じ。
リセットされたCSS
- CSSは上から順番に読み込む！
- 次に段落や引用、画像やYouTube関連、リンクに基本のフォント関連、見出しなどの装飾…。
そしてスマホ・タブレット・PC表示、どれでも共通した基本のstyle
- ブログが表示されて、上から見る順番。
ブログが表示される順番
ヘッドやナビ、メイン、サイド、フッターと上からCSSにstyleを書いたら、良いってわかりますよね＾＾
- CSSの上に書いてる方が読み込みの順番が早いってことは！？
CSSは上のほうには、これらの順番にstyleが書かれてると考えたら、使ってるテーマのCSSには、何がどこらへんに書かれてるか、解りやすくなりますね。さらに下には、デバイス毎のstyaleが続く感じです。
CSSは、上から順番にコードを読み込む。
- ブラウザに備わったstyleのリセット
- モバイル、タブレット・PC共通のstyle
- 段落や引用、リンク、見出し…など
- ヘッドやナビ、メイン…など
- モバイル、タブレット、PC専用のstyle。デバイス事の装飾をその下に書く。と言えば解りやすいですね。
なので『スマホやPC、タブレット共通の記載』から書くのが効率が良い。
そこで『はじめに書く共通の記載部分』を、どのデバイスを基準にするか。って話をしましょう。
スマホファーストって何！？
- スマホファーストとは
- 共通の記載を、『幅の狭いスマホ画面を基準』にして上から順番にCSSに書いたもの。
その下にタブレットやPCの画面サイズが大きな幅からのアクセスに対応させるスタイルを、メディアクエリmin-widthを使って書いたもの。（書きかたは後述。）
レスポンシブwebデザインには基本的に『スマホファースト』『PCファースト』の書き方があるとテーマGushの製作者『エローラさん』に教わったことがあります。ここから、教わった言葉を引用しながら、書いていきますね。
スマホファーストの場合は、まずスマホ・タブレット・PCに共通の指定をあたまから書いていきます。
その後、「画面幅が○○px以上になったら」という記述を入れてタブレットやPCでのみ反映されるスタイルを書いていきます。このとき、メディアクエリは min-width を指定します。
スマホファーストのメディアクエリの書き方
スマホファースト（小さい画面から合わせる）
ブレイクポイントを768pxと1024pxに設定した場合/* ここは全端末共通の指定 */
@media screen and (min-width : 768px){ /* 画面幅768px以上に適用されるスタイル */ }
@media screen and (min-width : 1024px){ /* 画面幅1024px以上に適用されるスタイル */ }
例として、スマホファーストの書き方を見てみましょう＾＾
- スマホビューに合わせた『スマホ、タブレット、PCで共通するCSS』全体の装飾
- @media screen and (min-width : 768px) {
ここに、768～1023pxで表示させたいCSS、幅や余白などを指定。
} - @media screen and (min-width : 1024px) {
最小が1024pxと言う意味。これより大きな画面への装飾の指定
} -
#main { padding: 1.5em 1em 0.4em; width: 100%; margin: 0 auto; background: #fff; } @media screen and (min-width:768px) { /* ココは768px～1023pxの画面サイズでのスタイル） */ #main { width: 753px; padding: 3em 2.4em 0.5em; margin-bottom: 1em; } } @media screen and (min-width:1024px) { /* ～ココから1024pxより大きい画面でのスタイル～ */ }
| 装飾 | プロパティ | 全体の装飾 | 768～1023の装飾 |
|---|---|---|---|
| 内側余白 | padding | 1.5em 1em 0.4em | 3em 2.4em 0.5em 余白を広くした |
| 幅 | width | 100%幅いっぱいに | 753pxに固定 |
| 外側余白 | margin | 0 auto 中央ぞろえ | bottom: 1em 下の外側を1em広く |
| 背景 | background | #fff 白 |
基本通り変更なし |
- スマホの320pxからアクセス
スマホビューにあわせた共通事項の部分、読み込んで表示。1回の読み込みで済むのがスマホファースト。
- PCから800pxでアクセス
基本のスマホビューを読み込んで@media screen and (min-width:768px)のCSSをさらに読み込み上書きして表示。
- 1080pxの画面からアクセス
共通事項を読み込んで、@media screen and (min-width:1024px)のスタイルを読み込んで表示する。
- ※CSSを見慣れないうちは、これが解りにくい！？
追記するとき、一番下の空欄にでもメディアクエリを書いて上書きさせるのもOK！（詳しくは後述。）また自分で装飾したものと分けたい時、一番下に書いたり子テーマを使ったりします。
また、LINKブログに「お知らせ」を置いて近況を伝えるページにも使ってるので、見出し『お知らせのコード』を使用例としてココで紹介しておきます。
PCファーストとは！？
PCの大きな画面にあわせて書いたCSSです。上の説明の共通設定がスマホビューではなく、PCビューにあわせたものになります。メディアクエリには、タブレット用とスマホ用を書くと言えば解りやすいですね。
- スマホからアクセスすれば、上に書いてるPCビューを読み込み、その後、スマホビュー用のメディアクエリに書かれた装飾を読み込む。
- タブレットからだと、基本のPCビューを読み込んだあとに、タブレットサイズの装飾を読み込みます。
その他は引用のとおり。
PCファーストの場合は、スマホファーストと同じく全端末共通の指定を書きます。
その後、「画面幅が○○px以下になったら」という記述を入れていきます。このとき、メディアクエリは max-width を指定します。
PCファーストのメディアクエリの書き方
大きいPC画面を想定して書いてるので、最大幅: 何px以下。と言う書き方になるのが特徴です。解ってしまえば簡単で、後はつづりを間違えないようにするだけです♪
PCファースト（大きい画面から合わせる）
ブレイクポイントを480px、768px、980pxに設定した場合/* ここは全端末共通の指定 */
@media screen and (max-width: 979px) { /* 979px以下に適用 */ }
@media screen and (max-width: 767px) { /* 767px以下に適用 */ }
@media screen and (max-width: 479px) { /* 479px以下に適用 */ }by：エローラ
PCファーストやスマホファーストが全てではありません。ほかにも色んな書きかたもあるので。この二つが基本！程度に思っていればいいかと思います。慣れたら、基本に沿って、他の書きかたも取り入れたら良いことですから。
次に気になるブレークポイントの説明をしますね。
ブレークポイントって、なぁに！？
スマホとタブレット、PCでは、それぞれ画面の幅が違いますよね。PCは1080pxの幅があっても、全画面で見たりしないので、場合によってはタブレットほどのサイズでアクセスする場合もあります。
そんな違った幅からのアクセスによって、メディアクエリでスタイルを変えますよね。そのとき指定する画面のサイズのこと。って言えば解りやすいです。
どこをブレークポイントに設定すれば良いのかが気になりますよね！？ってことで、引用をどうぞ。
“スマホやタブレットは画面幅＝ブラウザ幅なので、端末のピクセル数に合わせなければなりません。
たとえば iPhone5 は 横320＊縦568 なので、ブレイクポイントをきっちり合わせるなら 320px です。
ただし、横に傾けて使用すると横568＊縦320 になるので、ブレイクポイントは 568px に変わります。全端末に合わせるなら、以下のような資料を参考に細かく設定する必要があります。
http://sounansa.net/archives/1465これにタブレットが入ってくるとややこしいですね…
PCの場合は画面幅＝ブラウザ幅ではないので、完璧に対応することは不可能です。
1920＊1080のモニターを使っていて、画面いっぱいにブラウザを表示する方もいれば、画面の半分ぐらい（1000px前後）にしている方もいるので、訪問者の集計をとってだいたいの目安を設定するしかありません。
“だいたい480px、768px、980px、1024pxあたりが一般的で、制作者の好み。by：エローラ。”だそうです。もっと細かく指定して変えたいのであれば、320px専用のブレークポイントを作ればいいでしょうし＾＾
大きなスマホは片手で操作しにくいので、スマホでも画面を小さくする機能もあります。当『ビバ★りずむ』でも、336px（画面アドセンスの幅）以下の画面（320px）で見るユーザーさんは全体の1割前後の流入があります。
記事を書くのがメインであれば、あまり詳しく考えないで、PCやスマホで確認して反映させればOK！ガラケー使用者さんも居るほどなので、自分が最適！と思うブレークポイントを作りましょう♪ユーザーさんが見やすいのが何より一番ですから＾＾
真剣に考えたいなら、アナリティクスでユーザーさんの画面の解像度を見て、最適なものを考えるのも良いかもしれませんねぇ。
スマホファースト、PCファースト、どちらが良いの！？
テーマを使用してるのであれば、テーマ通りにするのも良いです。でも初心者のうちは、カスタマイズを参考にしてコピペする場合も多いので、スマホファーストなのに、max-widthを使ったメディアクエリを使ってる場合もあります。
ですが問題なく反映します！無料でテーマ配布されてる超々有名テーマもStinger5もどちらも使ってます。更に、割愛しますがほかにも色んなメディアクエリの指定方法も存在するので、
- @media screen and (min-width: 768px)
- @media screen and (max-width: 767px)
どちらでもOKです。でもレスポンシブデザインを0から作ってみたい、練習してみたいと思うなら、スマホファーストで練習するのは良いかと思います。スマホのレイアウトは初めのうちは忘れがちですから。
色んな方法を試し、失敗しながら覚えていくのも楽しいものです！成功するのが一番ですが＾＾
本気で考えるなら、スマホからの流入が多いならスマホファーストです！理由は
- 後述の引用通り『とくにスマホはスピードが遅い』と言われてる。
- 下に書くメディアクエリは、上に指定したスタイルを、上書きするから。
少しでも良い（早く！）と思うなら、子テーマも読み込みが遅くなる原因となってしまいます。そこまで究極を極めるかどうか！？ってことにつながります。子テーマ使ってるからこそ、気にしても良いですし。でもあまり気にしないのが良いかと＾＾
CSSを一番下に貼る時期を超えた頃、またCSSを見て何がどこに書いてるか分かるようになってから、自作テーマを採用したい頃に、考えても良いかもしれません。これを見て楽しくなったなら、将来自作テーマを作るんでしょうね♪楽しみにしてます(*^^)v
追記する場所
初心者的には、不安であれば『一番下に追記』していくのが一番解りやすいので、それをおすすめします＾＾
- 同じ記載、例えば、aタグの色を変えたいなら、aタグをそのまま編集しても良いでしょう。例えば元の色がblueだったら、それを消してpinkに。
a {
color: pink;
}
元の記載を残したいときは、コメントアウト/**/を。
a {
/*color: blue;*/
color: pink;
}
また、一番下に書くと、こんな感じで上書きされます。
a {
color: blue;
}
/* 色んな記載～略～ */
/*一番下に追記*/
a {
color: pink;
}
aタグはブルーを読み込み、一番下に書いたpinkがさいごに読み込まれて上書きされます。あと（CSSの下）に書いた優先順位が高いから、一番下に書いたpinkが上書きされるんですね。
- @media screen and (m✖✖-width: ✖✖✖px)の記載の中。なければ、一番下に作る。
このメディアクエリは思いつく毎に、CSSの下にいくつ書いても読み込んで反映してくれます。増えてくると、どこに何が書いてるのか、解りにくくなるのが難点ですが…。
書きかたは上述通り。または別ページの見出し『CSSが反映されない原因！書いてる場所が違ってるときの解決方法』を参考にどうぞ。
- 優先順位について。
ほかにも色々あるので、詳しくは下記を見てくださいね。
LINKCSSの基本、class・id・子孫セレクタなど！HTMLタグの装飾、セレクタの指定方法と優先順位
書いたCSSが反映しない場合は、コメントアウトの中にコメントアウトが入ってないか、記載にコロン:やセミコロン;閉じ忘れ{}など不備がないかを確認してください。その他の原因は、下記をどうぞ。
速さを求めるなら、下記を参考にしてくださいね。
メディアクエリの外に書けば全端末共通になるので、一番下でもOKです。
ただ、CSSは上から順に読み込まれるので、共通指定はできるだけ上のほうにおくのが良いと思います。
とくにスマホはスピードが遅いので、下にいくほど読み込み＆反映が遅れて表示速度に影響します・・・
画像とかJavaScriptに比べればCSSは軽いですが、グラデーションや角丸、透過や回転といったちょっとした仕掛けは意外と重くなりますね・・
By：エローラさん
角丸や回転など重くなりがちだそうです。サイドのSNSや画像に書いてるを思いっきり入れてますけど、大きな画像を多数置くことを考えると軽いとも言えるといったところでしょうね。
回転・画像の四隅角丸・そして容量の大きなGIF画像
重くてもユーザーさんがパッと解りやすいGIF画像を入れてみました。これが回転ですね。ほかには、下記の画像と戻るボタンも同じく回転を入れてます。
動きが可愛い！戻るボタンは画面右下で回転を確かめてください＾＾
小さなことに感じるかも知れませんけど、積み重ねるとそれなりに大きなサイズになるのは、間違いありません(´・ω・`)
詳しいしキチンと正確に言うかたなので、引用で置きました。参考にどうぞ＾＾
Simplicityのレスポンシブ対応と、CSSの追記場所
HTMLでビューポートmeta name=”viewport”で切り分けて、CSSをレスポンシブ化させてるテーマもあるようで、これは、2015年の4月にグーグルが行ったモバイルフレンドリーでの対応なんでしょうね。
もし、今から勉強するなら、無料のワードプレスの超有名テーマSimplicityのphpを見て、何がどのようになってphpで指示しているか見ると、勉強になりますよ。
レスポンシブ化するため的に関係あるものを例にあげると、header.phpには下記のように分岐されてます。
<?php //ビューポート //モバイルもしくはページキャシュモードの時 if ( is_mobile() || is_page_cache_enable() ): ?> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <?php else: ?> <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes"> <?php endif ?>
- 『モバイル』か『ページキャシュモード』の時
表示領域の設定は、画面の端末の幅にあわせて、倍率はそのままの1倍で表示させますよ。 - モバイルと違うときは
表示領域の設定が、画面幅1280pxで、表示画面の最大倍率は1倍、指で行うズームを行える設定ですよ。
モバイルの画面サイズからの流入は、端末の幅に合わせて表示させて、モバイルでPC表示したら、2本の指でズーム機能を採用♪ってことが書いてるんでしょうね＾＾
参考HTML5/ページ全般/表示領域を設定する｜TAG<index>HTML5リファレンス
そこからデバイスの幅などにあわせて、phpでうんぬん分岐させレスポンシブ対応させてるテーマですね、Simplicityは❦
- デバイスの幅によってビューポートで切り分けて云々。
- 色々と、～ 略 ～
- モバイル、PC専用のCSSに分かれているから、そこにstyleを書く。
下記のCSSの中に、上述している『メディアクエリ』も使えますよね。
- editor-style.css
エディター画面のためのスタイル。- mobile.css
モバイル端末用のスタイルシート。- responsive.css
レスポンシブデザイン用のスタイルを書くためのスタイルシート。- style.css
デフォルトで使用されるスタイルシート。
複雑ですけど、Simplicity2のheadr.phpを眺めて書かれてるファイルへ飛んで、じっくり見ていくと、phpの勉強にもなるテーマですね。習うより慣れろから初めてみるのもアリですよぉ（笑
メディアクエリを書いた後、色んなデバイスから検証する2つの方法
画面サイズに合わせて、Styleが決まったけど、他のスマホではどんな表示になるか、気になるとき確認したい場合、ブラウザの機能、要素の検証で確認できます。
スマホマークをクリックして上の方をゴニョゴニョしたら、iPadやiPhone、Galaxyなど色んなデバイスでの表示のされ方を見ることが出来ますよ。使い方は下記をどうぞ。
LINK初心者が要素の検証でカスタマイズできる方法！HTMLとCSS入門編
また、表示させたいURLを入れたら、デバイス幅にあった表示の確認ができるオンラインツールもあるので、試してみてくださいね＾＾
Responsive Checker｜レスポンシブデザインの検証サービス
さいごに
現状は、レスポンシブwebデザインって、ほぼ完ぺきに作られてます。自分でカスタマイズしたとき、使ってる環境に合わせて微調整していく時、このメディアクエリを使って、ご自身で対応できればっ♪と思い書きました。
うまく反映されない。上書きが出来ないときは、セレクタやプロパティの指定方法が間違ってるとか、コメントアウトの中に書いちゃってるほか、CSSには優先順位が関係してることもあります。
HTMLと、指定したセレクタを少しだけ強くすれば、反映する場合もあるので、一度読んで試してくださいね＾＾
LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは
ブログにまつわる、エトセトラ。知らないことが沢山あって、面白いですね！メディアクエリを使って沢山カスタマイズしてください(^^♪
それでは、かうたっくでした！
Comments