css

マウスホバーで開閉するアコーディオンメニュー（PC版）

アコーディオンメニューのサンプルコードを記載します。

画像を縦なり横なりに並べる時、サイズの異なる画像を混ぜると、一つだけ横幅が足りなかったり、画像の高さが違って不格好になったりしてしまいました。

わざわざ同じサイズの画像を使用するルールを決めるのも煩雑なので、異なるサイズの画像を複数表示しても、画像の縦横比率はキープしたまま同じ縦横サイズで見切れて表示させるスタイルの当て方をまとめました。

グリッドレイアウトには、float, display:table, flexでの対応がありますが、flexboxが主流なので、flexboxでの対応をまとめます。

IE11でdisplay:table-cell;を当てたテーブルにネストされたインライン要素に高さが出ずに画面が崩れていた時の対応。

カードやボックスなどの装飾を実現するエディタのカスタマイズ方法です。プラグインはAddQuicktagとClassic Editorを使用します。

エディタが Gutenbergだと今のところクイックタグが使えないので、Classic Editorで旧リッチエディタのクラシックエディタを使用できるようにします。グーテンベルグのエディタは「ブロックエディタ」と呼ばれています。

line-hgiehtでtransitionが効かないときは、line-heightの値をpxで指定していないか注意。

line-heightは、`line-height: 1;` のように、単位をつけずに指定することで、trnasitionが動く。