[jQuery不要] ラジオボタン + CSSで出来る タブ機能
以下記事を参考に、Webページにタブ機能を設置してみました。
【参考記事】
qiita.com
上記にてご紹介いただいたコードで、
おかげさまで思った通りのタブができました。
と喜んだのも束の間、一つ問題が発覚。
バリデーション(HTMLの構文チェックのことです※)をしてみたところ、
以下のような構文エラーが。
The element main must not appear as a descendant of the article element.
A document must not include more than one visible main element.
※バリデーションには以下サイトを利用しました
validator.w3.org
原因は、ソースコードにて複数のmainタグがarticleタグの子要素になっていたこと(mainタグって1つのページ内に1回しか使用できないんですよね)。
ということで、mainタグの部分を新たなclassに置き換えて以下のように修正しました。
[html] サンプルコード
<!-- TAB CONTROLLERS --> <input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked> <input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios"> <input id="panel-3-ctrl" class="panel-radios" type="radio" name="tab-radios"> <!-- TABS LIST --> <ul id="tabs-list"> <!-- MENU TOGGLE --> <li id="li-for-panel-1"> <label class="panel-label" for="panel-1-ctrl">タブA</label> </li> <!--INLINE-BLOCK FIX--> <li id="li-for-panel-2"> <label class="panel-label" for="panel-2-ctrl">タブB</label> </li> <!--INLINE-BLOCK FIX--> <li id="li-for-panel-3"> <label class="panel-label" for="panel-3-ctrl">タブCについて</label> </li> <!--INLINE-BLOCK FIX--> </ul> <!-- THE PANELS --> <article id="panels"> <div class="container"> <section id="panel-1"> <div class="panel_group"> <div class="tbl_box"> <table class="tb" cellpadding="0" cellspacing="0" border="1"> <tr valign="top"> <th valign="top">項目1</th> <td valign="top"> <ul> <li><a href="#p_sales" onClick="OnLinkClick(p_sales);">リスト1</a></li> <li><a href="#sales" onClick="OnLinkClick(sales);">リスト2</a></li> <li><a href="#clerk" onClick="OnLinkClick(clerk);">リスト3</a></li> <li><a href="#w_designer" onClick="OnLinkClick(w_designer);">リスト4</a></li> </ul> </td> </tr>
[css]
/*********************/ /*タブメニュー /*********************/ label.panel-label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; width: 100%; color: #bdc3c7; cursor: pointer; background-color: #ecf0f1; -webkit-transition-property: background-color, color; transition-property: background-color, color; -webkit-transition-duration: 200ms; transition-duration: 200ms; } label.panel-label:hover { color: #003399; } #panels { background-color: white; } #panels .container { margin: 0 auto; width: 90%; } #panels section header label.panel-label { padding: 12px 24px; box-sizing: border-box; } #panels section > div { box-sizing: border-box; max-height: 0; opacity: 0; -webkit-transition: opacity 600ms; transition: opacity 600ms; overflow-y: hidden; } #panel-1-ctrl:checked ~ #panels #panel-1 > div { max-height: initial; opacity: 1; padding: 20px 24px; } #panel-2-ctrl:checked ~ #panels #panel-2 div { max-height: initial; opacity: 1; padding: 20px 24px; } #panel-3-ctrl:checked ~ #panels #panel-3 div { max-height: initial; opacity: 1; padding: 48px 24px; } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 { pointer-events: none; cursor: default; -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); box-shadow: none; border-right: none; } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last { border-right: 1px solid transparent; } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li { border-left: 1px solid #dfdfdf; } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label { background-color: white; color: #003399; padding-top: 12px; /*padding-top: 24px;*/ } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after { height: 6px; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 { pointer-events: none; cursor: default; -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); box-shadow: none; border-right: none; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last { border-right: 1px solid transparent; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li { border-left: 1px solid #dfdfdf; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label { background-color: white; color: #003399; padding-top: 12px; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after { height: 6px; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 { pointer-events: none; cursor: default; -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); box-shadow: none; border-right: none; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last { border-right: 1px solid transparent; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li { border-left: 1px solid #dfdfdf; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label { background-color: white; color: #003399; padding-top: 12px; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after { height: 6px; } ul#tabs-list { display: flex; list-style: none; text-align: center; border-bottom: 1px solid #dfdfdf; margin: 0; padding: 0; } ul#tabs-list li { text-align: center; font-size: 0.875em; width: 25%; box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05); border-right: 1px solid #dfdfdf; position: relative; } ul#tabs-list li:hover { -webkit-transition: none; transition: none; border-right: none; } ul#tabs-list li:hover.last { border-right: 1px solid transparent; } ul#tabs-list li:hover + li { border-left: 1px solid #dfdfdf; } ul#tabs-list li label.panel-label { position: relative; padding: 12px 0; font-size: 1.4em; } ul#tabs-list li label.panel-label::after { content: ""; position: absolute; width: 100%; left: 0; bottom: 100%; background-color: #003399; height: 0; -webkit-transition-property: height; transition-property: height; -webkit-transition-duration: 200ms; transition-duration: 200ms; } ul#tabs-list li label.panel-label:hover { padding-top: 12px; } ul#tabs-list li label.panel-label:hover::after { height: 6px; } .panel_group { margin: 0 auto; } .panel-radios { display: none; } .panel_group p { line-height: 1.8; } #li-for-panel-3, #li-for-panel-2, #li-for-panel-3 { padding-bottom: 0; }
以上で晴れてエラーも解決、
思い通りのタブができました。
【参考記事】