*

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

公開日: : 最終更新日:2014/10/26 サイト制作


LINE facebook twitter URLコピー
B! pocket Evernote 楽天



アマゾン春のタイムセール祭り 4/23 23:59まで
セールを詳しく見る

家電&カメラ タイムセール/バーゲン会場/クーポン配布はこちら。
Amazonでクーポンをもらう

【Amazonファッション】メンズ80%オフ商品を見る!
セール商品を見る

レスポンシブデザインには欠かせません。

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

>>デモサイト

こちらのリンクをクリックし、開いたウィンドウのサイズを大きくしたり小さくしたりします。すると、大きさにおうじて文字サイズが変わります。

<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<head>
<style>
/* PC用 */
body{font-size:100%;}
/* タブレット用 */
@media (max-width: 768px) {
 body{font-size:250%;}
}
/* スマホ用 */
@media (max-width: 480px) {
 body{font-size:500%;}
}
</style>
</head>
<body>
よろしくお願い致します。
</body>
</html>

上記のコードでは、最大値768pxと480pxとで、表示の切替をしています。

メディアクエリーの書き方

@media screen and ( min-width:800px ){ 〜 }

としますと、表示幅が 800 ピクセル以上の場合、〜が適用されます。

省略して、

@media ( min-width:800px ){ 〜 }

このように書くこともできます。

minをmaxにすれば、800 ピクセル以下の場合適用されることになります。

もともとCSSで適用したデザインが、メディアクエリーで該当した場合、そのCSSも追加で、適用されることになります。

それでも完璧ではない

>>このスマフォ・タブレット用メディアクエリは危険!|Web制作 W3G

解像度を条件にしただけで特定のデバイスのみにスタイリングしようとするのには無理があります。メディアクエリ単独の使い方としては、Break Point(ブレイクポイント)として利用するか、高解像度用に画像を入れ替えるといったことに関しては非常に有効です。どうしてもスマフォのみやタブレットのみを目的としたスタイリングを行う必要がある場合は、やはりサーバサイドやJavaScriptに頼るべきです。

端末によって画面の解像度が違ったり、そして、ブラウザの利用する解像度も微妙に異なるなど、さまざまなケースが存在するようです。

実際、私もXperia ZのAndroid Browser ではまったことがありました(結局あきらめましたが)。

いろいろなテンプレートを見て、順番やかけ方などの引き出しを増やしたいものです。

「レスポンシブには欠かせない。」

関連するほかの記事を見てみよう!
このサイトのトップページへ行く

  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑