menu
menu

キーワード検索

 

2月更新・前月(1月)の人気記事トップ10 - 02/02/2021

  1. ( 1 − ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 5 ↑) 【Mac】Safariでソースコードを見る方法
  3. ( 4 ↑) 【CSS】CSSだけでドロップダウンメニュー
  4. ( 6 ↑) 【iPhone iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  5. ( 3 ↓) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 7 ↑) 【Mac】MacにGoogle Driveをインストール
  7. ( 8 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 2 ↓) 【2020年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
  9. ( 9 − ) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  10. (10 − ) 【jQuery】入門5. jQueryで日時を表示

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

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

こんにちは(・∀・)

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
  • グルジア数字

 

にほんブログ村 デザインブログ Webデザインへ
  • CSS