オンラインテキスト目次Webページの作成目次
HTMLは文章の論理構造を示すだけの記述方法であり、画面上の見栄え・レイアウトとは本来無関係である。 文字を大きくするためだけに<h1>タグを使ったりしてHTMLタグを見栄えのために利用したWebページはHTMLとして誤った記述であるといえる。
スタイルシートとは、文、見出し<hn>、段落<p>、引用ブロック<blockquote>、文章グループ<div>などのHTML文書の論理的構成要素を、画面や印刷出力時にどのように表示・レイアウトするかを指定する機能である。
スタイルシート記述言語としてW3CがとりまとめているCSS(Cascading Style Sheet)が広く用いられている。
スタイルシートは論理構造と表現指定を分離することで、次のような利点をもたらす：
CSS スタイルシートでは、
セレクタ {属性1: 値1; 属性2: 値2; ....}
|
セレクタは、下のスタイルシートの例にあるように、
タグ. クラス名タグ# id名目次
あるHTMLファイルに次のようなスタイルシートによるスタイルを適用したい：
セレクタa {属性a1: 値a1; 属性a2: 値a2; ....}
セレクタb {属性b1: 値b1; 属性b2: 値b2; ....}
....
このためのスタイルシートの設定には次の3つの方式がある。
<head>
<link rel="stylesheet" href="スタイルファイルのURL">
</head>
|
別に用意したスタイルファイル（拡張子は.css）には次のようにスタイルを記述しておく。
セレクタa {属性a1: 値a1; 属性a2: 値a2; ....}
セレクタb {属性b1: 値b1; 属性b2: 値b2; ....}
....
|
<head> <style type="text/css"> セレクタa {属性a1: 値a1; 属性a2: 値a2; ....} セレクタb {属性b1: 値b1; 属性b2: 値b2; ....} .... </style> </head> |
<body>...</body>内で次のように書く。
優先度が最も高いので、特定の個所についてのスタイルを変更する場合に便利である。
<body> .... <セレクタa style="属性a1: 値a1; 属性a2: 値a2; ...."> .. <セレクタb style="属性b1: 値b1; 属性b2: 値b2; ...."> .... </body> |
スタイルシートをHTMLファイル内でまとめて設定する方式のHTML例を次に示す。
string
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>情報太郎のページ</title>
<meta http-equiv="Content-Type" content="text/html">
<meta name="author" content="Joho Taro">
<style type="text/css">
h1 {font-size: 14pt; background-color: aqua}
h2 {font-size: 12pt; background-color: green}
h1.blue {font-size: 14pt; color: blue}
span.red {color: red}
</style>
</head>
<body>
....
<h1>サイズ14ptでaqua色の背景</h1>
....
<h2>サイズ12ptでgreen色の背景</h2>
....
<h1 class="blue">サイズ14ptのblue色の文字</h1>
......
<span class="red">赤い文字列</span>
.......
</body>
</html>
|
この例では、<h1>が使われる見出しでは14ポイントの文字サイズで背景色がAqua色で表示され、
<h2>が使われる見出しでは12ポイントの文字サイズで背景色がgreen色で表示されるスタイルを指定している。
ただし、<h1>の見出しタグでも、<h1 class="blue">とクラス属性を指定している場合には、14ポイントでblue色のフォントが使われるようにスタイルを指定している。