今回はHTMLとCSSとJavaScriptを使って３つのタブを作っていくコードを解説します。
【迷ったらココ！】HTMLやJavaScriptが学べるプログラミングスクール3選
テックアカデミー | デイトラ | 侍エンジニア |
| 講師は全員現役エンジニア 週2回のマンツーマンメンタリング 無料の転職サポートあり 課題レビュー＆チャット質問し放題 | 1年間のエンジニアサポート カリキュラムは無期限閲覧可能 専用チャットコミュニティ参加 Webセミナー勉強会に参加 | 累計指導45,000人＆転職成功率98% オーダーメイドカリキュラム対応 無料の転職サポートあり 専属マンツーマンレッスン方式 |
当サイトではプログラミング学習やエンジニア転職に関する情報を発信しています。他の記事も合わせてご覧ください。
-
HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】
HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...
続きを見る
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がごちゃごちゃしていて分かりにくいという方は、それぞれファイルを分けることをオススメします。
