HTMLのdetailsで折りたたみできる要素を作成する

HTMLのdetailsは簡単な記述で折りたたみできる要素を作成して展開表示することができるイケてるタグらしいとの情報を今さら見つけました。

HTMLのdetailsをどのような使い方をすればいいのか基本的なことを覚えてから、いくつかの折りたたみできる要素を作成してみました。

1. まずはHTMLのdetailsの使い方
2. HTMLのdetailsにsummaryを組み合わせる
3. あとはdetailsタグに折りたたみ要素を入れるだけ
4. detailsで折りたたみメニューを作成してみる
5. detailsの三角矢印を消したい

まずはHTMLのdetailsの使い方

detailsはHTML5.1で追加されたタグです。

IEには対応してないです。

detailsタグを記述するときの使い方は開始タグと終了タグが必要です。

<details></details>

<details></details>とタグを記述してブラウザで表示確認すると三角矢印と詳細の表示がされます。

このときの表示確認でブラウザの検証ツールを開いて三角矢印をクリックすると、htmlに記述した<details></details>の開始タグは<details>ではなく、<details open>になります。

HTMLのdetails開始タグが<details open>の場合は、<details></details>要素内で折りたたまれていた展開表示する要素が開いた状態になってることを意味します。

<details open></details>

なのでHTMLのdetailsタグを使用して最初から表示する内容を開いておきたい使い方をしたい場合には、<details open></details>とマークアップすることで表示した状態から折りたためるようにもできます。

<details></details>
折りたたまれた状態から表示できる

<details open></details>
表示した状態から折りたたみできる

HTMLのdetailsにsummaryを組み合わせる

HTMLの<details></details>と<details open></details>のどちらで折りたたみできる要素を作成しても、details要素の子要素にsummaryを組み合わせると、detailsのデフォルトで表示する「詳細」のテキストを任意に変更できます。

<details>
    <summary>詳細を開く</summary>
</details>

HTMLのsummaryもHTML5で追加されたタグです。

<summary></summary>は開始タグと終了タグが記述の時に必要で、親要素となる<details>のキャプションとか要約の役割にできます。

あとはdetailsタグに折りたたみ要素を入れるだけ

HTMLの<details></details>タグで親要素にして、<summary></summary>を記述したら、あとはdetailsに折りたたむ要素を入れるだけです。

<details>
    <summary>詳細を開く</summary>
    <p>展開表示される中の要素</p>
</details>

親要素の<details></details>に囲まれた<summary></summary>のテキストが折りたたまれた要素を表示にしたり非表示にする切り替えのスイッチになり、p要素の内容が展開表示します。

HTMLで折りたたみできるようにする仕組みの作成が必要なlabelとinputよりも、簡単な使い方を覚えるだけで実装できるdetailsが断然に簡単です。

detailsで折りたたみメニューを作成してみる

HTMLのdetailsを使っていろんな要素を折りたたむことができますが、detailsで折りたたみメニューを作成して展開表示させたいと思います。

いつもはlabelとinputの組み合わせで、折りたたみ(アコーディオン)メニューを作成するのですが、detailsでもアコーディオンメニューが作成できそうです。

detailsで折りたたみメニューを作成したHTMLコードは以下です。せっかくなので折りたたみました。「HTMLコードを開く」でHTMLが展開します。

HTMLコードを開く

<div class="details_container">
        <details>
            <summary>メニューを開く</summary>
            <ul>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
            </ul>
        </details>
        <details>
            <summary>メニューを開く</summary>
            <ul>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
            </ul>
        </details>
    </div>

detailsで折りたたみメニューを作成したHTMLにCSSをあてて折りたたみメニューをデザインしたCSSは以下のように、ごにょごにょしました。

.details_container{
    color: #fff;
    width: 100%;
    max-width: 500px;
}
.details_container summary{
    display: inline-block;
    width:250px;
    background-color: #373b3c;
    margin:5px 0;
    padding: 15px;
    text-align: center;
    outline: none;/*青い枠を消す*/
}
.details_container ul > li{
    background-color: #3f51b5;
    width: 250px;
    margin: 10px 0;
    padding: 15px;
    text-align: center;
}
.details_container ul{
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: -10px 0;
}

開閉ボタンになるsummaryと折りたたまれて展開するメニューリストをパディングで余白を持たせる程度のアコーディオンメニューですが、checkedの擬似クラスセレクタを使用しない分、簡単に作れるのを実感できました。

また<summary></summary>要素はクリックして折りたたみ要素を開閉するときに青い枠が表示しますが、これはoutline: none;で消すことができます。

detailsの三角矢印を消したい

HTMLのdetailsで折りたたみできる要素を作成して表示する三角矢印を消したいです。どうすれば消せるのか？summary {display: none;}と単純に指定しても消えない。

どうにも自分だけでは、detailsの三角矢印を消したい願いが叶いそうにないので調べたら解決できました。

以下のようにCSSを記述すると、detailsの矢印が消えます。

summary {
    display: block;
}
summary::-webkit-details-marker {
    display: none;
}

display:blockの指定では、矢印を上書きして消すことができるようです。

ChromeとSafariは-webkit-details-markerというのをセレクタに使用してdisplay:noneで矢印が消えました。

-webkit-details-marker初めて知りました…

detailsの三角矢印を消したかった理由は、アイコンを擬似要素で表示したかったからです。

summary::before{
    color: deeppink;
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    padding-right: 10px;
}
details[open] summary::before{
    font-family: "Font Awesome 5 Free";
    content: '\f107';
}

detailsの要素が折りたたまれてるときと、展開したときに別々のアイコンを上のCSSのようにして表示できます。