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 2020 eo
  プロフィール  PR:無料HP  免許合宿 格安  ゲーム 専門学校  スタッドレスタイヤ 格安  中古ホイール 群馬  タイヤ ヴィッツ 格安  体育教員 大学  激安中古ホイール  不動産 収益  物流 東京  新生ジャパン投資 口コミ  タイヤ 履き替え 豊橋市  バイアグラ 効果