CSSでチェックボックスを使ったテクニックはいろいろ紹介してきましたが、いつもとはちょっと違ったUIエレメントを紹介します。 「Star Wars」のタイトルからして、もうワクワクしますねw デモページ Pure CSS3 Lightsaber Checkboxesの特徴 JavaScriptは無し! グリーンのライトセーバー(ヨーダ) レッドのライトセーバー(ダース・ベイダー) ブルーのライトセーバー(オビ=ワン) パープルのライトセーバー(メイスウィンドウ) MITライセンスのオープンソース 実装 実装もご紹介。 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="/path/to/lightsabers.css"> Step 2: HTML トリガーはチェックボックスで、チェックの有無で刀身を伸び縮