こんにちは！
UPSTARTSのSベンです！
今回は「リスト」のスタイルについての内容です。
こちらのhtmlにスタイルをあてていきます。
|
1 2 3 4 5 6 7 8 |
<body> <ul> 三兄弟 <li>エース</li> <li>サボ</li> <li>ルフィ</li> </ul> </body> |
リスト関連のプロパティ
今回は以下の4つのプロパティについてやっていきます。
list-style-type → マーカー文字の種類を指定
list-style-image → マーカー画像を指定
list-style-position → マーカーの表示位置を指定
上記をまとめて、
list-style
でまとめて書く事もできます。
ではそれぞれ実際にソースを見ていきましょう。
list-style-type
ではまずはlist-style-typeをやっていきましょう。
リスト表示するとデフォルトで文字の左に黒い点が付きます。
これを「マーカー」と呼びます。
このマーカーの種類を指定できるのが、list-style-typeになります。
|
1 2 3 |
ul { list-style-type: circle; } |
このようにすると、
デフォルトでは黒い点だったマーカーが、白い丸になります。
circleではなく、noneとするとマーカーを無くすことも可能です。
その他種類がたくさんありますので、気になる方は調べてみてください。
list-style-image
では次にlist-style-imageをやっていきましょう。
list-style-imageを使うと、マーカー部分を画像にすることができます。
|
1 2 3 |
ul { list-style-image: url(nico.png); } |
このようにurl()の中に画像名を入れると、指定することができます。
list-style-position
次にlist-style-positionは、マーカーの表示位置を指定することができます。
|
1 2 3 |
ul { list-style-position: inside; } |
デフォルトではoutsideになっていて、マーカーが外にはみ出る状態になっています。
insideにすることで、マーカーを中に入れることができます。
list-style
上記のプロパティたちを1行にまとめて書く事も可能です。
書き方は以下のようになります。
|
1 2 3 |
ul { list-style: circle inside; } |
今回は「リスト」のスタイルについてやっていきました。
次回は「背景関連」についてです。
ではまた次回！
