このチュートリアルで説明されているCSSプロパティを使用して、リストのデザインを行うことができます。指定は、ulとolのHTML要素に関連しています。したがって、整理されたリストと整列されていないリストをお好みに合わせて調整できます。
リストに関する一般情報
list-styleは、次の3つのプロパティの要約です:
• list-style-type
• list-style-position
• list-style-image
list-styleを使用すると、箇条書きの前の記号やインデントのグラフィカル表現方法を変更できます。これらの指定は、それぞれコンマで区切って記述されます。順序はどちらでも構いません。また、すべてのプロパティに値を指定する必要はありません。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>ブラウザで表示される具体例:
グラフィカルな箇条書き
独自の画像を箇条書きとして指定することができます。これにはlist-style-imageプロパティが使用されます。次の値が可能です:
• url – 画像ファイル名と必要に応じてパス
• none – 画像は表示されません。
例:
ul {
list-style-image: url(bullet.gif);
}
指定したURLのパスが正しいことに注意してください。
間違ったパスが指定された場合、ブラウザはデフォルトの箇条書き記号に切り替えるべきです。
箇条書き記号の位置
list-style-positionを使用して、番号付けや箇条書き記号がインデントに対してどのように振る舞うかを指定します。
• inside – 最初の行が左端を合わせるために十分にインデントされ、箇条書き記号とリスト項目は左寄せされます。
• outside – 箇条書き記号はリスト項目の左側に配置されます。
以下の例では、insideとoutsideの両方の値が使用されています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Inside リスト:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Outside リスト:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>これにより、これら2つの値が実際に異なる影響を持つかが直接見えるはずです。
箇条書き記号の見た目を設定する
箇条書き記号の外観や数字付きリストの表示を明示的に指定できます。また、番号付きリストの表示を制御することも可能です。これにはlist-style-typeプロパティが使用されます。このプロパティで使用できる値は以下の通りです:
• decimal – olリストに対して: 番号付け 1, 2, 3 など
• lower-roman – olリストに対して: 番号付け i., ii., iii. など
• upper-roman – olリストに対して: 番号付け I., II., III., IV など
• lower-alpha または lower-latin – olリストに対して: 番号付け I., II., III., IV. など
• upper-alpha または upper-latin – olリストに対して: 番号付け A., B., C., D. など
• disc – ulリストに対して: 塗りつぶしの円形バレット記号
• circle – ulリストに対して: 空の円形バレット記号
• square – ulリストに対して: 矩形バレット記号
• none – バレット記号や番号付けなし
• lower-greek – olリストに対して: ギリシャ文字を使った番号付け
• hebrew – olリストに対して: ヘブライ文字を使った番号付け
• decimal-leading-zero – olリストに対して: 先導ゼロを付けた番号付け 0: 01., 02., 03., 04. など
• cjk-ideographic – olリストに対して: 表意文字を使った番号付け
• hiragana – olリストに対して: 日本語の番号付け（小文字）
• katakana – olリストに対して: 日本語の番号付け（大文字）
• hiragana-iroha – olリストに対して: 日本語の番号付け（小文字）
• katakana-iroha – olリストに対して: 日本語の番号付け（大文字）
以下の例では、列挙されたバリエーションのいくつかが使用されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>ブラウザで次の画像が表示されます:
カウンター
olリストを使用すると、コンテンツに番号を付けることができます。しかし、より複雑なアプリケーションでは、この形式の番号付けは実用的でない場合があります。CSSは、これに代わるものとしてカウンターを提供しています。
次に、カウンターの使用方法を示します。
まず、body要素に新しいカウンターを設定します。
body {
counter-reset: kapitel;
}この定義により、文書内に "kapitel" というカウンターが作成されます。このカウンターを使用できます。
h1 {
counter-increment: kapitel;
}
この構文により、新しいh1要素が現れるたびに、カウンターが自動的に "1" 増加します。ただし、問題は、現時点では数え上げがまだ見えないことです。疑似要素を使用することで簡単に修正できます。
h1::before {
content: counter(kapitel) ". ";
}
完全な適用例は次の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h1>Kapitel</h1>
</body>
</html>そして、ブラウザでの結果は次のようになります:
この例では、::beforeでそれぞれのh1要素の先頭に番号が出力されます。数字が見出しのテキストに直接接続されないように、数字の後にピリオドとスペースが挿入されます。
content: counter(kapitel) ". "
ネストしたカウントも可能です。これには、最終的に再び最初から始めたい場所でカウンターを定義します。
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}この例では、新しいh1要素が表示されるたびにカウンターがリセットされます。次の例は、ネストされたカウンターの典型的な使用法を示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:kapitel;
}
h1 {
counter-reset:unterkapitel;
}
h1:before {
counter-increment:kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment:unterkapitel;
content:counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
</body>
</html>ブラウザで表示される結果は次のとおりです:
これらの例は、カウンターの優れた機能を示しています。
