タブ基本

2021-07-19

タブ参考：https://getbootstrap.jp/docs/4.2/components/navs/

基本形

タブのボタンをクリックすると表示される内容が切り替わります。
他にも種類はあるのですが、よく使う基本形は以下の通りです。
idと対応する名前で連動して動きます。
1ページ内で同じidは使用できません。

タブ1ボタン

タブ2ボタン

タブ3ボタン

<p style="word-break: break-all;">タブ参考：https://getbootstrap.jp/docs/4.2/components/navs/</p>
<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
  <li class="nav-item"> <a class="nav-link active" id="nav-tab1" data-toggle="tab" href="#tab1-item" role="tab" aria-controls="tab1-item" aria-selected="true">タブ1ボタン</a> </li>
  <li class="nav-item"> <a class="nav-link" id="nav-tab2" data-toggle="tab" href="#tab2-item" role="tab" aria-controls="tab2-item" aria-selected="false">タブ2ボタン</a> </li>
  <li class="nav-item"> <a class="nav-link" id="nav-tab3" data-toggle="tab" href="#tab3-item" role="tab" aria-controls="tab3-item" aria-selected="false">タブ3ボタン</a> </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tab1-item" role="tabpanel" aria-labelledby="nav-tab1"> タブ1ボタン </div>
  <div class="tab-pane fade" id="tab2-item" role="tabpanel" aria-labelledby="nav-tab2"> タブ2ボタン </div>
  <div class="tab-pane fade" id="tab3-item" role="tabpanel" aria-labelledby="nav-tab3"> タブ3ボタン </div>
</div>

<p style="word-break: break-all;">タブ参考：https://getbootstrap.jp/docs/4.2/components/navs/</p>

</ul>

</div>

トップ使用例

トップページで使用しているタブリストです。
WordPress側で勝手に要らないタグを追加しているためトップと見た目が違いますが、入っているhtmlは基本的に同じです。

html

<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
  <li class="nav-item"> <a class="nav-link active" id="nav-tab4" data-toggle="tab" href="#tab4-item" role="tab" aria-controls="tab4-item" aria-selected="true">タブ4ボタン</a> </li>
  <li class="nav-item"> <a class="nav-link" id="nav-tab5" data-toggle="tab" href="#tab5-item" role="tab" aria-controls="tab5-item" aria-selected="false">タブ5ボタン</a> </li>
  <li class="nav-item"> <a class="nav-link" id="nav-tab6" data-toggle="tab" href="#tab6-item" role="tab" aria-controls="tab6-item" aria-selected="false">タブ6ボタン</a> </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tab4-item" role="tabpanel" aria-labelledby="nav-tab4">
    <div class="new">
      <ul>
        <li><a href=""><span class="newday">日付</span><div class="tit">タブ4コンテンツ<font class="new_tag">New</font></div></a></li><li><a href=""><span class="newday">日付</span><div class="tit">タイトル</div></a></li>
      </ul>
    </div>
  </div>
  <div class="tab-pane fade" id="tab5-item" role="tabpanel" aria-labelledby="nav-tab5">
    <div class="new">
      <ul>
        <li> <a href=""> <span class="newday">日付</span>
          <div class="tit">タブ5コンテンツ<font class="new_tag">New</font></div>
          </a> </li>
        <li> <a href=""> <span class="newday">日付</span>
          <div class="tit">タイトル</div>
          </a> </li>
      </ul>
    </div>
  </div>
  <div class="tab-pane fade" id="tab6-item" role="tabpanel" aria-labelledby="nav-tab6">
    <div class="new">
      <ul>
        <li> <a href=""> <span class="newday">日付</span>
          <div class="tit">タブ6コンテンツ<font class="new_tag">New</font></div>
          </a> </li>
        <li> <a href=""> <span class="newday">日付</span>
          <div class="tit">タイトル</div>
          </a> </li>
      </ul>
    </div>
  </div>
</div>

</ul>

<ul>

<li><a href=""><span class="newday">日付</span><div class="tit">タブ4コンテンツ<font class="new_tag">New</font></div></a></li><li><a href=""><span class="newday">日付</span><div class="tit">タイトル</div></a></li>

</ul>

</div>

<ul>

<div class="tit">タブ5コンテンツ<font class="new_tag">New</font></div>

</a> </li>

</a> </li>

</ul>

</div>

<ul>

<div class="tit">タブ6コンテンツ<font class="new_tag">New</font></div>

</a> </li>

</a> </li>

</ul>

</div>

css

/* NEWS */
.new {
	background-color: #FFF;
	width: 100%;
	text-align: left;
	margin-bottom: 20px;
}
.new li {
	list-style-type: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #eee;
}
.new li a {
	text-decoration: none;
	font-size: 1rem;
	display: block;
	padding: 15px 0px 18px;
	color: #000;
	line-height: 1.2em;
}
.new li a:hover {
	text-decoration: none;
	display: block;
	background-color: #f5f5f5;
}
.new li a .tit{
	padding-top: 5px;
}
.newday{
	color: #565656;
	font-size: 0.8rem;
	font-weight: bold;
	display: block;
	padding: 5px 30px 5px 0;
	margin-top: 0;
	margin-right: 10px;
	margin-left: 0;
}
.new_tag{
	background-color: #a60007;
	padding: 2px 12px;
	color: #fff;
	font-size: 0.7rem;
	font-family: 'Fjalla One', sans-serif;
	margin-left: 10px;
	vertical-align: top;
}
.new ul li p {
	padding: 5px;
}
@media screen and (min-width: 768px){
.new {
	margin-bottom: 30px;
}
.newday{
	margin-bottom: 10px;
	text-align: center;
	float: left;
}
}
@media screen and (min-width: 992px){
.newday{
	padding: 5px 60px 5px 0;
}
}

/* NEWS */

.new {

background-color: #FFF;

width: 100%;

text-align: left;

margin-bottom: 20px;

}

.new li {

list-style-type: none;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #eee;

}

.new li a {

text-decoration: none;

font-size: 1rem;

display: block;

padding: 15px 0px 18px;

color: #000;

line-height: 1.2em;

}

.new li a:hover {

text-decoration: none;

display: block;

background-color: #f5f5f5;

}

.new li a .tit{

padding-top: 5px;

}

.newday{

color: #565656;

font-size: 0.8rem;

font-weight: bold;

display: block;

padding: 5px 30px 5px 0;

margin-top: 0;

margin-right: 10px;

margin-left: 0;

}

.new_tag{

background-color: #a60007;

padding: 2px 12px;

color: #fff;

font-size: 0.7rem;

font-family: 'Fjalla One', sans-serif;

margin-left: 10px;

vertical-align: top;

}

.new ul li p {

padding: 5px;

}

@media screen and (min-width: 768px){

.new {

margin-bottom: 30px;

}

.newday{

margin-bottom: 10px;

text-align: center;

float: left;

}

@media screen and (min-width: 992px){

.newday{

padding: 5px 60px 5px 0;

}

タブ cssで編集

タブ基本

基本形

トップ使用例

関連記事