【HTML & CSS】リスト要素の書き方

リストの修飾
リストマーカーの位置
リストマーカ画像
実装サンプル

リストの修飾

list-style-typeを使うことで数字やアルファベットだけでなく、漢字やひらがなでも付けることが出来ます。

HTML

<ol id="decimal">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="decimal0">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="lower-roman">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="upper-roman">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="cjk-decimal">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="hiragana">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="katakana">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="hiragana-iroha">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="katakana-iroha">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="lower-alpha">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="upper-alpha">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="lower-greek">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="hebrew">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="armenian">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="georgian">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

CSS

#decimal{ list-style-type:decimal;}
#decimal0{ list-style-type:decimal-leading-zero;}
#lower-roman{ list-style-type:lower-roman;}
#upper-roman{ list-style-type:upper-roman;}
#cjk-decimal{ list-style-type:cjk-decimal;}
#hiragana{ list-style-type:hiragana;}
#katakana{ list-style-type:katakana;}
#hiragana-iroha{ list-style-type:hiragana-iroha;}
#katakana-iroha{ list-style-type:katakana-iroha;}
#lower-alpha{ list-style-type:lower-alpha;}
#upper-alpha{ list-style-type:upper-alpha;}
#lower-greek{ list-style-type:lower-greek;}
#hebrew{ list-style-type:hebrew;}
#armenian{ list-style-type:armenian;}
#georgian{ list-style-type:georgian;}

リストマーカーの位置

list-style-positionを使うことで、リストマーカの位置を外側または内側で指定できます。

HTML

<ol id="outside">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol id="inside">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

CSS

#outside{ list-style-position:outside;
          background-color:aqua;}
#inside{ list-style-position:inside;
          background-color:lime;}

リストマーカ画像

list-style-imageを使うことで任意の画像で修飾することができます。

HTML

<ol id="mark">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

CSS

#mark{ list-style-image:url(https://source.unsplash.com/20x20/?city,sk)}

実装サンプル

修飾(list-style-type)、位置(list-style-position)、画像(list-style-image)の実装サンプルは以下のとおりです。

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】HTML、CSS、JavaScriptで人気のオススメ動画コース

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選

リストの修飾

リストマーカーの位置

リストマーカ画像

実装サンプル

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル