listy-style-*プロパティ

/ HTML5/CSS3/jQuery / Comment[0]

list-style-image

リストスタイルの「・」の代わりの画像を指定するプロパティです。

<ul style="list-style-image:url(image/listmark-1.png)">
  <li>test
  <li>test
  <li>test
</ul>
  • test
  • test
  • test

list-style-position

このプロパティはリストマークをボックスの内側か外側どちらかに配置するかを指定します。
プロパティの値はinsideとoutsideがあります。(指定無しの場合はoutside)

指定無し
<ul style="border:1px solid #000">
  <li>test
  <li>test
  <li>test
</ul>
  • test
  • test
  • test
list-style-position: outside
<ul style="list-style-position:outside; border:1px solid #000">
  <li>test
  <li>test
  <li>test
</ul>
  • test
  • test
  • test
list-style-position: inside
<ul style="list-style-position:inside; border:1px solid #000">
  <li>test
  <li>test
  <li>test
</ul>
  • test
  • test
  • test

list-style-type

リストマークの形状を指定するプロパティです。値の種類には「counter-style」「string」「none」の3つがあります。

list-style-typeで指定できるstringタイプのキーワードには以下のものがあります。list-tyle-type: <string>

  • disc デフォルトの●型
  • circle ○型
  • square ■型
  • decimal 数字.
  • decimal-leading-zero 頭に0をつけた数字
  • upper-latin 大文字のアルファベット
  • lower-latin 小文字のアルファベット
  • upper-alpha 大文字のアルファベット
  • lower-greek 小文字のギリシャ文字
  • armenian アルメニア
  • georgian グルジア
  • hebrew ヘブライ
  • upper-roman 大文字のローマ数字
  • lower-roman 小文字のローマ数字
  • upper-cjk-ideographic 漢数字
  • hiragana ひらがな
  • hiragana-iroha いろは順
  • katakana カタカナ
  • katakana-iroha イロハ順
関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可