[CSS]Media Queries(メディア クエリ)を使用したデバイスごとの指定方法のまとめ

CSS3のMedia Queries(メディア クエリ)を使用して、デスクトップのブラウザ用をはじめiPhone, iPadなどのモバイル用にスタイルシートを分けるためのフレームワークを紹介します。

スタイルシートのキャプチャ

Hardboiled CSS3 Media Queries

[ad#ad-2]

スタイルシートの分け方は2種類あります。

プロパティ単位でデバイスごとにスタイルシートを設定

「/* Styles */ 」の箇所にスタイルシートを記述。

スマートフォン((縦長・横長)

スマートフォン(横長)

スマートフォン(縦長)

iPad(縦長・横長)

iPad(横長)

iPad(縦長)

デスクトップのブラウザ用(横長)

大きいモニター用

iPhone4などの高解像度用

[ad#ad-2]

ファイル単位でデバイスごとにスタイルシートを設定

1ファイルをそのデバイス用にする場合は、link要素に設定する方が便利でしょう。

スマートフォン((縦長・横長)

スマートフォン(横長)

スマートフォン(縦長)

iPad(縦長・横長)

iPad(横長)

iPad(縦長)

デスクトップのブラウザ用(横長)

大きいモニター用

iPhone4などの高解像度用

サイトではプロパティ単位のスタイルシートをまとめたファイルがダウンロードできます。
Hardboiled CSS3 Media Queries

sponsors

top of page

©2018 coliss