リストの書式設定

Functional list
Property： value:値 意味
list-style-type リストの行頭項目を指定
disc ●
circle ○
square ■
decimal 1〜
lower-roman I,ii〜
upper-roman I,II〜
lower-alpha ａｂ〜
upper-alpha Ａ，Ｂ〜
none 無し
list-style-image リストの行頭に画像を指定 リストマークに画像を使用する」
src( URL )
none
list-style-position リストの行頭位置を指定
inside 行頭項目をテキストの内側に表示
outside 行頭項目をテキストの外側に表示

list-style-typeリスト項目のマーカーの種類を指定する

Functional list
書式 list-style-type: <value:値>
値 disc | circle | square | decimal | lower-roman |
upper-roman | lower-alpha | upper-alpha
| none
初期値 disc
適用要素 display値 list-itemの要素
継承性 可能

list-style-typeプロパティーはリスト項目マークを特定し、list-style-imageがnoneである場合や画像読み込みが切られている場合に使われます。

*スタイルシートで追加された新しいタイプは多くのブラウザが未対応です。

CSS1

Functional list
値 機能
disc 黒丸
circle 白丸
square 四角
decimal 数字
decimal-leading-zero 頭にゼロのついた数字
lower-roman 小文字ローマ数字
upper-roman 大文字ローマ数字
lower-alpha 小文字アルファベット
upper-alpha 大文字アルファベット
lower-latin 小文字ラテン文字
upper-latin 大文字ラテン文字
lower-greek *小文字ギリシャ文字
hebrew *ヘブライ数字
armenian *アルメニア数字
georgian *グルシア数字
cjk-ideographic *漢数字
hiragana *あいうえお順のひらがな
katakana *アイウエオ順のカタカナ
hiragana-iroha *いろは順のひらがな
katakana-iroha *イロハ順のカタカナ
none *表示なし

適応要素 ：リストアイテム要素

継承 ：する (デフォルト値 ＝ disc )

例:ポップアップのページ実例: このようになります。

<h4>U nordered List &lt;ul&gt;マークの型 <i>disc</i></h4>
<ul style="LIST-STYLE-TYPE: disc">
<li>黒丸 <li>白丸 <li>四角</li></ul>
<h4>U nordered List &lt;ul&gt; マークの型<i>circle</i></h4>
<ul style="LIST-STYLE-TYPE: circle">
<li>黒丸 <li>白丸 <li>四角</li></ul>

up

list-style-positionリスト項目のマーカーの位置を指定する

Functional list
書式 list-style-type: <value:値>
値 disc | circle | square | decimal | lower-roman |
upper-roman | lower-alpha | upper-alpha | none
初期値 disc
適用要素 display値 list-itemの要素
継承性 可能

list-style-typeプロパティーはリスト項目マークを特定し、list-style-imageがnoneである場合や画像読み込みが切られている場合に使われます。

CSS1

Functional list
値 機能
inside マーカーを文中に入れる
outside マーカーを文の外側に出す

適応要素 ：リストアイテム要素

継承 ：する (デフォルト値 ＝ outside )

１行程度の短い箇条書きならあまり気になることはないですが、箇条書きの文章量が多くなってくると折り返しが必要になり、１項目が複数行になります。

そんな場合にリストのマーカーを項目の外に出すか項目中に埋め込むかを指定する属性です。

例:ポップアップのページ実例: このようになります。

<body text="#000000" bgcolor="#ffffff">
<h4>listy type <i>inside</i></h4>
<ol style="LIST-STYLE-POSITION: inside">
<li>東京都<br />東京 <li>愛知県<br />名古屋 </ol>
<h4>list type <i>outside</i></h4>
<ol style="LIST-STYLE-POSITION: outside">
<li>東京都<br />東京 <li>愛知県<br />名古屋 </ol>

up

list-style-imageリスト項目のマーカー用の画像を指定する

Functional list
書式 list-style-image: <value:値>
値 <url> | none
継承性 不可
適用要素 display値list-itemの要素
継承性 可能

list-style-imageプロパティーは画像読み込みが機能している場合リスト項目マークとして使われる画像を特定し、list-style-typeプロパティーで特定されたマークと置き代えます。

CSS1

Functional list
値 機能
URI 画像のURI を指定する
none 画像のマーカーを表示しない

適応要素 ：リストアイテム要素

継承 ：する (デフォルト値 ＝ none )

前項のlist-style-type属性 は、あらかじめブラウザに用意されているリストのマークを指定しますが、この属性では、独自に用意した画像をマークとして利用することが出来ます。

例:ポップアップのページ実例: このようになります。

<ul style="list-style-image:url(list_style_image.gif)">
<li> <a href="../../../html/"><b>html/XHTML</b></a><br> Die Sprache des Web</li>
</ul>

up

list-styleリスト項目のマーカーに関する値をまとめて指定する

Functional list
書式 list-style: <value:値>
値 <list-style-type> ||<list-style-position> ||<url>
初期値 未定義
適用要素 display値list-itemの要素
継承性 可能

list-styleップロパティーは、list-style-type・list-style-positionそしてlist-style-imageプロパティーの短縮型です。

CSS1
Functional list
値 機能
list-style-type マーカーの形式を指定
list-style-position マーカーの位置を指定
list-style-image マーカーとなる画像を指定

適応要素 ：リストアイテム要素

継承 ：する (デフォルト値＝各属性の初期値)

リストのマーカーに関する属性をまとめて設定します。

すべての値を設定する必要はなく、省略することも可能で、その場合はそれぞれのデフォルト値が表示されます。

上へlist-style-type (リストのマーク、番号のタイプ)
上へlist-style-position (Listeneinr&uuml;ckung)
上へlist-style-image (Eigene Bullet-Grafik)

例:ポップアップのページ実例: このようになります。

<ol style="list-style:lower-roman inside">
<li>&lt;ol style=&quot;list-style:lower-roman inside&quot;&gt;</li>
</ol>
Functional list
値 機能
数値＋単位 ex, em, pt などの単位で指定
auto 自動調整

適応要素 ：リストアイテム要素

継承 ：する (デフォルト値 = auto )

up上へritemargin （マージン・余白に関する指定）


CSS入門

広告