【CSS3入門シリーズ】レスポンシブデザインを実現するCSS3メディアクエリ_html/css_WEB-ITnose

CSS2 では、さまざまなメディア デバイス (スクリーン、プリンターなど) に専用のスタイル シートを指定できますが、 CSS3 のメディア クエリ機能を利用することで、この機能をより効果的に実現できるようになりました。メディア タイプに特定の条件を追加したり、デバイスを検出したり、さまざまなスタイル シートを適用したりできます。

たとえば、大画面で表示するためのスタイルやモバイル デバイス用の特別なスタイルをスタイル ドキュメントに配置すると、ドキュメントの内容を変更せずに、さまざまなデバイスで異なるインターフェイスの外観を表示できます。この記事を読んで、CSS3 Media Queriesの基本機能と、CSS3のMedia Queries機能を使用した優れた海外Webサイトの事例を学びましょう。

このオンライン デモをチェックし、ブラウザ ウィンドウのサイズを変更して、どのように変化するかを確認してください。

最大幅

表示領域の幅が 600px 未満の場合、次のスタイルが適用されます。

1

2

3

4

5

@media screen と ( max-width : 600px ) {

.class {

背景 : #ccc

}

別のスタイルシートにリンクしたい場合は、 タグ内に次のコードを記述します。

1

最小幅

表示領域の幅が 900px を超える場合、次のスタイルが適用されます。

1

2

3

4

5

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

.class {

背景 : #666

;

複数のメディアクエリ

表示領域の幅が 600px から 900px までの場合、次のスタイルが適用されます。

1

2

3

4

5

@media screen と ( min-width : 600px ) と ( max-width : 90 0px ) {

.class {

背景: #333 ;

}

}

デバイス幅

次のスタイルは、max-device-width が 480px のデバイスでトリガーされます。 (ヒント: Max-DEVICE-WIDTH はデバイスの実際の解像度であり、Max-Width は表示領域の解像度を指します。) @media screen と (max-device-width : 480px ) {

.class { 背景 : #000 ;

}

}

iPhone 4 用

以下のスタイルは iPhone 4 用に特別に書かれています (著者: Thomas Maier)。

1

iPad の場合

iPad でメディア クエリを使用して方向 (ポートレートまたはランドスケープ) を検出することもできます (作者: Cloud Four)。

1

2

IE のメディア クエリ

残念ながら、IE8 以前のブラウザは CSS3 メディア クエリをサポートしていませんが、JavaScript は使用できます。それを補うための解決策をいくつか紹介します:

CSS トリック - jQuery を使用してブラウザ サイズを検出する

The Man in Blue - Javascript を使用する

jQuery メディア クエリ プラグイン

添付ファイル: CSS3 メディア クエリ ブラウザ互換性テーブル

CSS3 Media Queries アプリケーションケース

Media Queries 機能をサポートするブラウザーで表示する必要があります: IE9+、Firefox、Chrome、Safari。各サイトを参照して、ブラウザ ウィンドウの変更にページ レイアウトがどのように反応するかを確認します。

Hicksdesign

大きいサイズ: 3 列のサイドバー

小さいサイズ: 2 つのリスト サイドバー (中央の列が左の列にドロップ)

小さいサイズ: 1 列のサイドバー (右の列 ロゴの上と下に移動) )

最小サイズ: サイドバーなし (ロゴと右の列が上に移動し、他のサイドバーの列が下に移動します)

Colly

ページのレイアウトはブラウザのサイズに基づいて切り替わります。 1列、2列、4列。

A List Apart

大きいサイズ: ナビゲーションは上部にあり、画像は 1 行のみです。

中サイズ: ナビゲーションは左側にあり、画像は 3 列になります。

小さいサイズ: ナビゲーションは上部にあり、ロゴには背景画像がなく、画像は 3 列になります。

Tee Gallery

これは以前のCollyと非常によく似ていますが、この場合の写真もレイアウトの変更に応じて変わります。秘訣は、パーセンテージを使用して要素の幅を設定することです。

概要

覚えておいてください: スタイルシートがモバイル デバイス用に最適化されているからといって、サイトがモバイル デバイスでの表示に適しているとは限りません。真にモバイルに最適化するには、画像サイズ、タグの数、ロードされるアセットのサイズなどを減らします。 CSS3 メディア クエリは、最適化ではなく、デザインのプレゼンテーションを目的としています。