レスポンシブWebデザインのCSS判別記述方法

12月 13th, 2012 | Posted by miacis in Whatsnew | ホームページ作成

レスポンシブWebデザインのCSS判別記述方法

アクセスしたブラウザの横幅に合わせたCSSを読み込ませる方法を記述します。
3種類の書き方がありそれぞれ書いてみます。
 
 
【その1】HTMLのヘッダーで区別させる方法
HTMLの<header>~</header>内に以下を記述して区別します。
 
—————–
<link rel="stylesheet" media="screen and (min-width: 769px)" type="text/css" href="pc.css" />
<link rel="stylesheet" media="screen and (max-width: 768px)" type="text/css" href="tb.css" />
<link rel="stylesheet" media="screen and (max-width: 640px)" type="text/css" href="sm.css" />
—————–
 
説明すると次の様になります。
ブラウザの横幅が769px以上の場合「pc.css」を
ブラウザの横幅が768px以下の場合「tb.css」を
ブラウザの横幅が640px以下の場合「sm.css」を適応となります。
 
 
【その2】CSSファイル内で区別させる方法
~.css内で以下のように記述することで「その1」と同じ判別ができます。
一つのCSSファイルで済ます場合はこの方法になります。
 
—————–
@media screen and (min-width: 769px) {
/* ここにスタイルを記述 */
}
@media screen and (max-width: 768px) {
/* ここにスタイルを記述 */
}
@media screen and (max-width: 640px) {
/* ここにスタイルを記述 */
}
—————–
 
 
【その3】「import.css」インポートで区別させる方法
メディア別に記述するスタイル部分は少ない方が理想ですがデザインによりそうも言ってられないと思います。この方法が私は一番スッキリする気がして好んで使っています。
 
「import.css」などインポート用CSSに次の行を記述します。
 
—————–
@import url("pc.css") screen and (min-width:769px);
@import url("tb.css") screen and (min-width:641px) and (max-width:768px);
@import url("sm.css") screen and (max-width:640px);
—————–
 
このように記述することで「その1」と同じ判別ができます。
 
 
タブレット端末、スマートフォン端末向けのCSSの記述ポイントなどはまた次の機会に~
 

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

Leave a Reply