My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

CSSで実装する タブ機能

f:id:sntkk3:20171003212857p:plain

[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; 
} 
 


以上で晴れてエラーも解決、
思い通りのタブができました。


Demo


【参考記事】

uxmilk.jp

dekiru.net