明日使うことはないかもしれないけどもきっといつか使いたくなるかもしれないワンポイントクソテクニック
はい、おはようございます。僕です。今日も明日役立つ豆知識をみなさんに提供していきたいと思います。やっぱり"誰かに役立つ"ことをやれないってのは生きている価値ないですよね。スピリチュアルで、意識高くて、誰かの言った受け売り・精神論、みたいなことをさも自分の意見のように言ってこうすれば「成功」しますなんて言っているような人は生きている価値ないですよねー。というわけで死にます。いままでありがとうございました。
― 終 ―
はい。どうも。だんだん冒頭の文章が茶番なのかマジで言っているのか分からなくなってきた僕です。というわけでタイトル通りネタバレ防止のワンクッションになりそうなHTMLのタグの使い方についてのお話をしようと思います。
まずはこちらをご覧ください。
クリックするとネタバレが展開できます。※ クリックする位置がよくわからないので雑に装飾してます。
今まではjQueryでなんやかんやしていく方法とかで実装していたんですけども InternetExplore 以外のブラウザは対応しているしもう別にいいのではとか思い始めたのですよね。これで脱jQueryとかできれば御の字ですけどもまだアニメーション部分のカスタマイズはあっちの方が強いのでデザインいじるんだったら必要だったりしてしまう。
使い方は以下の通りです。特にスクリプト書く必要がないので便利。
<details> <summary>詳細を見る</summary> <p>詳細情報</p> </details>
これでネタバレとかしたいけどもワンクッション置きたいときに置けるようになります。お手軽に実装できるのでみんな使おう!
おわり
参考
<details>: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN
<summary>: 概要明示要素 - HTML: HyperText Markup Language | MDN