CSSだけで出来るタブコンテンツ

ふつうタブをつかったコンテンツの切り替え動作をつくるときJavaScriptを使うかjQueryライブラリで実装するのが一般的なのですが、今回はJSを使わずCSSのみで実装したタブコンテンツをつくりました。

CSSだけでつくったのでJavaScriptを無効にしたブラウザでも閲覧できて、実装も簡単なので便利だと思います。

デモ

サンプルファイルをダウンロード 

デモでは5種類のアニメーションを用意しています。

まずはHTMLのソースから。

<ul class=”tabs”>
<li>
<input type=”radio” checked name=”tabs” id=”tab1″>
<label for=”tab1″>tab 1</label>
<div id=”tab-content1″ class=”tab-content”>
<div class=”animated fadeInLeftUp”>
<p>子どものみなさん、ゆるしてください。
ぼくはこの本をひとりのおとなのひとにささげます。
でもちゃんとしたわけがあるのです。そのおとなのひとは、ぼくのせかいでいちばんの友だちなんです。
それにそのひとはなんでもわかるひとで、子どもの本もわかります。しかも、そのひとはいまフランスにいて、さむいなか、おなかをへらしてくるしんでいます。心のささえがいるのです。
まだいいわけがほしいのなら、このひともまえは子どもだったので、ぼくはその子どもにこの本をささげることにします。おとなはだれでも、もとは子どもですよね。（みんな、そのことをわすれますけど。）じゃあ、ささげるひとをこう書きなおしましょう。
（かわいい少年だったころの）
レオン・ウェルトに
</p>
</div>
</div>
</li>
<li>
<input type=”radio” name=”tabs” id=”tab2″>
<label for=”tab2″>tab 2</label>
<div id=”tab-content2″ class=”tab-content”>
<div class=”animated fadeInLeftUp”>
<p>ぼくが６つのとき、よんだ本にすばらしい絵があった。『ぜんぶほんとのはなし』という名まえの、しぜんのままの森について書かれた本で、そこに、ボアという大きなヘビがケモノをまるのみしようとするところがえがかれていたんだ。だいたいこういう絵だった。<br><img src=”images/boa.png” alt=”"><br>「ボアというヘビは、えものをかまずにまるのみします。そのあとはじっとおやすみして、６か月かけて、おなかのなかでとかします。」と本には書かれていた。
そこでぼくは、ジャングルではこんなこともおこるんじゃないか、とわくわくして、いろいろかんがえてみた。それから色えんぴつで、じぶんなりの絵をはじめてかいてやった。さくひんばんごう１。それはこんなかんじ。<br><img src=”images/hat.png” alt=”"></p>
</div>
</div>
</li>
<li>
<input type=”radio” name=”tabs” id=”tab3″>
<label for=”tab3″>tab 3</label>
<div id=”tab-content3″ class=”tab-content”>
<div class=”animated fadeInLeftUp”>
<p>ぼくはこのけっさくをおとなのひとに見せて、こわいでしょ、ときいてまわった。
でもみんな、「どうして、ぼうしがこわいの？」っていうんだ。
この絵は、ぼうしなんかじゃなかった。ボアがゾウをおなかのなかでとかしている絵だった。だから、ぼくはボアのなかみをかいて、おとなのひとにもうまくわかるようにした。あのひとたちは、いつもはっきりしてないとだめなんだ。さくひんばんごう２はこんなかんじ。<br><img src=”images/elephant.png” alt=”"><br></p>
</div>
</div>
</li>
</ul>

次にCSSのソース。レスポンシブデザインのサイトにも対応させました。

body,
html {
margin: 0;
padding:10px;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
font-family: helvetica;
}

/*　画像　*/

img {
max-width: 100%;
height: auto;
}

/*　タブ　*/

.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}

.tabs {
max-width: 650px;
height: 400px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}

.tabs li { float: left; }

.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: ‘Lily Script One’, helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}

[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}

.tab-content {
z-index: 2;
display: none;
text-align: left;
width: 100%;
height: 300px;
overflow-y: auto;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background: #08C;
padding: 15px;
color: white;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}

続いてタブが変わる時のアニメーションですが、こちらのサイト(Animate.css)が数十種類のアニメーションをHTMLタグのclass属性に付け加えるだけで簡単に実装できるので使わせていただきました。

こちらのアニメーションを選ぶページから気に入ったアニメーションにチェックをいれて【Built it】ボタンを押すとCSSファイルがダウンロードされます。

あとはheaderの中に

<link rel=”stylesheet” href=”animate-custom.css”>

と外部スタイルシートの設定をすれば大丈夫です。

アニメーションの変更は上記のソースだとHTMLのfadeInLeftUpの部分を「flashやshake, bounce, tada」などダウンロードしたanimated.cssに書いてあるように色々と変更可能です。

ちなみにデモでは以下のアニメーションを使っています。

• デモ１　fadeInLeftUp
• デモ２　bounceInDown
• デモ３　flipInY
• デモ４　rotateInUpLeft
• デモ５　bounceIn

レスポンシブデザインにも対応しているので自分のサイトに合うようにスタイルシート.tabsのmax-widthとheightなどを調節して使えます。