スタイルシートの簡単な利用

以下では、スタイルシートはHTMLファイル内でまとめて定義される方式に従って説明する。

スタイルの使い分け

ある要素タグのすべてに同じスタイル設定を行いたくない場合には、次のようにタグにclass属性やid属性を付与することで、自在なスタイル設定を行うことができる。

<タグa class="クラス名"> ..... </タグa>

<タグb id="id名"> ..... </タグb>

こうして属性を付与したタグが実際に特定のスタイルとして表示されるためには、HTMLファイルのヘッダ部分で次のようにスタイルシートが設定されていなければならない。

<head>
<style type="text/css">
タグa.クラス名 {属性a1: 値a1; 属性a2: 値a2; ....}
タグb#id名 {属性b1: 値b1; 属性b2: 値b2; ....}
</style>
</head>

クラス属性を指定したタグにはスタイルシートでは、タグ+.+クラス名とピリオドでタグとクラス名を繋ぎ、id属性を指定したタグには、スタイルシートではタグ+#+id名と#印タグとid名を繋ぐことに注意。

たとえば、次のように使う。

HTML書式

表示結果

<head>
<style type="text/css">
div#peachpuff {background-color: peachpuff}
span.orange {background-color: orange}
string.red {color: red}
</style>
</head>

<body>
<div>ここにはスタイルは適用されず</div>
<span class="orange">文字列ブロック</span>をはみ出す
<br>
<string class="red">文字列</string>の一部分
<div id="peachpuff">IDで設定した</div>唯一の部分
<span class="orange">共通のスタイル</span>を利用
</body>

ここにはスタイルは適用されず

文字列ブロックをはみ出す
文字列の一部分

IDで設定した

唯一の部分共通のスタイルを利用

このスタイルシートで定義しているHTML DTD以外の新たなタグstringの有効性はWebブラウザに依存する。 Netscape6.0では有効であるがNetscape4.7xやIE5.xでは無効である。また、こうした新しいタグstringはインラインのスタイルシート利用はできない。 HTMLのDTDにはそのようなタグが定義されていないからである。

文字列などのためスタイルシート定義する必要があるときは、上のように汎用タグ<span>を使うべきである。


<string style="background-color: red">赤い文字列</string>

テキスト周辺のスタイル設定

たとえば、次のように使う：

<head>
<style type="text/css">
p.special {background-color: pink; text-indexnt: 14pt;
           font-size: larger; font-weight: bold}
</style>
</head>

<body>
....
<p class="special">
スタイルシートで定義した段落文
</p>
....
</body>

テキストの色指定
属　性	属性値（と説明）
`color`	`orange`など（色指定は色名称が分かりやすい）

テキスト背景色の指定（`<body>、<p>、<div>、<span>`などで）
属　性	属性値（と説明）
`background-color`	`orange`など。色指定は色名称が分かりやすい

フォントサイズの指定
属　性	属性値（と説明）
`font-size`	たとえば、`20pt、2cm` `smaller、larger`、120%（親要素に対する相対指定） `xx-small、x-small、small、medium、large、x-large、xx-large`（キーワード指定）

フォントの種類の指定
属　性	属性値（と説明）
`font-familyt`	`serif`（英文のTimes Romen、和文の明朝体など `sans-serif`（英文のHelvetica、和文のゴシック体など） `cursive`（筆記体のフォント） `fantasy`（飾り文字のフォント） `monospace`（固定ピッチのフォント）（プラットフォームよっては指定した特定フォントがない場合があるので以上の汎用ファミリを使うのが無難）

フォントの太さの指定
属　性	属性値（と説明）
`font-weight`	`normal、bold` `100、200、300、400、500、600、700、800、900` `lighter、bolder`（相対的）

テキスト装飾の指定
属　性	属性値（と説明）
`text-decoration`	`underline`（下線）、`overline`（上線）、`line-through`（打消線）

テキストの水平位置の指定
属　性	属性値（と説明）
`text-align`	`left`（左寄せ）、`center`（中央）、`right`（右寄せ）

インデントをつける（`<p>や<div>`などのブロック要素などで）
属　性	属性値（と説明）
`text-indent`	たとえば、`14pt` 20%（親要素に対して相対的）

画像周辺のスタイル設定

たとえば、次のように使う：

<head>
<style type="text/css">
body  {background-image: url("dog.jpg");
       background-repaet: repeat-x}
</style>
</head>

<body>
<h1>犬のかけっこ</h1>
....
</body>

背景に画像を指定（`<body>、<p>、<div>`などで）
属　性	属性値（と説明）
`background-image`	`url("画像のURL")`

背景画像の固定の指定
属　性	属性値（と説明）
`background-attachment`	`scroll（デフォルト）、fixed （指定して背景画をスクロールに応じて移動させるか固定させるかを決める）`

背景画像の繰り返し指定
属　性	属性値（と説明）
`background-repaet`	`repaet（デフォルト）、 repeat-x、 repeat-y、no-repeat` （背景に画像を張り込んだときに通常はx,y-方向に繰り返し敷き詰められる。この属性で繰り返しの方向を制御する）

背景画像の位置指定
属　性	属性値（と説明）
`background-position`	`top、center、bottom`（縦方向） `left、center、right`（横方向） `40% 30%`（縦、横位置）（画像の張り込み位置を設定する）

枠線周辺のスタイル設定

ブロック要素やインライン要素の1つ1つの領域はボックス（箱）をなしている。スタイルシートではこのボックスの境界などについての制御を行うことができる。これによって、枠のために境界付きの表を用いる必要はなくなった。

たとえば、次のように使う：

<head>
<style type="text/css">
div.box {background-color: lightgreen;
         border-style: solid;
         border-width: 3pt;
         border-color: green}
</style>
</head>

<body>
...
<div class="box">
文章ブロック
</div>
....
</body>

枠線のスタイル設定
属　性	属性値（と説明）
`border-style`	`solid、double、groove、ridge、inset、outset、none（デフォルト）`

枠線幅の指定
属　性	属性値（と説明）
`border-width`	`thin、medium（デフォルト）、thick、3pt` （上下左右同一） `2pt 4pt` （上下と左右） `10pt 20pt 15pt` （上、左右、下） `2pt 4pt 8pt 10pt` （上、下、左、右）

枠線の色指定
属　性	属性値（と説明）
`border-color`	`orange`など

枠線と文字間隔の指定
属　性	属性値（と説明）
`padding`	`20pt` （上下左右同一） 10pt 20p（上下と左右） 10pt 20pt 15pt（上、左右、下） 10pt 20pt 15pt 15pt（上、下、左、右）

箇条書き周辺のスタイル設定

たとえば、次のように使う：

<head>
<style type="text/css">
ul.square  {list-style-type: square}
</style>
</head>

<body>
....
<ul class="square">
<li>犬</li>
<li>猫</li>
</ul>
....
</body>

単純箇条書きマークの指定
属　性	属性値（と説明）
`list-style-type`	`disc(黒丸、デフォルト)、circle（白丸）、square（四角）`

リストマークに画像を使う
属　性	属性値（と説明）
`list-style-image`	`url("画像のURL")`

リストマークの位置指定
属　性	属性値（と説明）
`list-style-position`	`outside（外側、デフォルト）、inside（本文の内側）` （リストマークを本文の外側にだすか、本文中に埋め込むかを指定する）

Webページの作成目次
 オンラインテキスト目次

mizutani@rsch.tuis.ac.jp