menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

list-style-type【CSSリファレンス】

  • CSS

list-style-type

こんにちは(・∀・)

CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはlist-style-typeです。

概要

list-style-typeプロパティを使用してマーカー文字の種類を指定します。


.sample {
  list-style-type: disc;
}
適用要素

li要素、ul要素、ol要素、displayプロパティ(値がlist-itemの場合)

指定できる値
解説
none 非表示
disc 黒丸
circle 白丸
square 四角
decimal 数字
decimal-leading-zero 頭に0付の数字
upper-alpha 大文字アルファベット
lower-alpha 小文字アルファベット
upper-roman 大文字ローマ数字
lower-romanr 小文字ローマ数字
lower-greek 小文字ギリシャ文字
armenian アルメニア数字
georgian グルジア数字

次の値はCSS2.1では削除されています

解説
cjk-ideographic 漢数字
hiragana あいうえお(ひらがな)
katakana アイウエオ(カタカナ)
hiragana-iroha いろは(ひらがな)
katakana-iroha イロハ(カタカナ)
hebrew ヘブライ数字
初期値

disc

サンプル
HTML

<ul class="d1">
<li>none</li>
<li>非表示</li>
</ul>
<ul class="d2">
<li>disc</li>
<li>黒丸</li>
</ul>
<ul class="d3">
<li>circle</li>
<li>白丸</li>
</ul>
<ul class="d4">
<li>square</li>
<li>四角</li>
</ul>
<ul class="d5">
<li>decimal</li>
<li>数字</li>
</ul>
<ul class="d6">
<li>decimal-leading-zero</li>
<li>頭に0付の数字</li>
</ul>
<ul class="d7">
<li>upper-alpha</li>
<li>大文字アルファベット</li>
</ul>
<ul class="d8">
<li>lower-alpha</li>
<li>小文字アルファベット</li>
</ul>
<ul class="d9">
<li>upper-roman</li>
<li>大文字ローマ数字</li>
</ul>
<ul class="d10">
<li>lower-roman</li>
<li>小文字ローマ数字</li>
</ul>
<ul class="d11">
<li>lower-greek</li>
<li>小文字ギリシャ文字</li>
</ul>
<ul class="d12">
<li>armenian</li>
<li>アルメニア数字</li>
</ul>
<ul class="d13">
<li>georgian</li>
<li>グルジア数字</li>
</ul>
CSS

.css-demo ul.d1 li {
  list-style-type: none;
}
.css-demo ul.d2 li {
  list-style-type: disc;
}
.css-demo ul.d3 li {
  list-style-type: circle;
}
.css-demo ul.d4 li {
  list-style-type: square;
}
.css-demo ul.d5 li {
  list-style-type: decimal;
}
.css-demo ul.d6 li {
  list-style-type: decimal-leading-zero;
}
.css-demo ul.d7 li {
  list-style-type: upper-alpha;
}
.css-demo ul.d8 li {
  list-style-type: lower-alpha;
}
.css-demo ul.d9 li {
  list-style-type: upper-roman;
}
.css-demo ul.d10 li {
  list-style-type: lower-roman;
}
.css-demo ul.d11 li {
  list-style-type: lower-greek;
}
.css-demo ul.d12 li {
  list-style-type: armenian;
}
.css-demo ul.d13 li {
  list-style-type: georgian;
}
Result
  • none
  • 非表示
  • disc
  • 黒丸
  • circle
  • 白丸
  • square
  • 四角
  • decimal
  • 数字
  • decimal-leading-zero
  • 頭に0付の数字
  • upper-alpha
  • 大文字アルファベット
  • lower-alpha
  • 小文字アルファベット
  • upper-roman
  • 大文字ローマ数字
  • lower-roman
  • 小文字ローマ数字
  • lower-greek
  • 小文字ギリシャ文字
  • armenian
  • アルメニア数字
  • georgian
  • グルジア数字

関連リンク

CSSリファレンス

  • カテゴリー:CSS