CSS #12 リストのスタイル

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

こんにちは!
UPSTARTSのSベンです!

 

今回は「リスト」のスタイルについての内容です。

 

こちらのhtmlにスタイルをあてていきます。

 

 

リスト関連のプロパティ

 

今回は以下の4つのプロパティについてやっていきます。

 

list-style-type → マーカー文字の種類を指定

list-style-image → マーカー画像を指定

list-style-position → マーカーの表示位置を指定

 

上記をまとめて、

list-style

でまとめて書く事もできます。

 

 

ではそれぞれ実際にソースを見ていきましょう。

 

 

list-style-type

ではまずはlist-style-typeをやっていきましょう。

リスト表示するとデフォルトで文字の左に黒い点が付きます。

これを「マーカー」と呼びます。

 

このマーカーの種類を指定できるのが、list-style-typeになります。

 

このようにすると、
デフォルトでは黒い点だったマーカーが、白い丸になります。

circleではなく、noneとするとマーカーを無くすことも可能です。

その他種類がたくさんありますので、気になる方は調べてみてください。

 

 

 

list-style-image

では次にlist-style-imageをやっていきましょう。

list-style-imageを使うと、マーカー部分を画像にすることができます。

 

このようにurl()の中に画像名を入れると、指定することができます。

 

 

 

list-style-position

次にlist-style-positionは、マーカーの表示位置を指定することができます。

 

デフォルトではoutsideになっていて、マーカーが外にはみ出る状態になっています。

insideにすることで、マーカーを中に入れることができます。

 

 

 

list-style

上記のプロパティたちを1行にまとめて書く事も可能です。

 

書き方は以下のようになります。

 

 

 

 

 

 

 

 

今回は「リスト」のスタイルについてやっていきました。

次回は「背景関連」についてです。

 

ではまた次回!


  • このエントリーをはてなブックマークに追加
  • LINEで送る