制作者の活動(PR)。

堀北真希ちゃんをうさぎ化したけもの耳キャラクタ
主な作品

堀北真希うさぎ(うさ耳女子大生)がコンタクトレンズを入れるイラストとその場面を含んだ仮想TVCM動画〜昔のボシュロム『オプティマ』CM風に〜

リスト専用のプロパティ。

<ul>要素及び<ol>要素には、専用のプロパティが用意されています。

リスト専用のプロパティ・目次。

list-style-typeプロパティ…リストアイテムの先頭に付けるマーカ。

list-style-typeプロパティは、<li>要素の先頭に付けるマーカの種類を指定します。

list-style-typeプロパティが取れる値にはいろいろなものがあります。主なものを紹介しましょう。

none
マーカを付けません。<ul>要素及び<ol>要素要素のどちらに用いても構いません。
disc
黒丸を用います。<ul>要素に用いられますが、<ol>要素要素に用いても構いません。
circle
白丸を用います。<ul>要素に用いられますが、<ol>要素要素に用いても構いません。
square
四角を用います。<ul>要素に用いられますが、<ol>要素要素に用いても構いません。
decimal
一番目のリストアイテムから「1.」「2.」「3.」…と算用数字で番号を付けて行きます。<ol>要素に用いられますが、<ul>要素要素に用いても構いません。
lower-roman
一番目のリストアイテムから「i.」「ii.」「iii.」…と小文字ローマ数字で番号を付けて行きます。<ol>要素に用いられますが、<ul>要素要素に用いても構いません。
upper-roman
一番目のリストアイテムから「I.」「II.」「III.」…と大文字ローマ数字で番号を付けて行きます。<ol>要素に用いられますが、<ul>要素要素に用いても構いません。
lower-alpha

一番目のリストアイテムから「a.」「b.」「c.」…と大文字英字を付けて行きます。<ol>要素に用いられますが、<ul>要素要素に用いても構いません。

upper-alpha

一番目のリストアイテムから「A.」「B.」「C.」…と小文字英字を付けて行きます。<ol>要素に用いられますが、<ul>要素要素に用いても構いません。

list-style-typeプロパティを用いる上での注意事項。

list-style-imageプロパティ…マーカに画像を用いる場合。

list-style-imageプロパティに対して、値として「url("画像のURI")」を当てると、マーカには指定された画像が適用されます。

但し、画像の取得をし損なった場合は、list-style-typeプロパティで指定されたマーカで代用されます。

list-style-positionプロパティ…マーカの位置関係の指定。

list-style-positionプロパティは、マーカの付く位置をキーワードで指定します。

outside
マーカをリストアイテムの外側に出します。リストアイテムとなるテキストが折返された場合、マーカの真下には文字は来なくなります(デフォルト)。
inside
マーカをリストアイテムの先頭に組込みます。リストアイテムとなるテキストが折返された場合、マーカの真下に文字は来る事になります。

list-styleプロパティ…「list-style」系プロパティの一括指定。

list-styleプロパティは、list-style-typeプロパティ，list-style-imageプロパティ及びlist-style-positionプロパティの一括指定を行います。

それぞれのプロパティ値を半角空白で区切って順不同に並べます。値を指定していないプロパティにはデフォルト値が当てられます。

例えば、以下のようにします。

list-style: disc url("marker.GIF") outside;

これは、以下の記述と等価になります。

list-style-type: disc;
list-style-image: url("marker.GIF");
list-style-position: outside;

参考・<dl>要素のリストアイテムにマーカを付けるには。

上記のプロパティはいずれも<ul>要素及び<ol>要素または<li>要素に対して適用されるものですが、その他の要素に適用させる事も出来ます。

このためには、リストアイテムに見立てたいセレクタに対してdisplayプロパティに「list-item」値を指定します。

その上で、上記のlist-style-typeプロパティ，list-style-imageプロパティ及びlist-style-positionプロパティまたはlist-styleプロパティを指定します。

例えば、<dl>要素内の<dt>要素にマーカを付けたい場合は以下のようにします。

dt {
    display: list-item;
    list-style: disc outside;
        …
    }

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com