この記事では、ウェブページでコンテンツの一部を表示および非表示にするための非常に便利な要素であるHTML <details>要素のスタイリング方法について簡単な方法をいくつか紹介します。
JavaScriptを必要とせずに単純な開示要素を持つことは便利ですが、<details>要素のデフォルトのスタイルは一部の人にとっては魅力がありません。幸いなことに、この要素のスタイルを変更するのは非常に簡単です。
以下の目次は、<details>要素の使用例です。簡単な境界線といくつかのパディングを追加しました。
Table of Contents
詳細要素の紹介
こちらが<details>要素の基本的なコードです:
<details>
<summary>Click me!</summary>
<p>Peekaboo! Here's some hidden content!</p>
</details>
基本的にはどんなHTMLコンテンツでも<details>要素の中に配置できます。<summary>要素は、ユーザーがクリックしてさらに多くのコンテンツを表示するためのプロンプトを提供し、<details>要素の最初の子要素でなければなりません。
このコードのライブ例を以下に示します:
Click me!
ピーカブー！こちらに隠れたコンテンツがあります！
次に、CSSを使用して<details>要素の外観を強化する方法をいくつか見ていきましょう。
背景色、境界線、パディング
A really simple way to enhance the look of the <details> element is to add some padding along with a border or some background colors.
境界線を追加する
上記の目次で示したように、シンプルな境界線に加えてパディングと軽微なボーダーラジウスを追加することで、<details>要素を強化し定義することができます。
details {
padding: 10px;
border: 5px solid #f7f7f7;
border-radius: 3px;
}
これが、上で使用したToCをスタイル付けるためのシンプルなコードです。
背景色を追加する
次に、境界線の代わりに<details>要素に背景色を追加してみましょう。
details {
padding: 10px;
background-color: #e4eaef;
border-radius: 5px;
}
結果は以下のPenで確認できます。
背景色は要素の定義をより良くし、パディングはその内部にスペースを作り出すのに役立ちます。
また、<summary>要素に他のコンテンツと区別するために異なる背景色を設定し、テキストの色も変更することができます。
summary {
background-color: #2196F3;
color: white;
padding: 10px;
}
注意: <summary>要素のテキストカラーを変更すると、マーカーアローの色も変わります。これは、マーカーがリストアイテムに付属するマーカー(箇条書きなど)と同様に、<summary>要素に実際に接続されているためです。以下では、それらを別々にスタイルする方法を見ていきます。
マーカーのスタイリング
<summary>要素はdisplayがlist-itemに設定されています。そのため、それに付随するデフォルトの矢印(▶)は、HTMLリストアイテムのデフォルトマーカーと同様に変更できます。使用される文字を変更し、その色を独立して変更できます。
マーカーカラーの変更
デフォルトのマーカーを別の色に設定してみましょう。ただ楽しむために、マーカーのフォントサイズも大きくしましょう。これは::marker疑似要素で行うことができます。
summary::marker {
color: #e162bf;
font-size: 1.2em;
}
結果は以下に示されています。
それは素晴らしく、シンプルなソリューションですが、残念ながら::markerはSafariではサポートされていませんので、それが問題になる場合は、以下の他のオプションを参照してください。
マーカーのスペーシングの変更
デフォルトでは、マーカーアローは要約テキストにかなり近いです。そのlist-style-positionはinsideに設定されています。outsideに変更すると、左パディングを追加して要約テキストとマーカーの間にスペースを作成できます。また、三角形がコンテナの外にはみ出ないように、左マージンも追加する必要があります。
summary {
list-style-position: outside;
margin-left: 30px;
padding: 10px 10px 10px 20px;
border-radius: 5px;
}
結果は以下に示されています。
I’ve exaggerated the spacing between the arrow marker and the summary text just to make it obvious. Unfortunately, using list-style-position: outside; with the <summary> element doesn’t work in Safari. Fortunately, there are other options, as we’ll see below.
マーカーシェイプの変更
私たちの<summary>要素のマーカーは三角形である必要はありません。好きな文字に置き換えることができます:
summary {
list-style-type: '⬇ ';
}
上で試したスペーシングの代わりに、'⬇ '（矢印の横にスペースがあります）を使用しました。
今度は三角形の代わりに下向きの矢印になりました。しかし…その下向きの矢印は、<details>要素が開いているときに変化しません。それは<details>要素がclosedとopenの2つの状態を持っており、私たちはclosed状態のみのマーカースタイルを設定しているからです。それでは、open状態のマーカーも設定しましょう:
details[open] > summary {
list-style-type: '⬆ ';
}
今回は上向きの矢印を使用しました。これにより、以下に示す結果が得られます。
くそ！再びSafariは期待に応えてくれず、<summary>要素でもlist-style-typeをサポートしていません。しかし、落胆することはありません。以下ではより派手な解決策を見ていきます。
他の様々な文字を試すことができます。例えば+や-、✓やΧまたは✗、⋁や⋀、さらには★や🍏 🍌 🍓 🍋 🍐などの他の文字で楽しむこともできます。ただし、これらの文字はすべてのシステムで動作するとは限りませんので、少し注意してください。そして再び、list-style-typeはSafariでは動作しません。
<summary>要素のカスタムマーカーの作成
上述の通り、デフォルトのマーカーに異なる文字を設定し、色やフォントサイズなどのスタイルを適用することはできますが、そうすることには問題がある場合があります。より良い選択肢として、マーカーを完全に削除し、完全にカスタムの代替案を作成することが考えられます。
カスタムマーカーの削除
リストアイテムマーカーと同様に、マーカーを完全に削除することができます：
summary {
list-style: none;
}
/* またもやSafari */
summary::-webkit-details-marker {
display: none;
}
標準のlist-style: noneは、…（当てはまるかな？）…Safariを除くすべてのブラウザで動作します。少なくとも、この場合は専用の-webkit-オプションがあります。
注意：<summary>要素からマーカーを削除する別の方法は、<summary>要素にlist-item以外のdisplay値（例えばblockやflex）を与えることです。これは…（言うまでもないですね？）…Safariを除くすべてのブラウザで動作します。
これで要素にはマーカーがありません。
マーカーがないと、この要素がクリック可能であることの視覚的なヒントが全くありませんので、そのままにしておくのは良いアイデアではありません。
背景画像をマーカーとして使用
次のように背景に画像を配置することができます：
summary {
list-style: none;
padding: 10px 10px 10px 40px;
background: url(arrow.svg) no-repeat 14px 50%;
background-size: 18px;
font-weight: bold;
}
結果は以下の通りです。
背景画像を<summary>要素に直接使用する欠点は、<details>要素が開いているときにそれを回転させることができないことです。なぜなら、CSSで背景画像に直接アニメーションを設定することはできないからです。（もちろん、開いた状態用の別の画像を使用することは可能ですが、それでもアニメーション化することはできず、もっと楽しいですよね。）そのため、背景画像を使用する場合は、回転やアニメーションが可能な要素に配置する方が良いでしょう。
::afterを使って背景画像をマーカーとして使用する
背景画像を::after疑似要素内に配置してみましょう。
summary {
display: flex;
}
summary::after {
content: '';
width: 18px;
height: 10px;
background: url('arrow.svg');
background-size: cover;
margin-left: .75em;
transition: 0.2s;
}
details[open] > summary::after {
transform: rotate(180deg);
}
このコードのライブデモを以下に示します。
<summary>要素にdisplay: flexを使用して、矢印を水平に簡単に配置できるようにしました。
この設定の良い点は、矢印にアニメーションを追加できることです。（Safariではアニメーションがうまく動作しないようですが、十分な動作をしており、このブラウザにはちょっと飽きてきました！）
summary要素をタブのように見せる
<summary>要素を全幅に設定してきましたが、必ずしもそうでなくても良いです。このようなシンプルな変更で、もっとタブのように見せることができます。
summary {
display: inline-flex;
}
以下に例を示します。
details要素の幅を制限する
これまでのすべての例では、<details>要素がブロックレベル要素としてコンテナの全幅に広がっていました。しかし、それほど広くない幅を設定したい場合は、width: 50%;のように幅を変更できます。また、インライン表示に設定してコンテンツと同じ幅にすることもできます:
details {
display: inline-block;
}
下のタブをクリックして、<details>要素の狭い幅を表示してください。
上記のPenでdisplay: inline-blockをwidth: 50%に変更してみてください。
サマリーの端にマーカーアローを配置
次は少し違ったことをしてみましょう。<summary>要素の右側にマーカーアローを配置します。display: flexを使用しているため、矢印を右端に移動するには<summary>要素にjustify-content: space-betweenを追加するだけです:
summary {
display: flex;
justify-content: space-between;
}
背景画像なしで::afterをマーカーとして使用
実際の画像なしで::afterを使用する他の方法もあります。ここでは、境界線だけを使用した::afterの例を紹介します:
summary::after {
content: '';
width: 0;
height: 0;
border-top: 10px solid #15171b;
border-inline: 7px solid transparent;
transition: 0.2s;
}
こちらにライブデモがあります。
これで、閉じた状態と開いた状態の間で回転する矢印ができました。また、<details>要素に素敵なドロップシャドウも追加しました。
画像なしで::afterを使用する別の方法は、contentプロパティ内にUnicode文字を配置することです。
summary::after {
content: "\25BC";
transition: 0.2s;
}
これは三角形（▼）をマーカーとして設定しています。このCodePenデモに示すようにです。
何千ものUnicodeシンボルがあり、探索するのはとても楽しいです。それぞれにU + 25BCやU + 025BCのようなコードが付属しています。そのコードをcontentプロパティ内で使用するには、+の後の文字をcontentの引用符内に置き、先頭に\を付けます: content: "\25BC"。先頭に1つ以上のゼロがある場合は、それらを省略できます。（例えば、U + 02248は"\02248"または"\2248"になります。）
その他の付属物
これまでにやったことは十分以上ですが、他にも楽しめることがありますので、ここでいくつか試してみましょう。
<details>要素のホバー効果
様々なホバー効果を<details>要素に設定できます。例えば、次のようなことができます:
details {
transition: 0.2s background linear;
}
details:hover {
background: #dad3b1;
}
その過程で、open状態で<summary>のテキストカラーもトランジションさせましょう:
details > summary {
transition: color 1s;
}
details[open] > summary {
color: #d9103e;
}
結果は以下に示されています。
<summary>要素の背景変更だけを設定することもできます。
<details>要素の開閉をアニメーション化する
ハハ、だまされたね！<details>要素の開閉をアニメーション化することはできないようだ。MDNによると:
残念ながら、現時点では開閉の遷移をアニメーション化する組み込みの方法はありません。
それでも、<details>要素の内容をアニメーション化して少し楽しむことはできます。例えば、内容が明らかになったときにフェードインするように設定できます:
details article {
opacity: 0;
}
details[open] article {
animation: fadeIn .75s linear forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
以下に結果が示されています。
別のトリックとして、コンテンツをスライドインすることもできます:
details {
overflow: hidden;
}
details[open] article {
animation: animateUp .5s linear forwards;
}
@keyframes animateUp {
0% {
opacity: 0;
transform: translatey(100%);
}
100% {
opacity: 1;
transform: translatey(0);
}
}
以下に結果が示されています。
少し安っぽいかもしれませんし、過剰かもしれませんが、とにかく試す価値はあります。残念ながら、これらのアニメーションは要素が初めてクリックされたときだけ機能します（どういうわけか、ブラウザの開発者ツールが開いている場合を除く！）。効果を繰り返し機能させるためにはJavaScriptの介入が基本的に必要です。
開閉状態でのサマリーコンテンツの変更
上記のデモでは、<details>要素が開いているか閉じているかに関係なく、<summary>は常に同じテキストを持っていました。しかし、それを変更することができます。まず、現在の「クリックしてください」というテキストをそのままにしながら、::after疑似要素を使用して各状態用の追加テキストを加えてみましょう:
summary::after {
content: " to show hidden content";
}
details[open] summary::after {
content: " to hide extra content";
}
それが以下に示す結果をもたらします。
サマリーのカーソルの変更
<details>要素のデフォルトのカーソル（またはマウスポインタ）はちょっと変わっています。ほとんどの場合、標準の矢印であり、<summary>テキスト上でホバリングするとテキストポインタ（またはIビーム）になります。
楽しみのために、ハンドカーソル（または「ポインタ」）に変更してみましょう：
summary {
cursor: pointer;
}
これは、<summary>要素全体でホバリングするときにマウスポインタを手の形にします。以下に示すように。
代わりに<details>要素上でカーソルを設定することもできます。これにより、<details>要素全体にハンドカーソルが強制されます。ただし、私はクリックする予定のものにのみカーソルを残すことを好みます。
アクセシビリティフォーカススタイルの変更
キーボード経由でページを移動している場合、<details>要素にタブを移動し、returnを押して開くことができます。フォーカス中、<summary>要素にはデフォルトのアウトラインがあります。以下の画像は、これがさまざまなブラウザでどのように見えるかを示しています。
それらはほとんど同じです：ほとんどの場合、シンプルで暗い（青または黒）、約3px幅の固体アウトラインです。
<details>要素にはフォーカスされたときの多くのスタイルを設定できますが、ここではシンプルなものを証明のコンセプトとして、アウトラインを赤い点線に変更してみましょう。
summary:focus {outline: none;}
summary:focus-visible {outline: 3px dotted #ff0060;}
summary {padding: 10px;}
デフォルトでは、<summary>要素をクリックした際にフォーカスオウトラインは表示されません。しかし、フォーカススタイルを変更すると、そのスタイルはキーボードを使わないユーザーにも表示されるようになります（つまり、マウスで<details>要素をクリックした場合でも）。そこで上記のコードでは、outlineをnoneに設定し、代わりにfocus-visibleを使用してスタイルを設定しています。これにより、フォーカススタイルは実際に役立つキーボードユーザーだけに表示されます。
以下の画像は新しいスタイリングを示しています。
ライブデモはこちら。
これを使ってアニメーションや背景色など、<details>要素がフォーカスされたときに多彩な演出ができるでしょう。さらなる実験はあなたにお任せします。
アコーディオンリストのような複数の詳細要素を使用する
複数の<details>要素を連動させるための提案があり、ある要素が開くと他の要素が閉じるような動作を実現することが提案されています。HTML仕様では共有のname属性を複数の<details>要素間で使用することを提案しています。
HTMLとCSSだけでこれを行う方法は現時点ではありませんが、JavaScriptを使ってこれを行ういくつかの巧妙な例があります（たとえばこちら、こちら、そしてこちらなど）。
CSSでできる最善の方法は、上記で取り上げたテクニックを使用して、現在開いている要素を他の要素とは異なるスタイルで装飾することです。
ここに簡単な例があります：
details {
background-color: #2196F3;
}
details[open] {
background-color: #ce0e99;
}
概要内の見出しのスタイリング
HTMLの構造に関心を持つ一部の開発者は、<summary>要素内に見出し要素を配置することを好みます。それが役立つかどうかは議論の余地がありますが、デフォルトのレンダリングは素晴らしくありません。見出しが矢印の下の行に座っています。これは、見出しをdisplay: inlineまたはdisplay: inline-blockに設定することで修正できます：
summary h2 {
display: inline;
}
このデモをCodePenでチェックアウトできます。
結論
上記で示唆した通り、<details>要素のスタイル付けには多くの簡単な方法があります。境界線、パディング、背景色を設定するのは簡単で、これらだけで見た目を大きく改善できます。デフォルトのマーカーをスタイル付けるいくつかの方法は非常に便利ですが、フォレストの果物会社 () がマーカーのスタイル付けに多くの問題を抱えているため、完全にカスタムのマーカー要素を作成する方がよいかもしれません。（ただし、マーカーのスタイル付けは、Safariで<details>要素を壊すわけではありません。）
CSSのみで<details>要素の開閉をアニメーション化しようとする試みはありましたが、最良の場合でも技巧的であり、そのウサギホールに入る価値はありません。開閉をアニメーション化したい場合は、JavaScriptが必要です。
<details>要素についてさらに学ぶには、以下をチェックしてください：
<details>要素のスタイル付けに他にクールな方法を考えたら、Twitterで教えてください。ここで紹介するかもしれません。
Source:
https://www.sitepoint.com/style-html-details-element/