前章に戻る
Content これは CSS Getting Started チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。
リストについて
前章 のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。
CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。
リストにスタイルを定義するには、list-style プロパティを使ってマーカーの種類を指定します。
CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：<li>）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：<ul>））。
箇条書きリスト（unordered list）
箇条書きリストでは、すべてのリスト項目に同じ方法でマーカーがつきます。
CSS には3種類のマーカーがあり、ブラウザは次のように表示します:
disccirclesquare
もしくは、画像の URL を指定できます。
次のルールはリスト項目のクラス別に異なったマーカーを定義します:
li.open {list-style: circle;}
li.closed {list-style: disc;}
リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):
<ul> <li class="open">Lorem ipsum</li> <li class="closed">Dolor sit</li> <li class="closed">Amet consectetuer</li> <li class="open">Magna aliquam</li> <li class="closed">Autem veleum</li> </ul>
結果は次のようになるでしょう:
|
番号順リスト（ordered lists）
番号順リストでは、リスト項目は各々違ったマーカーをつけられ、順番を表します。
マーカーの種類を定義するには list-style プロパティを使ってください:
decimallower-romanupper-romanlower-latinupper-latin
これは info クラスの <ol> 要素についてのルールで、項目が大文字のアルファベットで識別されます。
ol.info {list-style: upper-latin;}
リスト内の <li> 要素はこのスタイルを継承します:
|
list-style は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス list-style をご覧ください。
箇条書きリスト (<ul>) や番号リスト (<ol>) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば <ul> に番号リストを表示させたり、<ol> に箇条書きリストを表示させたりもできます。
リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。
カウンター
注: 一部のブラウザーはカウンターをサポートしていません。Quirks Mode site の CSS contents and browser compatibility ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの CSS Reference の各ページにもブラウザ実装状況の表があります。
カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。
通し番号を定義するには、独自に名前をつけた counter が必要です。
カウントが開始されるより前の要素のいずれかで、counter-reset プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。
番号が増える要素の各々に counter-increment プロパティとカウンター名を使ってください。
カウンターを表示するには、セレクタに :before または :after を追加し、content プロパティを使います（前のページ コンテンツ で行った要領です）。
content プロパティの値として、counter() とカウンター名を記述します。オプションとして種類を記述します。種類は上の 番号順リスト の欄にあるものと同じです。
通常、カウンターを表示する要素もまたカウンターを増やします。
次のルールは numbered クラスを持つ <h3> 要素が現れるたびにカウンターを初期化します:
h3.numbered {counter-reset: mynum;}
次のルールは numbered クラスを持つ <p> 要素が現れるたびにカウンターを表示し、番号を増やします:
p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;}
結果は次のようになります:
| Heading 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。
カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。
もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の Automatic counters and numbering をご覧ください。
実習: スタイルづけされたリスト
新しいHTML文書、doc2.html を作成してください。次の内容をコピー＆ペーストします:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document 2</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<h3 id="oceans">The oceans</h3>
<ul>
<li>Arctic</li>
<li>Atlantic</li>
<li>Pacific</li>
<li>Indian</li>
<li>Southern</li>
</ul>
<h3 class="numbered">Numbered paragraphs</h3>
<p class="numbered">Lorem ipsum</p>
<p class="numbered">Dolor sit</p>
<p class="numbered">Amet consectetuer</p>
<p class="numbered">Magna aliquam</p>
<p class="numbered">Autem veleum</p>
</body>
</html>
新しいスタイルシート、style2.css を作成してください。次の内容をコピー＆ペーストします:
/* numbered paragraphs */
h3.numbered {counter-reset: mynum;}
p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;
}
レイアウトやコメントが気に入らなければ変えてください。
ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:
|
The oceans
Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:
|
The oceans
|
次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:
|
(A) The oceans . . . (B) Numbered paragraphs . . . |
さて次は？
次のセクション :
ボックス 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である ボックス（boxes）を CSS で扱う方法について述べます。