>コーディングCSSでラジオボタンをタブメニューに変える2018/06/18この記事は2年以上前ですので、内容が古い可能性があります先日、ラジオボタンで実装済みのUIを急遽タブメニューにしたいというご要望をいただき、CSSを利用してタブメニュー風のデザインとして見せることにしました。ラジオボタンを元にCSSでタブメニューを作成する場合、JavaScriptが必要ないため動作も軽く、比較的簡単に実装することができます。欠点としては、擬似クラスや隣接セレクタなどを多用するため、残念ながらIE8以下のブラウザでは動作しません。type="radio"><em>MENU3</em><span>TEXT3</span></label></div>一部の環境ではlabelタグのfor属性がうまく動作しないため、ラジオボタン&タブ&内容をまとめてlabelタグで囲うのがポイントです。デモでは1つ目のラジオボタンにchecked属性を指定していますが、他のラジオボタンに指定することで、デフォルトでアクティブなタブを変えることができます。labelタグはインライン要素ですので、ブロック要素を内包することができません。そのため、ここではemタグとspanタグを使用しています。block;}Webkit系のブラウザの不具合を回避するため、ラジオボタンcheck時のスタイル指定の際は、隣接セレクタではなく間接セレクタを利用しています。参考::checked擬似クラスの隣接セレクターのWebkit系での挙動とかまとめ:今回はラジオボタンを利用した、CSSだけで構築するタブメニューの作成方法をご紹介いたしました。したシンプルなタブメニューが必要なときや、タブメニューだけのためにわざわざ新しいJavaScriptを追加したくないときに、手軽に設置できるCSSのタブメニューはいかがでしょうか。WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。CSS3author関連記事[WordPress]WP_Queryのクエリ数を削減する[WP10]WP10は弊社が掲げる「WordPressを使った10倍速開発」です。10倍とは、フルスクラッチに比べて10倍ということです。...この記事をシェアする:[WordPress]ACFのフィールドグループをPHPで管理する[WP10]WP10は弊社が掲げる「WordPressを使った10倍速開発」です。10倍とは、フルスクラッチに比べて10倍ということです。...この記事をシェアする:【ACF】PHPにエクスポートした設定をインポート可能なJSONに変換するPHPにエクスポートしたフィールドグループ設定を再度GUIで修正できるように、PHPからACFの管理画面にインポート可能なJSONに変換する方法をご紹介します。62で下図のような挙動になってしまいました。ゴーストが右下から現れたような感じになってます。コードはこんな感じです。最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。S3のライフサイクル(Glacierからの復活と料金的な注意点)NEXTnpmとnpm@3をちょっとだけ比べてみる担当者の紹介デザイナーhino見やすさ&わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。かけ算から生まれる可能性へ。