リストのアイコンを自作する方法

はじめに

HP制作をしている駆け出しエンジニアです。
リストのアイコンをデフォルトのものではなく、自作したいときの方法をまとめました。

今回は「▶」にしたい場合について、2通りの実装方法がありますので紹介します。

方法1：実際の文字をアイコンとして使用する方法

実際の文字（▶）をアイコンとして使用します。
フォントや文字サイズで調整可能です。

以下のコードを使用して、リストアイコンを右向きの三角形に変更できます。

css

ul {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  padding: 0;
  margin: 0;
}

ul li {
  position: relative;
  padding-left: 20px; /* アイコン分のスペースを確保 */
}

ul li::before {
  content: "▶"; /* 三角形アイコンを設定 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #333; /* 三角形の色を設定 */
  font-size: 16px; /* アイコンのサイズ */
}

方法2：CSSで三角形を描画する方法

純粋にCSSで三角形を描画します。
厳密な形状の調整が必要な場合に便利です。

以下のコードを使用して、リストアイコンを右向きの三角形に変更できます。

css

ul {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  padding: 0;
  margin: 0;
}

ul li {
  position: relative;
  padding-left: 20px; /* アイコン分のスペースを確保 */
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent; /* 上部分を透明に */
  border-bottom: 6px solid transparent; /* 下部分を透明に */
  border-left: 10px solid #333; /* 三角形の色を設定 */
}

HTMLサンプル

どちらの方法でも、HTMLは以下を使用しています。

html

<ul>
  <li>リストアイテム1</li>
  <li>リストアイテム2</li>
  <li>リストアイテム3</li>
</ul>

以上、参考になれば幸いです!!