タグのCSSで三角アイコンをカスタマイズする方法

<details>タグのデフォルトの三角アイコンは、CSSを使って変更できます。ここでは、三角アイコンをカスタマイズする方法を紹介します。

1. CSSで三角アイコンをカスタマイズする方法

CSSで三角の形を自分で作成し、詳細の開閉状態によって回転させることで、カスタマイズしたアイコンを実現できます。

<details><summary>クリックして展開</summary><p>詳細な内容がここに表示されます。</p></details>

/* detailsタグの初期設定 */details{position: relative;
  padding-left: 20px;
}/* summaryの三角アイコンを非表示にする */summary{list-style: none;
  cursor: pointer;
}/* 独自の三角アイコンを設定する */summary::before{content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%)rotate(0deg);
  border: solid5pxtransparent;
  border-left-color: #333; /* 三角形の色 */transition: transform0.3sease;
}/* detailsが開かれたときの三角アイコンの回転 */details[open]summary::before{transform: translateY(-50%)rotate(90deg);
}

解説

1. summary::beforeで三角の形を作成しています。borderプロパティで色を指定し、border-left-colorで三角形の色を設定しています。
2. transformと transitionを使ってアニメーション付きで三角が回転するようにしています。
3. details[open] summary::beforeを使うことで、<details>が開かれている時に三角形が90度回転します。

この方法を使うと、三角アイコンの色やサイズを自由にカスタマイズできます。