CSSと格闘した

一念発起して自創作R18漫画『先輩はみんなの所有物（もの）だから』の紹介ページを作ったので見てください～

後輩たち→先輩（男）の先輩総受け創作R18漫画紹介ページ

syumi-jitsu.com

…しかしただ漫然とこの紹介ページを見てほしいのではない。本当に見てほしいのは、《登場人物》セクションに置かれたアコーディオンメニューである。

なんかかっこいい感じにしたかった。スペースも取りたくないし、最初は圧縮されていて気になるキャラクターの項目を選ぶとニョニョニョと伸びてきて画像と紹介文がでてくるやつがいい。あれを設置しよう！

というわけであれ（正式名称「アコーディオンメニュー」）を設置しようとしたのだが、意外と方法がなかった。wordpressのブロックにはそういった動作ができるものはなく、使用しているwordpressテーマ独自の機能にも、すでに入れてある各種プラグインにも希望する動作になるものがなかった。

これはあれか…触るかCSS！

というわけでWEB上で公開されているHTMLとCSSのサンプルコードにさらに手を加えて、トライアル＆エラーでアコーディオンメニューを作成・実装した。参考させていただいたのはこちらの記事です。ありがとうございます。

今では珍しくもなくなったCSSだけでアコーディオンもググればたくさん出てきます。個人的にお世話になっているソースはあるのですが、今後もこれ以外は無いかな！と思っ…

hon-dana.org

最近勉強中のCSSで知らないプロパティとよく遭遇するのですが、その中で便利だな〜と思った flex-wrap を解説していきます。概要フレックスボックスを使…

note.com

こちらの記事を参考にして、メニュー内部の画像と文章の並びがデバイスによって変わるレスポンシブなアコーディオンメニューを作成した。

たぶんWEBデザインとかやってる人には大したことない実装かもしれないが、やった本人としてはこんな曖昧模糊としたCSS知識（「たしか<div>ってやつで挟めば大概なんでもいけるはず」）¹でなんとか希望した形に作り上げることが出来たので達成感が半端ない。うれしい。見てほしい。

たまに必要に駆られてCSSを触ると、いつもとは違う頭の使い方が要求されてパズルのようで楽しい。なんかおもしろげなCSSがあったらじゃんじゃん実装してみたい。