「メディアクエリ」CSSだけでパソコン・タブレット端末・スマホ表示を切り替える方法

responsive

Googleが検索結果においてWEBサイトがモバイルフレンドリーかどうかを判断する基準にていていると2015年4月21日に発表しました。スマホでみたときにWEBページのデザインがデバイスサイズに適当しているかというものです。

これは全世界で実装されたことで、モバイルフレンドリーに対応していないWEBサイトは検索順位がさがる可能性があります。

今回このような記事をかこうと思ったのはモバイルフレンドリーを詳しくなるためではありません。WordPressのテーマによっておそらく対応しているのでしょう。

SPONSORED LINK

photo by Tim RT

▼目次

  1. レスポンシブWEBデザイン
  2. メディアクエリ / Media Queries
  3. まとめ

以前こんな記事を紹介しました。

これはPHPファイルのみでスマホ (タブレット端末) とパソコン表示を切り替えるというものです。この方法を知っていると結構自由にカスタマイズをすることができます。

CSSでスマホとパソコンの表示を切り替えて、自由自在にカスタマイズしたいというのが今回の目的です!レスポンシブWEBデザインというものですね。

レスポンシブWEBデザイン

device

そうした流れもあり様々なサイズの端末が増えたことにより注目されたのがレスポンシブWEBデザインです。略してRWDともいわれます。これはパソコン、タブレット端末、スマホなどのことなるサイズでもそれぞれの画面サイズにあわせて調整して表示するという手法になります。

レスポンシブWEBデザインの特徴が一つのHTML、CSSで異なるデバイスに適応した表示をするというものです。それを実装しているのがメディアクエリになります。

photo by Jeremy Keith

メディアクエリ / Media Queries

CSS2ではメディアタイプによってパソコン画面、テレビ画面、印刷用と媒体別に設定することができました。メディアクエリとはその拡張版でCSS3からあります。

▼メディアタイプの記述例

<link rel=”stylesheet” href=”screen.css”
type=”text/css” media=”screen”>

メディアクエリはデバイスの種類で画面サイズを区別しているわけではなく、画面サイズによって表示を切りかえています。パソコン画面だとサイドバーが横にきていてスマホ画面でみるとサイドバーがページの一番下にきているのはこのメディアクエリによるものです。

WordPressではレスポンシブに対応しているテーマを選択すればそれでOKです。ただしそのテーマデザインをカスタマイズしたいという場合は自分自身で記述する必要があります。

【IE8への対応】

IE8以前のバージョンはメディアクエリに対応していません。この問題の対策をどうするかということですが、すでにIE8、IE9、IE10は2016年1月12日にサポートが終了しているのです。

自分のGoogleアドセンスの「ユーザーの環境」→「ブラウザのOS」からバージョンごとのユーザー数を確認できるので一度してみるといいかもです。僕の場合IE全体ユーザーのうち2%程のユーザーがIE8以前のバージョンでした。もちろんどのバージョンよりも圧倒的なのがIE11でした。

IE8以前の2%のシェアをどうするかというところですが、すでにサポートが終了していてその今後というのを考えると対応する必要はないような気もします。

ブレークポイント

ブレークポイントというのはパソコンやスマホによってどのサイズで切りかえるかというポイントです。例えば幅が768px以上だとタブレット端末表示に切りかえ、980px以上はパソコン表示に切りかえるといった切りかえるポイントがブレークポイントです。

確認したらこのブレークポイントはサイトによってまちまちなようです。ここが迷いところですよね。どのサイズにすればいいのかこんがらがってしまいます。

これは運営サイトがAndroid向けなのか、Mac、iPhone向けなのかとかによっても変わってくるでしょうし、自分が運営するサイトの訪問ユーザーに合わせればいいのではないのでしょうか。

解像度は、Googleアドセンスの「ブラウザとOS」→「画面の解像度」で確認することができます。これはサイトによっても違うのでしょうが僕の場合は「1920(幅)x1080(高さ)」が圧倒的に多いです。この大きさはパソコンですね。

スマホでは「320×568」あたりが一番多いです。「320×568」はiPhone5からのアクセスとなります。

デバイス別にまとめるとこの位のサイズです。

  • 「スマホ」… 480px
  • 「タブレット」… 768px
  • 「パソコン」… 1024px~

僕が記述したコードはこちらです。

@media screen and (min-width: 980px) {
ここにCSSを指定
} /* パソコン表示 */
@media screen and (min-width: 768px) and (max-width: 979px) {
ここにCSSを指定
} /* タブレット端末表示 */
@media screen and (max-width: 479px) {
ここにCSSを指定
} /* スマホ表示 */

【ポイント】

「min」と「max」の違いに気をつけましょう。

  • 「min-width」… ○○px以上
  • 「max-width」… ○○px以下

ちなみにメタで「viewport」を指定している必要があるようですよ。これはテーマによってはデフォルトで指定している場合もあります。コードを指定する前に事前確認しておいてください。

まとめ

当サイトが使っているテーマではこの「メディアクエリ」でもっと細かく指定してありました。今回子テーマで指定したら指定したところは上書きされたようです。

そして、僕はタブレット端末をもっていないのでタブレットの表示を確認することができないのです。これは端末を買わずともパソコン上で確認する方法があるようです。

それにしても、今タブレット端末がめっちゃほしいと思ってます!主にこうした自分のWEBページを確認するためですが、自分で楽しむためにもほしいのです(笑)

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!