メディア別のスタイル

デフォルトのスタイルシート言語の設定

HTML4.01やCSS2.1ではlink要素やstyle要素のmedia属性、CSSの@mediaや@importにメディアタイプを指定し、各メディアに対応したスタイルを指定することができます。例えば、コンピューターのディスプレイ用と印刷用にそれぞれ異なるフォントを適用したい場合、次のような方法があります。

link要素を使用

<link rel=”stylesheet”type=2text/css”media=2screen”href=2sans-serif.css”>

<link rel=”stylesheet”type=2text/css”media=”print”href=serif.css”>

@mediaを使用

@media screen{⋆{font-family:sans-serif;}}

@media screen{⋆{font-family:serif;}}

現在CSS2.1で規定されているメディアタイプは以下の通りです。一般的なホームページでは「all」「handheld」「print」「screen」が良く利用されています。複数のメディアを指定する場合には、カンマで区切って並べます。

all すべてのメディア brille 点字ディスプレイ embossed 点字プリンタ handheld 携帯端末 print プリンタ projection プロジェクタなど speech 音声合成装置 screen 一般的なコンピューターのディスプレイ tty 文字幅が固定のメディア tv テレビ

●ボックスモデル

CSSでは、各要素がボックスと呼ばれる四角い領域を生成し、この領域や領域を囲む枠線に対して大きさや色、位置などの指定をすることでスタイルを変更します。ボックスは内容領域、マージン、パディング、ボーダーから構成されています。この4つの部分と、背景色、背景画像との関係を表すと次のようになります。

内容領域:テキストや画像など要素の内容が表示される領域です。widthプロパティやheightプロパティでサイズを指定することができます。

パディング:内容領域とボーダーとの間の余白領域です。要素に指定した背景色や背景画像はこの部分にも適用されます。

ボーダー:要素の周りに表示される枠線で、パディングの外側に設定されます。要素に指定した背景色や背景画像はこの部分にも適用されるのでボーダーを透明にすると背景が透けて見えるようになります。

マージン:ボーダーの外側に設定される余白領域です。要素に指定した背景色や背景画像はこの部分には適用されず、背景は常に透明になります。そのため、親要素に背景が設定されている場合には、その背景が透けてみえることになります。

背景色・背景画像:要素に指定した背景色や背景画像は、要素が生成するボックスの内容領域、パディング領域、ボーダー領域に表示されます。背景色と背景画像は、背景色の上に背景画像が表示されるという関係になっています。そのため、指定した背景画像が利用できる場合には背景画像が前面に表示され、画像に透明な部分があればそこについては背景色が透けて見えることになります。