list-style-typeプロパティ

TOPページに戻る > CSS

スポンサード リンク

list-style-typeプロパティ

リストマークの種類を変更できます
リスト項目の先頭にくるリストマークを記号や数字などに変更できます。値にnoneを指定すると、リストマークを非表示にすることもできます

使い方(書式)

セレクタ { list-style-type: 値; }                                    

list-style-typeプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 リスト項目 ol要素 ul要素 li要素 displayの値がlist-itemになっている要素
子要素へのスタイルの継承 する

プロパティの値 説明
none マークなし
disc 黒い丸
circle 白い丸
square 黒い四角
decimal 数字
lower-roman 小文字のローマ数字
upper-roman 大文字のローマ数字
lower-alpha 小文字のアルファベット
upper-alpha 大文字のアルファベット
decimal-leading-zero 0を付けた数字 ※IE7以前のブラウザは未対応
lower-greek 小文字のギリシャ文字 ※IE7以前のブラウザは未対応
lower-latin 小文字のアルファベット ※IE7以前のブラウザは未対応
upper-latin 大文字のアルファベット ※IE7以前のブラウザは未対応
armenian アルメニア数字 ※IE7以前のブラウザは未対応
georgian グルジア数字 ※IE7以前のブラウザは未対応
hebrew ヘブライ数字
cjk-ideographic 漢数字
hiragana ひらがな
katakana カタカナ
hiragana-iroha ひらがな いろはにほへと順
katakana-iroha カタカナ イロハニホヘト順

実際の指定方法

.hoge { list-style-type: none; }   /* リストマーク非表示 */
.hoge2 { list-style-type: disc; }   /* 黒い丸 */
.hoge3 { list-style-type: circle; }   /* 白い丸 */
.hoge4 { list-style-type: square; }   /* 黒い四角 */
.hoge5 { list-style-type: decimal; }   /* 数字 */
.hoge6 { list-style-type: lower-roman; }   /* 小文字のローマ数字 */
.hoge7 { list-style-type: upper-roman; }   /* 大文字のローマ数字 */
.hoge8 { list-style-type: lower-alpha; }   /* 小文字のアルファベット */
.hoge9 { list-style-type: upper-alpha; }   /* 大文字のアルファベット */
.hoge10 { list-style-type: decimal-leading-zero; }   /* 0を付けた数字 */
.hoge11 { list-style-type: lower-greek; }   /* 小文字のギリシャ文字 */
.hoge12 { list-style-type: lower-latin; }   /* 小文字のアルファベット */
.hoge13 { list-style-type: armenian; }   /* アルメニア数字 */
.hoge14 { list-style-type: georgian; }   /* グルジア数字 */
.hoge15 { list-style-type: hebrew; }   /* ヘブライ数字 */
.hoge16 { list-style-type: cjk-ideographic; }   /* 漢数字 */
.hoge17 { list-style-type: hiragana; }   /* ひらがな */
.hoge18 { list-style-type: katakana; }   /* カタカナ */
.hoge19 { list-style-type: hiragana-iroha; }   /* ひらがな いろはにほへと順 */
.hoge20 { list-style-type: katakana-iroha; }   /* カタカナ イロハニホヘト順 */

html部分

<ul class="hoge">
<li>リスト項目の種類</li>
<li>none</li>
<li>リストマーク非表示</li>
</ul>

実際の表示

  • リスト項目の種類
  • none
  • リストマーク非表示
  • リスト項目の種類
  • disc
  • 黒い丸
  • リスト項目の種類
  • circle
  • 白い丸
  • リスト項目の種類
  • square
  • 黒い四角
  • リスト項目の種類
  • decimal
  • 数字
  • リスト項目の種類
  • lower-roman
  • 小文字のローマ数字
  • リスト項目の種類
  • upper-roman
  • 大文字のローマ数字
  • リスト項目の種類
  • lower-alpha
  • 小文字のアルファベット
  • リスト項目の種類
  • upper-alpha
  • 大文字のアルファベット
  • リスト項目の種類
  • decimal-leading-zero
  • 0を付けた数字
  • リスト項目の種類
  • lower-greek
  • 小文字のギリシャ文字
  • リスト項目の種類
  • lower-latin
  • 小文字のアルファベット
  • リスト項目の種類
  • armenian
  • アルメニア数字
  • リスト項目の種類
  • georgian
  • グルジア数字
  • リスト項目の種類
  • hebrew
  • ヘブライ数字
  • リスト項目の種類
  • cjk-ideographic
  • 漢数字
  • リスト項目の種類
  • hiragana
  • ひらがな
  • リスト項目の種類
  • katakana
  • カタカナ
  • リスト項目の種類
  • hiragana-iroha
  • ひらがな いろはにほへと順
  • リスト項目の種類
  • katakana-iroha
  • カタカナ イロハニホヘト順




(C)2012 ホームページ作成無料