今回はHTMLとCSSとJavaScriptを使って３つのタブを作っていくコードを解説します。
サンプルコードは以下の通りです。
HTMLのサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang=ja dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="Tabcontrol" class="tabcontrol"> <a href="#tabpage1" class="tab1" onclick="changeTab">タブ1</a> <a href="#tabpage2" class="tab2" onclick="changeTab">タブ2</a> <a href="#tabpage3" class="tab3" onclick="changeTab">タブ3</a> </div> <div id="tabbody"> <div id="tabpage1" class="tab tab1"> <p>これはタブ1です。</p> </div> <div id="tabpage2" class="tab tab2"> <p>これはタブ2です。</p> </div> <div id="tabpage3" class="tab tab3"> <p>これはタブ3です。</p> </div> </div> </body> </html> |
HTMLでは３つのタブと、タブの中に表示する3タイプの文字を設定しています。
タブの中の中身を追加したい時はidがtabpageのdiv要素の中にコンテンツを書き足してあげましょう。
CSSのサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <style> .tab1 { background-color: orange; } .tab2 { background-color: green; display: none; } .tab3 { background-color: blue; color: white; display: none; } .tab { width: 500px; height: 100px; clear: left; } .tabcontrol a { width: 100px; display: block; float: left; border-radius: 10px 10px 0 0; text-align: center; color: white; } .Tabcontrol a:hover { text-decoration: underline; } .tabcontrol a:nth-child(1), .tabbody div:nth-child(1) { background-color: orange; } .tabcontrol a:nth-child(2), .tabbody div:nth-child(2) { background-color: green; } .tabcontrol a:nth-child(3), .tabbody div:nth-child(3) { background-color: blue; } </style> |
CSSではタブごとのカラーやサイズなどのレイアウト設定をメインに設定しています。
ここではタブ切り替えに関するコードは特に記述していません。
JavaScriptのサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script type="text/javascript"> var tabs = document.getElementById('Tabcontrol').getElementsByTagName('a'); var pages = document.getElementById('tabbody').getElementsByTagName('div'); function changeTab() { var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length); for(var i=0; i<pages.length; i++) { if( pages[i].id == targetid ) { pages[i].style.display = "block"; } else { pages[i].style.display = "none"; } } for(var i=0; i<tabs.length; i++) { tabs[i].style.zIndex = "0"; } this.style.zIndex = "10"; return false; } for(var i=0; i<tabs.length; i++) { tabs[i].onclick = changeTab; } tabs[0].onclick(); </script> |
JavaScriptではタブの切り替え操作をメインに記述しています。
関数changeTabでクリックされたタブを取得したら、zIndex（重なり順）を上にして表に表示されるようにしています。
zIndezは数字が大きいほど表側になります。
HTML&CSS&JavaScriptで３つのタブを作る方法のまとめ
最後にHTML&CSS&JavaScriptをあわせた全体のコードはこちらになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <!DOCTYPE html> <html lang=ja dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .tab1 { background-color: orange; } .tab2 { background-color: green; display: none; } .tab3 { background-color: blue; color: white; display: none; } .tab { width: 500px; height: 100px; clear: left; } .tabcontrol a { width: 100px; display: block; float: left; border-radius: 10px 10px 0 0; text-align: center; color: white; } .Tabcontrol a:hover { text-decoration: underline; } .tabcontrol a:nth-child(1), .tabbody div:nth-child(1) { background-color: orange; } .tabcontrol a:nth-child(2), .tabbody div:nth-child(2) { background-color: green; } .tabcontrol a:nth-child(3), .tabbody div:nth-child(3) { background-color: blue; } </style> <div id="Tabcontrol" class="tabcontrol"> <a href="#tabpage1" class="tab1" onclick="changeTab">タブ1</a> <a href="#tabpage2" class="tab2" onclick="changeTab">タブ2</a> <a href="#tabpage3" class="tab3" onclick="changeTab">タブ3</a> </div> <div id="tabbody"> <div id="tabpage1" class="tab tab1"> <p>これはタブ1です。</p> </div> <div id="tabpage2" class="tab tab2"> <p>これはタブ2です。</p> </div> <div id="tabpage3" class="tab tab3"> <p>これはタブ3です。</p> </div> </div> </body> <script type="text/javascript"> var tabs = document.getElementById('Tabcontrol').getElementsByTagName('a'); var pages = document.getElementById('tabbody').getElementsByTagName('div'); function changeTab() { var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length); for(var i=0; i<pages.length; i++) { if( pages[i].id == targetid ) { pages[i].style.display = "block"; } else { pages[i].style.display = "none"; } } for(var i=0; i<tabs.length; i++) { tabs[i].style.zIndex = "0"; } this.style.zIndex = "10"; return false; } for(var i=0; i<tabs.length; i++) { tabs[i].onclick = changeTab; } tabs[0].onclick(); </script> </html> |
CSSとJavaScriptがごちゃごちゃしていて分かりにくいという方は、それぞれファイルを分けることをオススメします。
WordPressのプラグインの都合上インデントがずれているところがありますがご勘弁ください笑
わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。
今サイトではこれからもSEOに関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします！
