| 6. スタイルシート |
|---|
|
必修 |
|
付録 |
スタイルシートとは, HTML 文書の文字の書体や色, 上下左右の余白(マージン)などのデザイン (書式)を指定するためのものです.
HTML のバージョンが上るにつれて, HTML の文書構造(見出し, 段落, 箇条書など)だけでなく, 文字の書体や色などの書式を指定するタグが追加されるようになりました. しかし, HTML ファイル中に構造と書式が混在することで以下のようなデメリットが生じるようになりました
スタイルシートの標準として用いられているのは W3C が策定した「CSS」 (Cascading Style Sheet) です. CSS には現在 3 つのレベルが定義されています.
CSS では以下のような形式で, 書式を指定する対象と設定する項目/値を指定します
セレクタ{ プロパティ: 値; プロパティ: 値; ...}
|
具体例を以下に示します.
body{ margin: 10px;}
|
p{ font-size: 12pt; color: blue;}
|
HTML 文書内で CSS を適用させるには 3 つの方法があります.
これは HTML タグ内で直接 CSS を適用する方法です. 以下のように指定します.
<XX style="プロパティ : 値; プロパティ : 値; ...">... |
この場合 HTML 文書内で文書の構造と書式が混在することになるので, CSS を用いるメリットがあまりありません. よってこのような使い方はあまり推奨されません.
これは 1 つの HTML 文書の中だけで CSS を適用する方法です. 以下のように指定します.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
セレクタ{ プロパティ: 値; プロパティ: 値; ...}
セレクタ{ プロパティ: 値; プロパティ: 値; ...}
...
-->
</STYLE>
</HEAD>
...
</HTML>
|
HTML の HEAD タグ内に "STYLE" 要素を作り, スタイルシートを記述します. スタイルシート部分が "<!-- ... -->" で囲まれているのは, スタイルシートに対応していないブラウザではコメント行として扱われるようにするためです.
HTML 文書とは別に CSS だけを記述したファイル(以下これを CSS ファイルと呼びます) を作成しておき, それを HTML ファイルから読み込んで CSS を適用する方法です. 以下のように指定します.
<HTML> <HEAD> <LINK REL="stylesheet" HREF="CSS ファイルの URL" TYPE="text/css"> ... </HEAD> ... </HTML> |
「埋め込みスタイルシート」の場合と同様に, HEAD タグ内で指定します. ただしこの場合は "STYLE" 要素ではなく "LINK" 要素を用います. "HREF" の値で指定される CSS ファイルには, 「セレクタ{ プロパティ: 値; プロパティ: 値; ...}」の部分を列挙しておきます. CSS ファイルの名前には拡張子 ".css" を付けるのが慣例となっています. CSS ファイルは HTML ファイルと同じ WWW サーバ内ファイルでも外部の WWW サーバのファイルのどちらも指定することができます.
HTML ファイルと CSS ファイル (style.css) が同じディレクトリにある場合はこのように指定します
<HTML> <HEAD> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> ... </HEAD> ... </HTML> |
ファイルの指定は相対パスでも絶対パスでも可能です. ただし絶対パスで指定する場合は apache の設定ファイル /etc/apache2/sites-available/default の "DocumentRoot" ディレクティブで指定されたディレクトリをルートディレクトリとして見た場合の絶対パスに なります.
別の WWW サーバにある CSS ファイルを読み込む場合は以下のように指定します.
<HTML> <HEAD> <LINK REL="stylesheet" HREF="http://wwww.hoge.hero.jp/css/style.css" TYPE="text/css"> ... </HEAD> ... </HTML> |
この場合, 別の WWW サーバにある CSS ファイルの利用許可を得ておく必要があります. 無断で利用するのはやめましょう.
上記の 3 つの方法は併用することもできます. このとき同じセレクタのプロパティに対し異なる値が設定され, 競合することが起こりえます. その場合の優先順位は
ここでは CSS ファイルの具体例を見ていきます. じつはこの文書も CSS ファイルを使用しています. URL は http://www.ep.sci.hokudai.ac.jp/~inex/y2013/css/jitsugi.css です. このなかから基本的なタグに対する書式について抜粋して解説します.
BODY{ 本文に対する書式
background: white; 背景色を白に指定
}
H1{ 見出しに対する書式
font-size: 200%; 文字サイズを 2 倍に
background: #CCCC99; 背景色に関する標準値を #CCCC99 (若草色)
width: 100%; H1 タグのボックス幅をブラウザ幅と同じに
border-style: solid; ボーダー(本文を囲む枠線)を実線に
border-width: 1; ボーダー幅を指定(最も細いレベル)
border-color: white; ボーダーの色を白に指定
padding: 5px; 内容とボーダーとの間の余白を 5 ピクセルに
}
STRONG{ 強調に対する書式
font-weight: normal; 文字の太さを標準値に指定
color: red; 文字の色を赤に指定
}
P{ 段落に対する書式
line-height: 1.3em; 行の高さを 1.3em (1.3 文字分)に指定
text-indent: 1em; 一行目の字下げを 1em (1 文字分)に指定
}
|
この文書の CSS ファイルを変更した場合に書式がどのように変化するか, 以下のリンクをたどってその違いを実感してください.
CSS のプロパティとその値は非常に多く定められています. その全てをこの文書で解説することはできませんので, より詳しく知りたい方のために参考文献を挙げておきます.
| 最終更新日： 2013/07/09(小高 正嗣) | Copyright © 2000-2013 inex |