[CSS] メディアクエリ(Media Queries)を考える
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
Media Queriesとは
Media Queriesとは、画面環境に応じてCSSの適用範囲を切り替える機能のことをいいます。
実際にレスポンシブウェブデザインと言われるものは、このMedia Queriesをうまく使い分けて画面幅に合わせた見た目を表現しています。
現在、スマートフォンの数はとてもたくさんあります。
そして、画面解像度は、どんどん精細なものになってきております。
Xpeeria Z1などは、縦が1920pxもあります。
これは、24インチの液晶モニターの横幅に相当します。
こんなことは、ガラケー全盛の時代には考えられないことでした。
そして、Webの世界では、この画面の高精細化が以外と厄介な問題になりかねません。
ただし、その辺はしっかり考えられているようで、iPhoneでは横幅が320px、Androidでは横幅が360pxとなっているようです。
どのように対応するか
まず、端末に合わせた横幅だよと認識させるためのソースを記述しなければなりません。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
このviewportを設定しておく事で、画面幅を端末の決められた数値として設定されます。
device-widthとなっているところを任意の数値で横幅はこの数値で表示してね!と決める事もできます。
ここからがMedia Queriesの書き方になりますが、方法が2種類あります。
読み込むスタイルシートを振り分ける方法
<link rel="stylesheet" href="pc.css" media="(min-width:769px)"> <link rel="stylesheet" href="tb.css" media="(max-width:768px) and (min-width: 321px)"> <link rel="stylesheet" href="sp.css" media="(max-width:320px)">
このようにmedia属性で振り分ける事ができます。
ファイルの数は増えますが、1ファイルの記述量が多くはならないし、スマホの表示がおかしければsp.cssを修正するだけなので、結局のところファイルが分かれている方が管理しやすいかもしれません。
1つのスタイルシート内で記述を分ける方法
@media(min-width:769px){ h1{...} h2{...} .wrapper{...} #main{...} } @media(max-width:768px) and (min-width: 321px){ h1{...} h2{...} .wrapper{...} #main{...} } @media(max-width:320px){ h1{...} h2{...} .wrapper{...} #main{...} }
こういう風になります。
この方法は、CSSの行数がかなり多くなり(実際の案件でも5000行近くいきました)修正箇所を探すのが大変になります。
なので、慣れていない人にはオススメはできません。
数あるスマホやタブレットにどう対応するか
先述したとおり、iPhoneは320px、Androidは360pxというデフォルト値がありますので、縦での表示は360pxを分岐点にするのがいいでしょう。
タブレットは、ある程度の妥協点を作るしかありません。
たとえば、iPadを基準にしてしまうのもいいでしょう。
そうすれば、iPadは横が768pxですから(上の例でもそこが基準になっています)、それ以上の大きさのタブレットでは、PCサイトと同様のレイアウトにしてしまっていいでしょう。
それだけのサイズもありますし、見にくさが先行する事もないでしょう。
まとめ
今回紹介した方法以外にも、Media Queriesの方法はあります。
今回は、一般的によく使われる方法を紹介しました。
もっと管理しやすい方法があるかもしれませんので、調べてみてください。
ad
関連記事
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ
-
[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)
まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹