リストの書式設定
- list-style-type (リストのマーク、番号のタイプ)
- list-style-position (Listeneinrückung)
- list-style-image (eigene Bullet-Grafik)
- list-style (Listendarstellung allgemein)
- marker-offset
| 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リスト項目のマーカーの種類を指定する
| 書式 | 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
| 値 | 機能 |
|---|---|
| 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 )
<ul style="LIST-STYLE-TYPE: disc">
<li>黒丸 <li>白丸 <li>四角</li></ul>
<h4>U nordered List <ul> マークの型<i>circle</i></h4>
<ul style="LIST-STYLE-TYPE: circle">
<li>黒丸 <li>白丸 <li>四角</li></ul>
list-style-positionリスト項目のマーカーの位置を指定する
| 書式 | 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
| 値 | 機能 |
|---|---|
| inside | マーカーを文中に入れる |
| outside | マーカーを文の外側に出す |
適応要素 ：リストアイテム要素
継承 ：する (デフォルト値 ＝ outside )
１行程度の短い箇条書きならあまり気になることはないですが、箇条書きの文章量が多くなってくると折り返しが必要になり、１項目が複数行になります。
そんな場合にリストのマーカーを項目の外に出すか項目中に埋め込むかを指定する属性です。
<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>
list-style-imageリスト項目のマーカー用の画像を指定する
| 書式 | list-style-image: <value:値> |
|---|---|
| 値 | <url> | none |
| 継承性 | 不可 |
| 適用要素 | display値list-itemの要素 |
| 継承性 | 可能 |
list-style-imageプロパティーは画像読み込みが機能している場合リスト項目マークとして使われる画像を特定し、list-style-typeプロパティーで特定されたマークと置き代えます。
CSS1
| 値 | 機能 |
|---|---|
| URI | 画像のURI を指定する |
| none | 画像のマーカーを表示しない |
適応要素 ：リストアイテム要素
継承 ：する (デフォルト値 ＝ none )
前項のlist-style-type属性 は、あらかじめブラウザに用意されているリストのマークを指定しますが、この属性では、独自に用意した画像をマークとして利用することが出来ます。
<li> <a href="../../../html/"><b>html/XHTML</b></a><br> Die Sprache des Web</li>
</ul>
list-styleリスト項目のマーカーに関する値をまとめて指定する
| 書式 | list-style: <value:値> |
|---|---|
| 値 | <list-style-type> ||<list-style-position> ||<url> |
| 初期値 | 未定義 |
| 適用要素 | display値list-itemの要素 |
| 継承性 | 可能 |
list-styleップロパティーは、list-style-type・list-style-positionそしてlist-style-imageプロパティーの短縮型です。
| 値 | 機能 |
|---|---|
| list-style-type | マーカーの形式を指定 |
| list-style-position | マーカーの位置を指定 |
| list-style-image | マーカーとなる画像を指定 |
適応要素 ：リストアイテム要素
継承 ：する (デフォルト値＝各属性の初期値)
リストのマーカーに関する属性をまとめて設定します。
すべての値を設定する必要はなく、省略することも可能で、その場合はそれぞれのデフォルト値が表示されます。
list-style-type
(リストのマーク、番号のタイプ)
list-style-position
(Listeneinrückung)
list-style-image
(Eigene Bullet-Grafik)
<li><ol style="list-style:lower-roman inside"></li>
</ol>
| 値 | 機能 |
|---|---|
| 数値＋単位 | ex, em, pt などの単位で指定 |
| auto | 自動調整 |
適応要素 ：リストアイテム要素
継承 ：する (デフォルト値 = auto )
CSS入門
広告