jQueryを使わず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>ぼくが6つのとき、よんだ本にすばらしい絵があった。『ぜんぶほんとのはなし』という名まえの、しぜんのままの森について書かれた本で、そこに、ボアという大きなヘビがケモノをまるのみしようとするところがえがかれていたんだ。だいたいこういう絵だった。<br><img src=”images/boa.png” alt=”"><br>「ボアというヘビは、えものをかまずにまるのみします。そのあとはじっとおやすみして、6か月かけて、おなかのなかでとかします。」と本には書かれていた。
そこでぼくは、ジャングルではこんなこともおこるんじゃないか、とわくわくして、いろいろかんがえてみた。それから色えんぴつで、じぶんなりの絵をはじめてかいてやった。さくひんばんごう1。それはこんなかんじ。<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>ぼくはこのけっさくをおとなのひとに見せて、こわいでしょ、ときいてまわった。
でもみんな、「どうして、ぼうしがこわいの?」っていうんだ。
この絵は、ぼうしなんかじゃなかった。ボアがゾウをおなかのなかでとかしている絵だった。だから、ぼくはボアのなかみをかいて、おとなのひとにもうまくわかるようにした。あのひとたちは、いつもはっきりしてないとだめなんだ。さくひんばんごう2はこんなかんじ。<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属性に付け加えるだけで簡単に実装できるので使わせていただきました。

 

animatecss

 

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

あとはheaderの中に

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

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

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

 

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

 

  • デモ1 fadeInLeftUp
  • デモ2 bounceInDown
  • デモ3 flipInY
  • デモ4 rotateInUpLeft
  • デモ5 bounceIn

 

 

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

 

2 people like this post.
  • このエントリーをはてなブックマークに追加

記事の更新情報をチェックする

RSSリーダーで購読する

  • follow us in feedly

“jQueryを使わずCSSだけで出来るタブコンテンツ【レスポンシブ対応】” への2件のフィードバック

  1. じゅん より:

    こんにちは
    こちらの方法を使ってタブコンテンツを作ってみました。
    気づいたのですが、タブをクリックするたびにビューが強制的にページのトップに戻されてしまいます。
    これはどのように解決すればよいか方法があれば教えて頂きたいです。
    よろしくお願いいたします。

コメントを残す

サブコンテンツ
ホーム > WEB > jQueryを使わずCSSだけで出来るタブコンテンツ【レスポンシブ対応】