リスト（ulタグ、olタグ）のレイアウト方法

HTMLでは、ulタグ、olタグを使用してリストを作成しますが、リストのコーディング方法とレイアウト方法です。

リストを階層にする方法

リストを階層にする場合は、liタグの中に、新しくulタグ・olタグを入れます。

See the Pen リスト（階層あり） by take it easy (@take-it-easy) on CodePen.

HTML

<ol>
  <li>一階層①</li>
  <li>一階層②
    <ul>
      <li>二階層①</li>
      <li>二階層②
        <ul>
          <li>三階層①</li>
          <li>三階層②</li>
        </ul>
      </li>
      <li>二階層③</li>
    </ul>
  </li>
  <li>一階層③</li>
</ol>

リストにスタイルを設定する方法

リストの先頭の数字の部分に装飾をしたり、Font Awesomeのようなアイコンを使用するレイアウト例になります。

See the Pen リスト（階層あり） by take it easy (@take-it-easy) on CodePen.

「リストを階層にする方法」のHTMLへクラスを設定します。

HTML

<ol class="menu1">
  <li>一階層①</li>
  <li>一階層②
    <ul class="menu2">
      <li>二階層①</li>
      <li>二階層②
        <ul class="menu3">
          <li>三階層①</li>
          <li>三階層②</li>
        </ul>
      </li>
      <li>二階層③</li>
    </ul>
  </li>
  <li>一階層③</li>
</ol>

一階層に「menu1」、二階層に「menu2」、三階層に「menu3」というクラスをつけています。

CSS（共通部分）

/* 共通 */
:root {
  --list-color: #3261ab;
}

ol, ul {
  /* リストスタイルなし */
  list-style: none;
  /* フォントサイズを揃える */
  font-size: 16px;
  /* パディングなし */
  padding: 0;
}

ol li, ul li {
  /* リストの間隔 */
  margin: 8px 0;
}

root要素にリストで使用する色を設定しています。

olタグ、ulタグのスタイルなしにして、一度パディングもなしにしています。

リストの上下の間隔も共通で設定をしています。

CSS（リスト部分）

/* 一階層 */
ol.menu1 {
  counter-reset: count;
}

ol.menu1 > li {
  position: relative;
  /* インデント */
  padding-left: 24px;
}

ol.menu1 > li::before {
  /* コンテンツ（番号） */
  content: counter(count);
  counter-increment: count 1;
  /* インラインブロック */
  display: inline-block;
  position: absolute;
  /* 位置 */
  left: 0px;
  top: 2px;
  /* 背景 */
  background-color: var(--list-color);
  border-radius: 50%;
  /* 文字 */
  font-size: 14px;
  text-align: center;
  color: #fff;
}

/* 二階層 */
ul.menu2 > li {
  position: relative;
  /* インデント */
  padding-left: 18px;
}

ul.menu2 > li::before {
  /* コンテンツ（FontAwesome） */
  font-family: 'FontAwesome';
  content: '\f138';
  /* インラインブロック */
  display: inline-block;
  position: absolute;
  /* 位置 */
  left: -3px;
  top: 2px;
  /* 文字 */
  font-size: 16px;
  text-align: center;
  color: var(--list-color);
}

/* 三階層 */
ul.menu3 > li {
  position: relative;
  /* インデント */
  padding-left: 18px;
}

ul.menu3 > li::before {
  /* コンテンツ（FontAwesome） */
  font-family: 'FontAwesome';
  content: '\f054';
  /* インラインブロック */
  display: inline-block;
  position: absolute;
  /* 位置 */
  left: -3px;
  top: 2px;
  /* 文字 */
  font-size: 12px;
  text-align: center;
  color: var(--list-color);
}

/* リストの先頭部分のサイズ */
ol.menu1 > li::before,
ul.menu2 > li::before,
ul.menu3 > li::before {
  /* サイズ */
  width: 20px;
  height: 20px;
  line-height: 20px;
}

表示形式は、「inline-block」を設定します。

li要素では「position: relative;」を設定し、疑似要素の”::before”では「position: absolute;」を設定して位置を設定できるようにします。

サイズは同じ（共通）にすることで綺麗にレイアウトできます。また、”line-height”を設定すると高さなどの微調整が楽です。