0

CSSでタブの切り替え表示を実装する方法

CSSでタブの切り替え表示を実装する方法

タブをクリックすることで、表示が切り替わる機能をCSSのみで実装していきます。
サンプルは「画像とテキスト」を切り替えるものをご用意しました。

DEMO

まずは、HTMLから記入していきましょう。

HTMLコード

CSSで表示を切り替えるにあたり、ラジオボタンを使用します。
実際にはラジオボタンは非表示にし、label要素をタブボタンとして連動させる動きになります。
input要素に付けたid名を、label要素のfor属性に指定し関連付けをしています。

CSSコード

解説

input[type=”radio”]{display: none;}で、ラジオボタンを非表示。
.tab_area labelに対しdisplay: inline-block;でタブボタンを横並びに配置。
.tab_panel{display: none;}で、写真とテキスト部分を非表示にしています。

#tab1:checked ~ .tab_area .tab1_labelという指定は、#tab1が選択された状態「#tab1:checked」の子要素.tab_areaの後ろの.tab1_label要素に対する指示になります。

 

間接セレクタ「~」について

 

間接セレクタの「~」結合子とは、同一の親要素を持つ兄弟要素を指定する場合に使用します。例えばA ~ Bという指定をした場合「A要素の後ろに記述したすべてのB要素に適用する」ことを意味します。ただし、A要素の子要素であるB要素であるため、その下の孫要素などには適用されませんのでご注意ください。

間接セレクタを使用したケースで少し混乱してしまいそうですが、ひとつずつ理解できれば応用できそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > CSSでタブの切り替え表示を実装する方法