Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSSサンプル】タブ切り替え表示【JavaScript不使用】

 どうも!LSSです!!

 

昨日の記事の実験、

を用いてサンプルを作ってみました。

まず最初は普遍的な(?)ものを作ってみよう、と「タブ」をCSSで実現するのに挑戦!です。

 

 

タブ切り替え表示・サンプル

#nkm1,#nkm2,#nkm3,#nkm4{display:none;}
のように、カンマ区切りで複数のidに対して一括で指定する事ができます。

…これ、知ってても忘れそうになりますね^^;

#rdb1:checked~#nkm1{display:block;}
この「~」は「兄弟要素」を指定する事ができ、この例では
rdb1というidを持つ物がチェックされた状態の時のnkm1というidを持つ要素」
を指す事になりますが、HTML上で
nkm1rdb1より後に書かれている」
必要があります。
「兄弟要素」というより、厳密に言うと「弟要素」って事になりますね。
これで結構悩みましたw
タブ部分の文字数が多いと、スマホなど画面幅が狭い場合にレイアウトが崩れてしまいます。
プレビューで確認しながら設定したいところです^^;

文字サイズにもよりますが、自分の場合は3文字4項目ならスマホサイズでも収まりました^^

あ、それと。
このタブでいうと「チルダ」と「CSS」が「はてなキーワード」対象で、勝手にリンクに書き換えられるため、タブクリックしづらくなります。
その場合、前後に[]をつけて、
<label id="lb2" for="rdb2">[]チルダ[]</label>
のようにする事で、はてなキーワードリンク化を防ぐ事ができます!
JavaScriptを使わず、CSSだけでもこんなのが作れるんですね^^

そう思うと、疑似クラス「:checked」は革新的なセレクタかも!!

 

 

コード

<style><!--
.divbox{position:relative;}
#lb1,#lb2,#lb3,#lb4{position:relative;top:8px;padding:0px 10px;border-width:1px;border-color:black;border-style:solid solid none solid;border-radius:8px 8px 0px 0px;z-index:1;transition:0.2s ease-out 0s;}
#rdb1,#rdb2,#rdb3,#rdb4{display:none;}
#nkm1,#nkm2,#nkm3,#nkm4{display:none;position:relative;padding:8px;width:100%;border-radius:0px 8px 8px 8px;border:1px solid black;z-index:0;}
#rdb1:checked~#lb1,#rdb2:checked~#lb2,#rdb3:checked~#lb3,#rdb4:checked~#lb4{top:10px;}
#rdb1:checked~#nkm1,#rdb2:checked~#nkm2,#rdb3:checked~#nkm3,#rdb4:checked~#nkm4{display:block;}
#lb1,#nkm1{background-color:#ffdddd;}
#lb2,#nkm2{background-color:#ddffdd;}
#lb3,#nkm3{background-color:#ddddff;}
#lb4,#nkm4{background-color:#ffffdd;}
--></style>
<div class="divbox">
<input id="rdb1" checked="checked" name="rdb" type="radio" />
<input id="rdb2" name="rdb" type="radio" />
<input id="rdb3" name="rdb" type="radio" />
<input id="rdb4" name="rdb" type="radio" />
<label id="lb1" for="rdb1">タブ1</label><label id="lb2" for="rdb2">タブ2</label><label id="lb3" for="rdb3">タブ3</label><label id="lb4" for="rdb4">タブ4</label>
<div id="nkm1">タブ1に対応する文章</div>
<div id="nkm2">タブ2に対応する文章</div>
<div id="nkm3">タブ3に対応する文章</div>
<div id="nkm4">タブ4に対応する文章</div>
</div>

 

このコードをコピペして(はてなブログの場合はHTML編集画面に)、青文字部分を変更するだけで使えます^^

タブの見出し部分(「タブ1」など)はHTML編集画面で書き換える必要がありますが、「文章」のほうは「編集 見たまま」画面でも書き換える事ができます。

 

また、タブと中身の色は、

#lb1,#nkm1{background-color:#ffdddd;}
#lb2,#nkm2{background-color:#ddffdd;}
#lb3,#nkm3{background-color:#ddddff;}
#lb4,#nkm4{background-color:#ffffdd;}

この部分で指定してます。
好きな色に変更可能です^^

 

 

作ってから、ググってみると…

ほぼ同じコードで作って解説しているサイトが多数w

 

自力で作っても同じ結論に達した、という事は「タブ切り替え表示」の需要があり、またコードとして最適解ぽいですね。

 

「Little Strange Software (ちょっと変わったソフトウェア)」としてはちょっと残念なような気もwww

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^