Web Survive

Webで生きる道を模索するブログ

CSSの適用方法

HTMにCSSを適用する方法

HTMLにCSSを適用する方法には、次の4つがあります。

①link要素でCSSファイルを読み込む

②@importでCSSファイルを読み込む

③style要素でcssソースを指定

④style属性でCSSソースを指定

これらの中では、①や②のようにCSSファイルを読み込む方法が望ましく、
③や④のようにHTMLにそのままCSSを記述する方法は望ましくありません。
構造に関係のないCSSの内容がHTMLに書かれてしまうと、
構造と見た目の分離が徹底できないからです。

また、そもそも③や④のスタイルはそのページでしか有効でなく、
サイト全体でCSSを一括管理できなくなり、
メンテナンス性が低下するという大きなデメリットがあります。
あくまで一時的・限定的な利用にとどめておきましょう。

CSS内での文字コードの指定

①や②の方法で読み込むCSSファイルの1行目には、
「@charset”…”」と文字コードを指定しておくのが一般的です

CSSファイルで文字コードを設定(必ず1行目に)

日本語ページの場合は「UTF-8」「Shift_JIS」「EUC-JP」などの
文字コードが利用されます。
あくまでCSSファイルで使用する文字コードであり、
HTMLの文字コードとは関係ありませんが、特に理由がなければ
同じ文字コードを指定しておきます。
なお、「@charset”…”」より前に、
セレクタやプロパティ、コメントなどを書くことはできませんので、
必ず1行目に書くと覚えておきましょう。

CSSを適用するメディアの種類

CSSを適用するメディア(デバイスやソフトウェア)を指定することもできます。
たとえば、「screen」はパソコンのモニタに、
「print」はプリンタなどの印刷メディアに、
「handheld」は携帯端末にCSSを適用するための値です。

パソコンのモニターやプロジェクターにCSSを適用

テレビ・テレビゲーム機にCSSを適用

プリンタなどの印刷メディアにCSSを適用

携帯端末にCSSを適用

これらの値のことを「メディアタイプ」といいます。
CSSを読み込むlink要素にmedia属性をつけ、
値としてこれらのメディアタイプを指定する方法が一般的です。
例えば、「media=”screen”」のようにです。
カンマ区切りで複数のメディアタイプを同時に指定することもできます。
例えば、「media=”screen,projection”」と指定します。
@importや@mediaでもメディアタイプは指定できますが、
詳しくは後ほどご紹介します。

実務的には、Webサイトをどのメディアに対応させるかは、
ターゲットユーザーの利便性を考えて決定します。
自宅や会社でパソコンを使ってアクセスするユーザーが大多数であれば、
「screen,projection」や「print」だけの対応でよい、という判断もありえます。
外出先で携帯端末を使ってアクセスするユーザーが多ければ、
「handheld」にも対応しておくと利便性が高まるでしょう。
また、Nintend Wilなどのテレビゲーム機には
ブラウザをインストールすることができ、
メディアタイプ「tv」に対応していますので、
テレビ画面専用のCSSを用意することで、
それらのユーザーが使いやすいページを提供することもできます。

正しいHTML+CSSによるWebページは、
そもそもメディアを問わないのが「筋」です。
CSSを適用しなくても、
どのデバイスやソフトウェアでもコンテンツが表示・表現され、
情報が得られるのが当たり前なのです。
しかし、すでに述べたとおり、
見た目はユーザビリティにも大きく影響するため、
このようにデバイスごとに最適化したCSSを用意することで、
ユーザーがそのWebサイトをいっそう利用しやすくなるのです。

メディアタイプ

メディアタイプ

デバイスやソフトウェア

all

すべてのメディア

screen

一般的なパソコンのモニタ

projection

プロジェクター・映写機など

tv

テレビ・テレビゲーム機など

handheld

携帯電話

try

固定ビッチフォントで表示される端末

print

プリンタ(印刷プレビューなどを含む)

speech

音声読み上げ(音声ブラウザなど)

braille

点字ピンディスプレイなど

embossed

点字プリンタなど