Pure HTML5/CSS3のロマン ただしモバイルデバイスに限る。 しばしば話題にあがるHTML5/CSS3による気合戦法のアコーディオン(ないしクリッカブルなパーツ)を、モバイルデバイスでの動作をiOSおよびAndroidを中心に記述・検証してみました。 今のところメジャーなのは、:target戦法と:checked戦法だと思うので、それぞれ試しています。これらの擬似クラスを使って、状態制御を行いつつセレクタで表示状態のスタイルを適用します。 :target戦法 :target擬似クラス+アンカーリンクで状態を制御しながら、子要素としてコンテンツを表示させる方法。わりと手軽に使えるので、使い所さえ選べば良いのかも。 サンプル コード全体 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name=
![モバイル用に:targetや:checkedでつくるPure HTML5/CSS3なアコーディオンについて(追記 :checked版でAndroid4.x対応の改良コード)](https://cdn-ak-scissors.b.st-hatena.com/image/square/2183e9bbc25dbbdb50624f0d9497aa7861959398/height=288;version=1;width=512/https%3A%2F%2Fhavelog.aho.mu%2Fogp-default.jpg)