先日CODEPENで「何か使えるテクニックはないかな〜」とネットサーフィンしながらイロイロと物色していたところ、「Expanding Column Layout」というスタイルシートのテクニックを見つけました。 以前、本ブログで「CSS3 Flexbox Accordion」を紹介しましたが、その進化版といった感じです。 使いづらい部分や小さなエラーがあったので、その辺りを改良して下記URLにサンプルを作りました。 SAMPLE : https://on-ze.com/demo/jquery-expanding-column-layout/ 各メニューをクリックするとコンテンツが浮かび上がる仕組みですが、さすがにCSSのみでの実装は不可能で、動作の部分はjQueryに頼っています。 元ネタはコチラ→https://codepen.io/ettrics/pen/ZYqKGb ウェブデザインの
![【jQuery + CSS】レスポンシブでヌルヌル動く[Expanding Column Layout]を使ってみました。](https://cdn-ak-scissors.b.st-hatena.com/image/square/2356c42c2f39cdbcfc7ae55dc9cefd0782e8fa6d/height=288;version=1;width=512/https%3A%2F%2Fon-ze.com%2Fwordpress%2Fwp-content%2Fthemes%2Fonze-2022%2Finc%2Fthumbnail%2F600x360x80-6971176895bc0fdad68bddadbbd8dd7b-expanding-column-layout.png)