【副業を始めたい人必見!】副業開始マニュアル

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

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

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

ニシドラ
ニシドラ

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

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

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

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

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

スポンサーリンク

リストマーカーの装飾

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

リストマーカーの種類変更

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

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

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

none リストマーカー無し lower-roman ローマ数字の小文字
disc 黒い点 upper-roman ローマ数字の大文字
circle 白い点 decimal-leading-zero 0を付けた数字
decimal 数字 cjk-ideographic 漢数字
aquare 黒い四角 lower-alpha- ,
lower-latin
アルファベットの小文字
harigana ひらがな upper-alpha ,
lower-latin
アルファベットの大文字
katakana カタカナ higragana-iroha ひらがなのいろは
katakana-iroha カタカナのいろは lower-greek 小文字のギリシャ文字
hebrew ヘブライ数字 armenian アルメニア数字
georgian グルニア数字

使い方はシンプルで、指定したいタグ(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プロパティ

これまでに「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の解説をしているので下の記事一覧から読んでみてください!

コメント

タイトルとURLをコピーしました