[CSS]HTML5対応、さまざまなデバイスのMedia Queriesを使ったリセット用スタイルシート -320 and up

Post on:2011年4月14日

CSS3のMedia Queriesを使ってさまざまなサイズのビューポートを想定した、リセット用のスタイルシートを紹介します。

サイトのキャプチャ

320 and up

[ad#ad-2]

Media Queriesとはビューポートのサイズやカラーなどユーザーの環境ごとに異なる最適なスタイルシートを条件式のように適用できるもので、下記のようにブラウザのサイズを変更すると、レイアウトがそれに合わせて最適なものを提供できるようにすることができます。

サイトのキャプチャ

サイトを1024x768で表示したデザイン

サイトのキャプチャ

サイトを640x480で表示したデザイン

Media Queriesの詳しい説明は、以前の当サイトの記事も参考にしてください。

[ad#ad-2]

320 and upのスタイルシートの構成

スタイルシートの構成は、最小限なものとなっています。

  • リセット用のスタイルシート
  • カラー用のスタイルシート
  • タイポグラフィ用のスタイルシート

Media Queriesで予め用意されているのは、下記のサイズです。

  • 480px
  • 768px
  • 992px
  • 1382px

320 and upでは、2つのバージョンが用意されています。

  • ビューポートのサイズのそれぞれのスタイルシートが分かれたタイプ
  • 一つのスタイルシートにまとめられたタイプ

分かれたタイプ：HTML

サイズごとにスタイルシートを分けて管理します。

<link rel="stylesheet" media="only screen and (min-width: 480px)" href="css/480.css?v=1">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css/768.css?v=1">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="css/992.css?v=1">
<link rel="stylesheet" media="only screen and (min-width: 1382px)" href="css/1382.css?v=1">

まとめられたタイプ：CSS

一つのファイルにまとめて管理します。それぞれストラクチャが用意されています。

/*480px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 480px) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/

sponsors

top of page

©2024 coliss