移転先や企画サイトで使っていて、なかなかいいなあと思うタグを紹介。
前にTwitterでも紹介したものと同じやつ。
お題とかを、長々と書くのではなくちょっとまとめたい、けど子ページ作るのは面倒…というときにおすすめのhtmlタグです。
こちら↓
見出し的なもの
本文的なもの
<details> <summary>見出し的なもの</summary> 本文的なもの </details>
HTMLに直打ちで使える、クリックすれば開くやつです。
デフォルトのままで問題なければ、CSSで何かを指定しなくてもよいので、大変便利です。
あと、デフォルトだと選択したときに枠線が出るんですが、それが個人的にはどうにも好きになれないです。
それはCSSで outline: none; と指定すれば消せるので簡単に解消できるのですが、ユーザビリティ的にはどうも推奨されないようです。
（「開く場所」だとわかりにくくなるため）
そのため、自サイトではフォントを変えたり、detailsの周りに枠線をつけたりしてアピールしています。
企画サイトでは、フォントの変更とホバー時にフォントカラーを変更してアピール。
summaryのホバー時にはカーソルがポインタにもなります。
ただ、ホバー時の挙動はスマホから見たときにはタップ時にしか反映されないので、少しわかりにくい。
details{ border: solid 1px #44617b; } summary{ outline: none; cursor: pointer; }
企画
summary:hover{ cursor: pointer; color: #a25768; text-shadow: 1px 1px 2px silver; }
開くときのアニメーションの設定はどうにも難しかったので、コピペで実装しています。
一応（比較的）簡単なやりかたもあるようですが、スマホとPCではズレそうな感じが否めないのでやめて、なんかよくわからないけどすごそうなやつを使っています（？）
[参考までに自サイトのリンク]
自サイトだと、企画とかのページに多用しまくっています。
http://esoragotoep.xrie.biz/?guid=onesoragotoep.60417.xrie.biz
企画は、最初の注意事項とかをまとめています。
