リストの装飾

2014年5月24日：CSS

CSSを使ったリストの装飾の方法について解説します。

リストの記号の変更方法や、改行設定を学びます。

記号の設定

リストの装飾のメインは記号です。

記号の種類は以下の設定により変更できます。

list-style-type: X;

ここでXには記号の種類をかきます。例えば

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
</body>
</html>

【style.css】

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

とすれば

circle

となります。

先ほどのXには以下の項目が入ります。

  1. none
  2. disc
  3. circle
  4. square
  5. decimal
  6. decimal-leading-zero
  7. lower-roman
  8. upper-roman
  9. lower-alpha
  10. upper-alpha
  11. hiragana
  12. katakana

記号の形状は以下を参考にしてください。

リストの種類

画像を表示する

指定した画像を表示させたい場合は

li{
    list-style-image: url(“画像のURL”);
}

とします。例えば先程のCSSを

ul li{
	list-style-image: url("icon.png");
}

とすれば、

アイコンの使用

となります。

リストが複数行のときの設定

リストの内容が長くて改行する場合の設定を

list-style-position: X;

により行うことができます。Xには

  1. outside
  2. inside

が入ります。

【outside】

ul{
	list-style-image: url("icon.png");
	list-style-position:outside;
}

outside

【inside】

ul{
	list-style-image: url("icon.png");
	list-style-position:inside;
}

inside

改行する際に、リスト記号の下に回り込むかを設定できます。

 

先ほどのCSSは

ul{
	list-style: url("icon.png") inside;
}

のようにまとめてかくこともできます。

著者：安井 真人(やすい　まさと)

TOP