【極める】CSSでリストをおしゃれに飾るプロパティ

CSSリスト

SHARE

HTML、CSSでリストを作る時、そのデザイン方法はたくさんあるということをご存知ですか？
リストを極めて、ウェブページにもうひとスパイス加えましょう。

HTMLでのリストの作り方

さて、HTMLでの基本的なリストの作り方は次の二つです。

  1. <li>タグを<ul>で囲む
  2. <li>タグを<ol>で囲む

<li>タグを<ul>タグで囲む

See the Pen VwaqRam by M2RnRT (@m2rnrt) on CodePen.

このド定番の方法は憶えていることでしょう。
<li>タグを<ul>タグで囲むことで、黒丸のポツポツによるリストが作成されます。

<li>タグを<ol>タグで囲む

See the Pen JjXwzRG by M2RnRT (@m2rnrt) on CodePen.

今度は数字のリストが作成されました。
ここまでは非常に簡単ですね。ただし、HTMLで変化をつけるのはこの程度が限界なのです。

CSSでリストを装飾する

CSSでリストを装飾すれば、さらに幅が広がります。
「絶対にこんな装飾しないだろ！！」と思わず突っ込みたくなるようなものも含め、多くの装飾方法があります。
リストの装飾のためのプロパティは主に3つです。

  1. list-style-type・・・リストマーカーの種類を指定
  2. list-style-position・・・リストマーカーの表示位置を指定
  3. list-style-image・・・リストマーカーに使用する画像を指定

list-style-type

このプロパティを使いこなせれば、「リストマスター」の称号を付与してあげましょう。なぜなら、このプロパティに指定できる値は、たくさんあるからです。
まずは、例を見てみましょう。

See the Pen WNwPPVX by M2RnRT (@m2rnrt) on CodePen.

上から3つはsquareというCSS値を指定して、黒い四角のリストになっています。
真ん中３つは、hebrewという値で、ヘブライ数字になっています。
そして、下の３つはkatakanaというCSS値で、カタカナのリストになっています。

このように、list-style-typeというプロパティに対して、色んな値を設定し、オサレなリストを作ることが可能なのです。

それでは、どんな値を適応できるか、ざっと見てみましょう。

  • none・・・リストマーカーを非表示
  • disc・・・黒丸
  • circle・・・白丸
  • square・・・黒四角
  • decimal・・・数字
  • decimal-leading-zero・・・ゼロを含んだ数字
  • lower-roman・・・小文字のローマ字
  • upper-roman・・・大文字のローマ字
  • cjk-ideographic・・・漢数字
  • hiragana・・・ひらがな
  • katakana・・・カタカナ
  • hiragana-iroha・・・ひらがなのいろは
  • katakana-iroha・・・カタカナのいろは
  • lower-alpha・・・小文字のアルファベット
  • upper-alpha・・・大文字のアルファベット
  • lower-latin・・・小文字のアルファベット
  • upper-latin・・・大文字のアルファベット
  • lower-greek・・・小文字の古典ギリシャ文字
  • hebrew・・・ヘブライ数字
  • armenian・・・アルメニア数字
  • georgian・・・グルジア数字

いかがでしょうか。絶対に使わなさそうなのも含めて、たくさんの種類のリストマーカーを指定できることが分かります。

list-style-position

list-style-positionプロパティを使えば、リストマーカーをどこに表示するか指定することができます。
outsideというプロパティを指定すれば、ボックスの外側に、insideという値を指定すれば、ボックスの内側にリストマーカーが配備されます。
一体どういうことなのか、例を使ってみてみましょう。

See the Pen ZEWwPpw by M2RnRT (@m2rnrt) on CodePen.

リストに、text-align: center;というCSSを適応させると、親要素（ボックス）に対して、中央に文字が移動します。
さて、list-style-positionプロパティに対して、outsideと指定されていると、ボックスの外にリストマーカーが配備されていて、insideと指定するとボックスの内側に配備されていることが分かるかと思います。

御覧の通り、リストを中央などに配備したいときはinsideを指定するとよいですね。

list-style-image

list-style-imageプロパティに対してurlを指定すれば、リストマーカーに画像を適応することができます。

list-style

list-styleプロパティでは、上で紹介したlist-style-type, list-style-position, list-style-imageの三つのプロパティをまとめて指定できます。

See the Pen NWNoJXz by M2RnRT (@m2rnrt) on CodePen.

例えば、例の様に、三つの値を、半角スペースで区切って指定すると、ひとまとめに指定することができます。

このプロパティでは必ず３つ指定しなければならない、というわけでもなく、値が一つだけでも適応させることができます。

終わりに

いかがだったでしょうか。たかがリスト、されどリスト、ということでリストにもいろんなパターンがあることが分かったと思います。
まず、HTMLのリストの作り方を習得し、それからCSSで幅を広げてみてください。

CSSでリストを弄るには、４つのプロパティを覚える必要がありました。

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style

それぞれに対して、指定できる値がありましたが、list-style-typeに指定できるものが最も多かったですね。
覚える必要はありませんが、ふとリストをアレンジしたくなったらこの記事に戻ってきてください（笑）

前の記事

CSSで色を指定する

次の記事

【一覧】使用頻度の高いCSSプロパティ！
CSSプロパティ一覧