< details >で試したい。

CSS, HTML

みなさん、<details>タグ使ってますか？

今回はタイトルの通り<details>で色々試します。

まずは元の状態

HTML

<details>
<summary>おしてみて。</summary>
やっほー。
</details>

サンプル

見出しなどを <summary> で囲みます。

<summary> の下に表示させたい文章などを入れます。

CSSでスタイリング

とりあえずCSSでカーソルが触れた時にポインターになるようにしたいと思います。

スタイリングしやすいようにクラス名をつけます。

HTML

<details>
<summary class="sm-01">おしてみて。</summary>

<p>やっほー。</p>

</details>

CSS

.sm-01 {
  cursor: pointer;
}

サンプル

” ▶︎ ︎” を変更します。

まずは▶︎を消します。

HTML

<details class="dt-01">
<summary class="sm-01">おしてみて。</summary>

<p>やっほー。</p>

</details>

CSS

.sm-01 {
  display: block;
  list-style: none;
  cursor: pointer;
}
.sm-01::-webkit-details-marker {
  display: none;
}

サンプル

擬似要素で好みのマークにする。

今回はFont Awesomeで▶︎の代わりを表示させたいと思います。
画像でも可能です。
※クラス名変えてます。

HTML

<details class="dt-02">
<summary class="sm-02">おしてみて。</summary>

<p>やっほー。</p>

</details>

CSS

.sm-02 {
  display: block;
  list-style: none;
  cursor: pointer;
}
.sm-02::-webkit-details-marker {
  display: none;
}
.sm-02::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: '\f0fe';
}
details.dt-02[open] summary.sm-02::before {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	content: '\f146';
}

サンプル

応用次第で色んなことができそうです。