ホームページ制作,維持・保守
サーバーシステム構築・管理
ネットワーク構築・管理
IT環境サポート
インフラ構築サポート
ITアウトソーシング
HTMLプログラミング
ホーム > WEBプログラミング > HTML,CSS > CSS
HTML,CSS

反応型ウェブのためのメディアクエリー使用法(CSS media queries)

森之宮 0 94 0

メディアクエリーは画面(screen)、テレビ(tv)、プリンタ(print)のようなメディアタイプ(media type)と1つ以上の表現式(expression)で

構成されます。 

表現式はwidth、height、colorと同じメディアの特性(media feature)を利用してその特性の状態によって

他のスタイルシートを適用することができます。 メディアクエリーはCSS3に含まれており、

コンテンツの変更なしで主に画面の大きさによってスタイルシートを変更して適切な様子を見せることが可能です。


メディアクエリーは2つの方法で使用されます。



1つ目は

<link>要素を使って特性が条件に合った場合cssファイルを読み込みます。 

media属性の"screen and(max-width:768px)"の意味は、メディアタイプがスクリーンで画面の最大幅が768pxに指定することです。 

したがって、画面の幅768px以下の時が適用されます。


<link rel="stylesheet"media="screen and(max-width:768px)"href="mystyle。css"/>

 

2つ目は 

スタイルシート内で@mediaを使います。 

結果は1つ目と同一の条件であり、その条件が合えば{...}の中のスタイルが適用されます。


@media screen and(max-width:768px){ 

body{

background-color:lightgreen;

}

}

 

@media(max-width:768px){...}のようにメディアタイプを省略すれば、allが基本値になって全てのメディアタイプに適用されます。 

メディアタイプに使われる値は数種類があるが、ウェブサイトを制作ではscreenを使ったり、allを使ったりするのが一般的です。 

メディアの特性でmax-widthとmin-widthが最も一般的に使われます。 そのほかheight、color、orientation(画面の縦横方向)などがあります。 

反応型ウェブを制作する時スタイルを作成する基準で、モバイルを優先するのか、デスクトップを優先するかが先に考慮される方です。 

モバイルを優先する場合、次のような手順で作成します。 



/*モバイルに適用されるスタイルを先に作成します。 */


@media screen and(min-width:769px){

/*デスクトップで使用されるスタイルをここに作成します。 */

}

 


デスクトップを優先する場合には、次のような手順で作成になります。


/*デスクトップで使用されるスタイルを先に作成します。 */ 


@media screen and(max-width:768px){

/*モバイルに使用されるスタイルシートをここに作成します。 */

}

 

メディアクエリーはほとんどの最新のブラウザで問題なく作動します。 

インターネット・エクスプローラーは9バージョンからサポートされます。 

もし自分が制作する反応型ウェブがIE8以下でも作動しなければならないなら、

polyfillを使用しなければなりません。 



※参考:Polyfillはウェブ開発で、古いブラウザがサポートしない特性をサポートするようにしてくれる技術を意味します。




次は2つのIE8以下でメディアクエリーを使わせてくれるpolyfillです。 

このライブラらは、メディアクエリーを100%サポートする訳ではありません。

制限事項をよく確認しなければならないのです。


*respond.jsはIE 6~8バージョンでメディアクエリーを解釈できるように作ってくれるJavaScriptライブラリです。 

次のサイトからダウンロードができます(https://github.com/scottjehl/Respond/)。 

MITライセンスで配布されます。 



メディアクエリーを読み込むために@importと<style>要素は使用できません。 

<link>要素のmedia属性を使うか<link>要素で読み込むスタイルシート内でメディアクエリーを記述すればいいです。

テスト結果、安定的に動作をするようです。 ブラウザの大きさを縮めたり伸ばしたりする場合の反応も早い方です。 


-テスト用のスタイルシートです。(mystyle。css)


@media screen and(max-width:768px){ 

body{

background-color:lightgreen;

}

}

 

-スタイルを読み込む部分とrespond.min.jsファイルを含む部分です。 

この部分ではIE条件付きコメントを使いました。 

これはIEでは意味があり、他のブラウザではコメントとして処理されます。 

[if lte IE 8]の意味はIE 8より小さいか同じバージョンで実行されるという意味です。 

 


<link rel="stylesheet"type="text/css"href="。/mystyle。css"/>

<!--[if lte IE 8]>

<script type="text/javascript"src="。/respond.min.js"></script>

<![endif]-->

 


*css3-mediaqueries.jsはIE6-9までサポートするとドキュメントに書いてます。 

これもMITライセンスで配布されます。 

次のURLでダウンロードができます(https://github.com/weblinc/media-match)。




メディアクエリーを読み込むために@importと<style>要素、そして<link>要素のmedia属性は使用できません。 

<link>要素で読み込むスタイルシート内にメディアクエリーを記述しなければなりません。

このライブラリは詳しくテストしたませんが、

ブラウザでWindow大きさをドラッグしてリサイズするときの反応がかなり遅くなりました。 


反応型ウェブを制作する場合IE8以下のバージョンのインターネット・エクスプローラーのサポートは

CSSの問題だけでなく、JavaScriptおよびページがレンダリングされる様子も問題をたくさん起こします。 

反応型であろうがなかろうがIE8以下のインターネット・エクスプローラーはこれ以上使用しないことを制作者や

ユーザどちらにもお勧めします。

0 コメント