【list-style-typeプロパティ】CSSで箇条書きリストの装飾方法

どうも！ニシドラ(@nishidorablog)です。

ニシドラ

この記事ではCSSでの装飾方法について解説します。

HTML解説講座で解説した「ulタグ」や「olタグ」を使ってのリスト作成は、ではどうしても味気ない感じになったり、WEBサイトのデザインと合わないなんてことがよくあります。

このような問題を解決するにはCSSで装飾します。
リストを装飾する利点としては「WEBサイトにあったデザインにできる」や「読みやすくなる」という点があげられます。

そんなCSSでの「リストの装飾方法」をこの記事では解説します。

HTMLで箇条書きリストの作成方法がわからない方は下の関連記事から読んでみてください！

リストマーカーの装飾

リスト項目の先頭に表示されているマークのことを「リストマーカー」と呼びます(ulタグでは黒い丸、olタグでは数字が表示される)。

このリストマーカーを変更するときに、CSSでは「list-style-typeプロパティ」を使います。

list-style-typeプロパティで指定できる値はさまざまで、下の表にまとめてみました。

左の欄(1、3列)が指定できる値で、右の欄(2、4列)が値の説明を記しています。

使い方はシンプルで、指定したいタグ(ulかol)にプロパティと値を入れます。

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

ul {
list-style-type: circle;
}
ol {
list-style-type: hiragana;
}

それぞれulタグを白い点に、olタグをひらがなに変えてみました。
ブラウザで表示させたのが下の画像になります。

リストマーカーを任意のものに変える値を前項で説明しましたが、「list-style-imageプロパティ」を使うことで、リストマーカーに画像を使うこともできます。

どう使うかというと、list-style-imageプロパティの後に「url(　)」を記述します。
「(　)」の中にはHTMLでの画像の指定方法と同じように「画像の場所/画像名.拡張子」を書きます。

HTMLでの画像の指定方法を知りたい方は下の記事を読んでみてください。

実際にリストマーカーに画像を付けてみます。

状況としては「imageフォルダ」の中に「notes.gif(音符のマークの画像)」という画像があり、HTMLファイルの「ulタグ」のリストマーカーに「notes.gif」を表示させたいとします。

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

ul {
list-style-image: url(../notes.gif);
}

Google chromeで表示すると下の画像のようになります。

リストマーカーのファイルサイズは「15×15」のものを採用しました。
サイズの大きい画像やあまりにも複雑な画像を選んでしますと、うまく表示されなかったりコンテンツの邪魔になってしまうので注意が必要です。

「list-style-position」プロパティを使うと、リストマーカーの表示位置を変更することができます。
イメージとしては下の図のようになると思ってください。

上の図はliタグに「background-color」プロパティを指定して色を付けています。

リストマーカーをボックスの内側(緑色の部分)か外側かどちらかに表示することができます。
黒い点のulタグには「inside」という値でボックスの内側にリストマーカーを表示し、数字のolタグには「outside」という値でボックスの外側にリストマーカーを表示させています。

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

ul {
list-style-position: inside;
}
ol {
list-style-position: outside;
}

これまでに「list-style-type」プロパティ、「list-style-image」プロパティ、「list-style-position」プロパティと説明してきましたが、実は「list-style」プロパティだけで、これらの項目をまとめて指定することができます。

値は好きな順番で書くことができ、スペースで区切って指定します。

ul {
list-style: outside url(image/notes.gif) aquare;
}

list-style-typeプロパティとlist-style-imageプロパティを同時に指定した場合は、list-style-imageプロパティが優先されます。

今回の内容をまとめると以下のようになります。

list-style-typeプロパティでリストマーカーを任意のものに変えることができる
list-style-imageプロパティでリストマーカーを任意の画像に変えることができる
list-style-positionプロパティでリストマーカーをボックスの内側か外側に表示するか変えることができる
list-styleプロパティを使うことでlist-style-typeプロパティ、list-style-imageプロパティ、list-style-positionプロパティを同時に指定することができる

黒い丸や数字ではデザインが味気ないので、list-style-typeプロパティで装飾しましょう。

他にもCSSの解説をしているので下の記事一覧から読んでみてください！