Firefox 3.5のCSS対応:Webフォント、メディアクエリ、セレクタ

エ・ビスコム・テック・ラボ
2009-07-09 21:33:01
  • このエントリーをはてなブックマークに追加

メディアクエリ @media

 CSS 3のメディアクエリに対応したことにより、出力先の横幅などに応じて適用するスタイルシートを切り替えることができるようになった。CSS 3の勧告候補「Media Queries」で定義されている機能だ。

 たとえば、次のサンプルでは画面の横幅に応じて文字の背景色が変わるようにしている。画面の横幅が400ピクセルより小さい場合は赤色で、大きい場合は黄色で表示される。

画面の横幅を400ピクセルより小さくした場合 画面の横幅を400ピクセルより小さくした場合
画面の横幅を400ピクセルより大きくした場合(画像をクリックすると拡大します) 画面の横幅を400ピクセルより大きくした場合(画像をクリックすると拡大します)
@media all and (max-width: 400px){

div{
background-color: red;
}

}

@media all and (min-width: 400px){

div{
background-color: yellow;
}

}

div{
padding: 30px;
text-align: center;
}
こんにちは
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]