HTML5+CSS3【マルチデバイス】―CSS3のメディアクエリ

メディアクエリとスタイルシート

• 横幅をいくつかの範囲にわけてデザインを切り替える
• 「CSS3メディアクエリ」を利用する

特定の画面サイズで表示したときに適用するスタイルシート

<link rel="stylesheet" href="スタイルシート名.css media="only メディアタイプ and (特性)" >

外部スタイルシートを読み込む

<link rel="stylesheet" href="外部スタイルシート名.css media="only メディアタイプ and (特性)" >

CSS内に設定を記述

@media only メディアタイプ and (特性)" {
　　　スタイルシートの設定
}

CSS内にから外部スタイルシートを読み込む

@media url("外部スタイルシート") only メディアタイプ and (特性);

メディアタイプの指定

メディアタイプ	デバイスの種類
all	すべて
screen	スクリーン
print	印刷
handheld	携帯機器
projection	プロジェクター
tv	テレビ
tty	文字固定のデバイス
braille	点字ディスプレイ
embossed	点字プリンタ
speech	音声

主な特性の指定

主な特性	閲覧環境の特性	値
width	画面（ビューポート）の横幅	数値
mini-width	画面（ビューポート）の横幅の最小値	数値
max-width	画面（ビューポート）の横幅の最大値	数値
orientation	デバイスの向き（横/縦）	landscape portrait

PAGE TOP