CSS リスト（list-style）

リストの装飾 list-style

フォルダ：css_sample_04

リスト（箇条書き）の設定を行うCSSプロパティです。

【準備】

• 共通で使用するindex.htmlとstyle.cssを用意し、css_sample_04 フォルダの中に入れます（共通のデータとは、CSSの基本で使用したデータです。GitHubからもダウンロードできます）
• index.htmlに、リスト（箇条書きのタグ）を追加します。もともと入力済みのタグが重複しないように気をつけてください

▼index.htmlに追記するタグ

<main>
  <p>メイン要素（見出し、本文、画像などの主要な内容）が入ります</p>
  <ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
  </ul>
  <ol>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
  </ol>
</main>

▼style.cssへの追記

main ul {
  list-style-type: square;
}
main ol {
  list-style-type: upper-roman;
}

list-style-type：リストの種類を指定します（list-styleでも指定可）

• disc 黒丸 = 初期設定
• circle 白丸
• square 四角
• none 記号なし
• …など

連番（1,2,3…）を設定するには、下記のような指定をします

• lower-alpha, lower-latin 小文字のASCII 文字（アルファベット）
• upper-alpha, upper-latin 大文字のASCII 文字（アルファベット）
• upper-roman 大文字のローマ数字
• hiragana-iroha ひらがなのいろは
• …など

そのほかの指定例

https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

• 作成例：https://ngsm-syr.github.io/css_sample_04/
• コード：https://github.com/ngsm-syr/css_sample_04

参考リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/list-style
• https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type
• https://developer.mozilla.org/ja/docs/Web/CSS/list-style-position