リストの装飾
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>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html>
【style.css】
ul li{ list-style-type:circle; }
とすれば
となります。
先ほどのXには以下の項目が入ります。
- none
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
- hiragana
- katakana
記号の形状は以下を参考にしてください。
画像を表示する
指定した画像を表示させたい場合は
li{
list-style-image: url(“画像のURL”);
}
list-style-image: url(“画像のURL”);
}
とします。例えば先程のCSSを
ul li{ list-style-image: url("icon.png"); }
とすれば、
となります。
リストが複数行のときの設定
リストの内容が長くて改行する場合の設定を
list-style-position: X;
により行うことができます。Xには
- outside
- inside
が入ります。
【outside】
ul{ list-style-image: url("icon.png"); list-style-position:outside; }
【inside】
ul{ list-style-image: url("icon.png"); list-style-position:inside; }
改行する際に、リスト記号の下に回り込むかを設定できます。
先ほどのCSSは
ul{ list-style: url("icon.png") inside; }
のようにまとめてかくこともできます。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー