Nagashima Laboratory

CSS リスト（list-style）

リストの装飾 list-style

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

【はじめる前に】

  • 色と背景の演習で使ったファイル（css_sample_02 一式）をそのまま使用します
  • css_sample_02 を作成していない場合は「色と背景」の資料を基に、先に作成しておきます。

▼index.htmlへの追記

・・・中略・・・
</section>
<section class="section-list">
  <h2>3. リスト (List)</h2>
  <ul class="custom-list">
    <li>リスト項目その１</li>
    <li>リスト項目その２</li>
    <li>リスト項目その３</li>
  </ul>
</section>
</main>

▼style.cssへの追記（一番下に追加）

/* =================================================
   3. リストの設定
   ================================================= */
.custom-list {
    list-style: none;          /* デフォルトの「●」を消す */
    padding-left: 0;           /* 左側の余白をリセット */
}

.custom-list li {
    border-bottom: 1px solid #ccc; /* 下線をつける */
    padding-top: 10px;
    padding-bottom: 10px;
}

リストに関するプロパティ

list-style：リストに関する設定をします

記号を外す設定（none） 以外に、記号の種類を指定することも可能です

  • 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

参考リンク

() Category: 資料 Tags: