箇条書きの装飾【list-style-type】：CSS入門

CSS入門（11）

今回は、箇条書きタグ（<ul>、<li>）の装飾を行います。「list-style-type」を使えば、いろいろな種類のリストマークが利用できます。

お話は、次の順番で進みます。

• リストマークを変えてみる
• 「list-style-type」一覧
• 次回予告
• 関連記事
• この記事へのコメント

▲ページの先頭に戻る

リストマークを変えてみる

1：前回までの状態

（01）

はじめに、前回までの状態を確認しておきましょう。<table>タグ内の背景色の変更を通して、継承、子孫セレクタという書き方を覚えました。

CSSコードは、次のようになります。

h1, h2 { margin: 0; padding: 0; } body { background-color: #ffff00; } h1 { background-color: #191970; color: #ffffff; padding: 5px; } h2 { background-color: #ffffff; border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 8px solid #191970; margin-top: 10px; padding: 2px 5px; } img { margin: 4px 15px 6px; } table { background-color: #000000; } table th { background-color: #191970; color: #ffffff; padding: 2px 10px; } table td { background-color: #ffffff; padding: 2px 10px; }

▲ページの先頭に戻る

2：箇条書きを装飾する

（02）

今回は、「list-style-type」を使って、箇条書きのリストマークの装飾を行います。（黒丸になっている箇所です）

（03）

けっこう、いろいろなマークが用意されていますが、実際によく使うのは、次の3つくらいかもしれません。この3つを試してみましょう。

• 黒丸（初期値）
• アラビア数字
• なし

（04）

黒丸は、もともと箇条書き（<li>タグ）に設定されている初期値です。指定する方法は、「list-style-type」に、「disc」と書きます。

ul li { list-style-type: disc; }

初期値なら覚える必要がないと思うかもしれませんが、そうとも限りません。

（05）

次は、アラビア数字（1、2、3、4、5・・・）です。指定する方法は、「list-style-type」に、「decimal」と書きます。

ul li { list-style-type: decimal; }

箇条書きの順番を書き直すとき、手書きだと数字を書き直さなければいけませんが、「decimal」を使うと自動的に振り直されるので楽です。

（06）

最後に、何も表示しない場合です。指定する方法は、「list-style-type」に、「none」と書きます。

ul li { list-style-type: none; }

▲ページの先頭に戻る

3：decimalにしておく

（07）

変更しないのもつまらないので、とりあえず、decimalにしておきます。追加書きしておきましょう。

h1, h2 { margin: 0; padding: 0; } body { background-color: #ffff00; } h1 { background-color: #191970; color: #ffffff; padding: 5px; } h2 { background-color: #ffffff; border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 8px solid #191970; margin-top: 10px; padding: 2px 5px; } img { margin: 4px 15px 6px; } table { background-color: #000000; } table th { background-color: #191970; color: #ffffff; padding: 2px 10px; } table td { background-color: #ffffff; padding: 2px 10px; } ul li { list-style-type: decimal; }

▲ページの先頭に戻る

「list-style-type」一覧

「list-style-type」で使えるリストマークの一覧です。

いろいろございますが、css1の9種類だけを利用する方がよろしいようです。どうやら、css2の方は、次のような傾向があります。

• ほぼ、IE6、7が対応していない。
• 日本語のものは、css2.1で削除されるとか。

1：css1（9種）

none	なし なし なし
disc	黒丸 黒丸 黒丸
circle	白丸 白丸 白丸
square	黒色の四角 黒色の四角 黒色の四角
decimal	アラビア数字 アラビア数字 アラビア数字
lower-roman	ローマ数字（小文字） ローマ数字（小文字） ローマ数字（小文字）
upper-roman	ローマ数字（大文字） ローマ数字（大文字） ローマ数字（大文字）
lower-alpha	アルファベット（小文字） アルファベット（小文字） アルファベット（小文字）
upper-alpha	アルファベット（大文字） アルファベット（大文字） アルファベット（大文字）

▲ページの先頭に戻る

2：css2（12種）

lower-latin	lower-alphaと同じ lower-alphaと同じ lower-alphaと同じ
upper-latin	upper-alphaと同じ upper-alphaと同じ upper-alphaと同じ
decimal-leading-zero	ゼロ（0）付きアラビア数字 ゼロ（0）付きアラビア数字 ゼロ（0）付きアラビア数字
hebrew	ヘブライ数字 ヘブライ数字 ヘブライ数字
georgian	グルシア数字 グルシア数字 グルシア数字
georgian	グルシア数字 グルシア数字 グルシア数字
armenian	アルメニア数字 アルメニア数字 アルメニア数字
cjk-ideographic	漢数字 漢数字 漢数字
hiragana	ひらがな ひらがな ひらがな
katakana	カタカナ カタカナ カタカナ
hiragana-iroha	いろはにほへと いろはにほへと いろはにほへと
katakana-iroha	イロハニホヘト イロハニホヘト イロハニホヘト
lower-greek	ギリシャ数字（小文字） ギリシャ数字（小文字） ギリシャ数字（小文字）

ブラウザ対応状況などのお話については、W3Gさんを参考にさせていただきました。ありがとうございました。

▲ページの先頭に戻る

次回予告

次回は、箇条書きのリストマークの箇所に画像を使う【list-style-image】について書いています。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1：カスタマイズ前

• ブログをカスタマイズしたい！
• カスタマイズ前の準備

2：CSSの基本的なこと

• CSS入門 はじめました
• CSSの書き方
• CSSファイルの外部読み込み

3：色の指定

• 背景色の変更【background-color】
• 文字色の変更【color】

4：罫線の指定

• 罫線を描く【border】

5：間隔（余白）の指定

• margin、paddingとは？
• margin、paddingの初期化
• 間隔をあける【margin、padding】

6：継承と子孫セレクタ

• 継承と子孫セレクタとは？

7：箇条書き（リスト）

• 箇条書きの装飾【list-style-type】（この記事です）
• 箇条書きに画像【list-style-image】

8：文字（フォント）の指定

• フォントの指定【font-family】
• 日本人が好きなフォントは？
• 文字サイズの変更【font-size】（1）
• 文字サイズの変更【font-size】（2）

9：idセレクタ、classセレクタ

• idセレクタ、classセレクタとは？

10：文章を読みやすくする

• 段落のインデント【text-indent】
• 行の間隔【line-height】
• 文字の間隔【letter-spacing】

11：文字の中央揃え（センタリング）

• 文字の左右・中央揃え【text-align】

12：レイアウト

• 幅と高さを決める【width、height】
• 段組みレイアウト【float】

13：tableの中央揃え（センタリング）

• 表（table）の中央揃え

14：CSSで飾る

• CSSでリンクを装飾する
• 背景に画像【background-image】

15：まとめ

• 最後にIEでチェック＋CSSハック
• CSS入門まとめ
• HTMLとCSSにコメントを入れる方法

▲ページの先頭に戻る

作成日：2008/04/19 更新日：2008/04/19

« 「継承と子孫セレクタとは？」｜「箇条書きに画像【list-style-image】」 »