site_make

メディアクエリの使い方

2015-02-07

メディアクエリとは

mediaqueries

メディアクエリとはいろいろな条件分岐により、読み込むcssファイルを細かく選択ができる機能です。
イラストサイトでも「PCのときはこのサイズでスマホのときはこのサイズ」とか選べたら見やすいイラストギャラリーが作れます。
レスポンシブデザインでは必須になってきます。
使うのはとても簡単ですのでこの機会にとりあえず使ってみましょう。
大まかにはPC用(~980px)、タブレット用(800~480pxほど)、スマホ用(480~320px)くらいの3パターンで切替ができればレスポンシブは出来たも同然ですからね。

レスポンシブデザインとは

レスポンシブデザインとは画面幅が違うディスプレイでも1つのhtmlで対応するデザインです。スマホやPCだけでも大きさはいろいろありますよね。
そんなときに条件に合わせてレイアウト(css)を切り替えて綺麗なデザインで見せていくのがこの方法です。
しかも、TVでも見ている方も多いでしょうからそういうところまで切り替えられるのが「メディアクエリ」というわけです。

メディアクエリの使い方

まずはhtml、head内でcssを読み込むときのメディアクエリ表記です。media=”***”のところを追加するだけですね。簡単です。


 <link type="stylesheet" src="***.css" media="screen and (max-width:980px)">

これは「パソコンなどのスクリーン」で「最大幅980px」まではこのcssを読み込むということになります。ほとんどの分岐がこのパターンですね。他にもテレビや印刷するとき、プロジェクターなんていうことでも指定できます。いっぱいあるので特殊な場合はググって下さい。

次はcss内に書き込むときの方法です。


 @media screen and (max-width:980px){
	 ここにいつも通りのcssを
 }

意味は同じですね。こんな感じで括って書きいていきます。
ようするにまとめてしまうとcssファイルごとに書きわけるのか、1つのcssファイル内で書くかの違いです。
ブラウザが縦長なら「portrait」、横長なら「landscape」なんて書いたりもできますし、「(max-width:980px) and (min-width:480px)」なんて組み合わせで条件をつけることもできます。
しかし、ie8では対応していませんので注意して下さい・・・。

参考サイト

copyright 2017 eo
  プロフィール  PR:無料HP  湯沢自動車学校  ゲーム 制作  IID  中古ホイール 三重  タイヤ 格安  Webディレクター 専門学校  BATTLEZ  秩父自動車学校  水晶  長崎 合宿免許  音楽 専門学校 福岡  ランドクルーザー トヨタ 中古  リノベーションセミナー