HTML と CSS でタブを作る

概要

HTML と CSS でタブを作成する方法の説明と、ソースの解説をします。

• 目次
• ソース
• 表示例
• ソースの解説
• ボーダーを2pxにする場合

ソース

HTML

• <div class="waku">
•   <input type="radio" name="css-tab" id="css-tab1" class="tab-style" checked>
•     <label for="css-tab1" class="tab-label" id="tab1-label">タブ1</label>
•   <input type="radio" name="css-tab" id="css-tab2" class="tab-style">
•     <label for="css-tab2" class="tab-label" id="tab2-label">タブ2</label>
•   <input type="radio" name="css-tab" id="css-tab3" class="tab-style">
•     <label for="css-tab3" class="tab-label" id="tab3-label">タブ3</label>
•   <div class="tab-waku" id="waku1">タブ1の内容が表示されます。</div>
•   <div class="tab-waku" id="waku2">タブ2の内容が表示されます。</div>
•   <div class="tab-waku" id="waku3">タブ3の内容が表示されます。</div>
• </div>

CSS

• .waku {position: relative;}
• .tab-style {display: none;}
• .tab-label {
•   cursor: pointer;
•   position: relative;
•   display: inline-block;
•   width: 100px;
•   text-align: center;
•   font-weight: bold;
•   border-top: 1px solid #000000;
•   border-right: 1px solid #000000;
•   border-left: 1px solid #000000;
•   border-radius: 5px 5px 0px 0px;
•   color: #797979;
•   background-color: #FFFFFF;
• }
• .tab-waku {
•   border: 1px solid #000000;
•   width: 600px;
•   margin-top: -1px;
•   padding: 3px;
•   display: none; z-index: 5;
•   position: relative;
•   background-color: #FFFFFF;
• }
• #tab1-label {
•   position: relative;
•   z-index: 4;
• }
• #tab2-label {
•   position: relative;
•   z-index: 3;
• }
• #tab3-label {
•   z-index: 2;
• }
• #css-tab1:checked ~ #waku1 {display: block;}
• #css-tab1:checked ~ #tab1-label {
•   z-index: 6;
•   color: #000000;
• }
• #css-tab2:checked ~ #waku2 {display: block;}
• #css-tab2:checked ~ #tab2-label {
•   z-index: 6;
•   color: #000000;
• }
• #css-tab3:checked ~ #waku3 {display: block;}
• #css-tab3:checked ~ #tab3-label {
•   z-index: 6;
•   color: #000000;
• }

表示例

ソースの解説

HTMLの解説

特にありません。

CSSの解説

• .tab-waku {
•   border: 1px solid #000000;
•   width: 600px;
•   margin-top: -1px;
•   padding: 3px;
•   display: none; z-index: 5;
•   position: relative;
•   background-color: #FFFFFF;
• }
• #tab1-label {
•   position: relative;
•   z-index: 4;
• }
• #tab2-label {
•   position: relative;
•   z-index: 3;
• }
• #tab3-label {
•   z-index: 2;
• }
• #css-tab1:checked ~ #waku1 {display: block;}
• #css-tab1:checked ~ #tab1-label {
•   z-index: 6;
•   color: #000000;
• }
• #css-tab2:checked ~ #waku2 {display: block;}
• #css-tab2:checked ~ #tab2-label {
•   z-index: 6;
•   color: #000000;
• }
• #css-tab3:checked ~ #waku3 {display: block;}
• #css-tab3:checked ~ #tab3-label {
•   z-index: 6;
•   color: #000000;
• }

「z-index」を指定してタブをタブの内容が表示される画面より下側に表示します。そして、ラジオボタンにチェックが入った時にタブがタブの内容が表示される画面より上側に表示されるようにします。また、タブに背景色（上記では白）を指定し、タブの内容が表示される画面に「margin-top: -1px;」を指定します。これにより、タブがタブの内容が表示される画面より上側に表示された時に、タブの内容が表示される画面の上側のボーダーが隠れるようにします。さらに、ラジオボタンにチェックが入った時に対応するタブの内容を表示すると同時に選択されているタブがわかるように文字の色を変更します。

その他、必要に応じて「background-color」や「padding」，「width」，「color」，「border」の色等を変更してください。

ボーダーを2pxにする場合

に表示する方法について解説します。