ホームページの文章をすっきりさせたい！
いろいろ書きたいことがありすぎて、書いてみると読者にとって読みにくくなってしまうこととかありますよね。かと言って折り畳み機能を導入するのにjavascriptやらcssやらたくさんコードを書かないといけないのは面倒です。
実はHTML5より、detailsタグを使用して簡単に折りたたむ機能を導入できるようになりました。
本記事ではdetailsタグを使用した折りたたみ機能（アコーディオンメニュー）の導入方法とそのデザイン方法をYOKOTAが紹介します！
htmlだけで文章の折りたたみを実現！？
ホームページのコンテンツを作成しているときに目次や、表や画像が邪魔になってしまい読みにくくなってしまうことがあります。
そういう時は文章を折りたたんで、見えなくすることで文書を読みやすくすることができます。
しかし、ウェブ上の文章を折りたたむには、JavaScriptやらCSSやらを使用して、それぞれ10行くらいコードを書かなければHTML5以前は実現できませんでした。
しかし、HTML5以降に新しく「detailsタグ」が導入され、文章の折りたたみを楽に実現できるようになりました。
下記、実際の折りたたみの例です。
See the Pen
Details Default by codepen1 (@codepen112233)
on CodePen.
このように内容を隠すことができます。
アコーディオンメニューと呼ばれたりもします。
IEとOPERA MINI以外に現在対応しています。
詳しくは下記の「caniuse.com」で確認してください。
参考：caniuse.com
次に実際の導入方法を説明します。
htmlだけで折りたたみができるdetailsタグのご紹介
先に紹介したアコーディオンメニューですが下記のようにコーディングすれば実現します。
|
1 2 3 4 5 6 |
<details> <summary>ここをクリックしてください。</summary> <li>折りたたむ内容</li> <li>折りたたむ内容</li> <li>折りたたむ内容</li> </details> |
必要なコードはdetailsタグとsummaryタグの二つしかありません。
summaryタグを使用して、アコーディオンメニューのタイトルを設定して
それ以降は実際に折りたたむ内容を記述します。
上記のコードの書き方だと閉まった状態（折りたたんだ状態）で表示されていますが、最初から開いた状態で表示したい時もありますよね。
例えば、目次などは最初から開いていたほうが読者にとってわかりやすいし、縦に幅を取るので畳めると読みやすくなります。
そういう時は下記のように detailsタグにopen属性を付けておくことで実現できます。
|
1 2 3 4 5 6 |
<details open> <summary>ここをクリックすれば折りたためます</summary> <li>折りたたむ内容</ii> <li>折りたたむ内容</li> <li>折りたたむ内容</li> </details> |
open属性を付けた状態でdetailsを利用すれば開いた状態で文章が表示されており、クリックすれば閉じることができます。
detailsタグはopen属性を付けたり外したりすることで、開いたり閉じたりするわけですが、open属性を付けたときの処理と、外した時の処理をそれぞれ変更することも可能です。
下記をご覧ください。
See the Pen
details open属性 by codepen1 (@codepen112233)
on CodePen.
本コードでは、summaryタグの内容をspanタグで囲って、それぞれclassを付けています。
その後、cssを通じてopen属性がついた場合の処理と、open属性を外した時の処理を変えております。
open属性を付ける場合
|
1 2 3 |
details[open] .open { display: none ; } |
open属性を外す場合
|
1 2 3 |
details:not([open]) .close { display: none ; } |
閉じたり開いたりした際に、summary部分も変更になっていますよね。
次の章では本detailsタグをCSSでデザインできるようしてみましょう。
htmlとcssで折りたたみをデザインできる！
detailsタグをデザインするにはやはりCSSが必要になってきます。
まず初めに▶を消して、ほかのものに変えてみましょう。
▶を消すにはdetailsのsummaryタグを指定して、以下のコードをCSSで当ててやれば実現できます。
|
1 2 3 |
details summary::-webkit-details-marker { display: none; } |
下記のコードをご覧ください。
See the Pen
details by codepen1 (@codepen112233)
on CodePen.
①は、デフォルトのdetailsタグで何も加工しておりません。
②は、-webkit-details-markerを利用して、三角形の矢印を消しております。
③は、矢印を消した後、contentプロパティを利用して、summaryの前に擬似要素の「before」を使用して、■を付けることで、▶の代わりに表示させることができています。
疑似要素の「before」と「after」については詳しくは下記の記事を読んでいただければよくわかるので、参考にしてください。
CSSのbeforeとafterとは？擬似要素について解説！
④は、背景色を青っぽく変えておりますが、このままだとアコーディオンを開いた後の色も変わってしまっております。
⑤では、details summary{とsummaryタグを指定してやることで、summary要素のみ背景を変えることができます。
では、summaryではなく、コンテンツの背景のみ変更する場合はどうすればいいのでしょうか。
その際は、details内のliタグに書かれたコンテンツをdivなどで囲み、classかidを当てれば色など変更することが可能です。
See the Pen
details 2 by codepen1 (@codepen112233)
on CodePen.
では最後にアニメーションを利用してふわっと出てくるアコーディオンメニューを紹介します。
アニメーションについては下記の記事を参考にしてください。
実践で学ぶ！CSSアニメーション〜入門編〜
下記のコードをご覧ください。
See the Pen
details with animation by codepen1 (@codepen112233)
on CodePen.
上記のコードでは、OPEN属性が付くとアニメーションが実行されるように設定されております。
|
1 2 3 |
details[open] .content { animation: fadeIn 2.0s ease-in-out; } |
コンテンツの出てくるスピードを変更したかったらanimationプロパティの“fadeIn 2.0s”を“0.9s”くらいに変更すれば早く表示させられます。
また、開かれたコンテンツは@keyframeを通じて上下左右から自由に表示させられます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@keyframes fadeIn { 0% { opacity: 0; transform: translateX(+100px); /* translateX(+100px)：右から表示 */ /* translateX(-100px)：左から表示 */ /* translateY(+100px)：下から表示 */ /* translateY(-100px)：上から表示 */ } 100% { opacity: 1; transform: none; } } |
transformプロパティを変更してやれば、コメントアウトしているような形に変えればコンテンツが出てくる方向を上からにしたり、左からにしたりと変更できます。
ぜひ、自分の気に入ったアコーディオンメニューを探してみてくださいね。
まとめ
今回はHTMLだけで文章を折りたたむdetailsタグとその導入方法について記事にいたしましたがいかがでしたでしょうか。
今まではJavaScriptやCSSを利用して作っていたアコーディオンメニューですがdetailsを使用すればシンプルに導入できることが分かったかと思います。
本記事のcodepenのサンプルの数値を変更したりして、自分の気に入ったアコーディオンメニューを模索してみてくださいね。
P.S.
私はマレーシアに住んでいるのですが、ここではランニングすると警察に捕まるほど厳しくロックダウンしていた頃があります。そんなマレーシアでも、規制を緩めるとまたコロナが増え始めているので、皆さんもご気を付けてお過ごしください。
