タブ cssで編集

2021-07-19

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

bootstrap4のタブをcssで編集しました。
bootstrap4のcssを編集したい場合、編集するhtml全体を何かのクラスで囲んで、
そのクラス内のこのタグ・クラスはこうする、というように編集してください。

今回は、「tab_hl_like」というクラスで全体を囲み編集しています。
また、今回は投稿ページでもcssを読み込みたかったので「contents.css」に書いています。（page.cssは固定ページでのみ読み込みの為）

3LDK+PLANプラン1

3LDK PLAN

DATE

建築面積: 00.00m²
建築面積: 00.00m²
建築面積: 00.00m²

3LDK+PLANプラン2

3LDK PLAN

DATE

建築面積: 00.00m²
建築面積: 00.00m²
建築面積: 00.00m²

3LDK+PLANプラン3

3LDK PLAN

DATE

建築面積: 00.00m²
建築面積: 00.00m²
建築面積: 00.00m²

html

<div class="tab_hl_like">
<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">
	  <div class="tab_hl_con">
		  <div class="row">
		  	<div class="col-12 order-2 col-md-6 col-lg-4 offset-lg-1 order-md-1">
				<p class="tab_hl_plantit"><span>3LDK&#43;PLAN</span>プラン1</p>
				<p class="hl_plantxt">3LDK PLAN</p>
				<p class="hl_date">DATE</p>
				<dl>
					<dt>建築面積</dt>
					<dd>00.00m&sup2;</dd>
					<dt>建築面積</dt>
					<dd>00.00m&sup2;</dd>
					<dt>建築面積</dt>
					<dd>00.00m&sup2;</dd>
				</dl>
			  </div>
		  	<div class="col-12 order1 col-md-6 offset-lg-1 order-md-2"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" alt=""></div>
		  </div>
	  </div>
	</div>
  <div class="tab-pane fade" id="tab2-item" role="tabpanel" aria-labelledby="nav-tab2">
	  <div class="tab_hl_con">
		  <div class="row">
		  	<div class="col-12 order-2 col-md-6 col-lg-4 offset-lg-1 order-md-1">
				<p class="tab_hl_plantit"><span>3LDK&#43;PLAN</span>プラン2</p>
				<p class="hl_plantxt">3LDK PLAN</p>
				<p class="hl_date">DATE</p>
				<dl>
					<dt>建築面積</dt>
					<dd>00.00m&sup2;</dd>
					<dt>建築面積</dt>
					<dd>00.00m&sup2;</dd>
					<dt>建築面積</dt>
					<dd>00.00m&sup2;</dd>
				</dl>
			  </div>
		  	<div class="col-12 order1 col-md-6 offset-lg-1 order-md-2"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" alt=""></div>
		  </div>
	  </div>
	</div>
  <div class="tab-pane fade" id="tab3-item" role="tabpanel" aria-labelledby="nav-tab3">
	  <div class="tab_hl_con">
		  <div class="row">
		  	<div class="col-12 order-2 col-md-6 col-lg-4 offset-lg-1 order-md-1">
				<p class="tab_hl_plantit"><span>3LDK&#43;PLAN</span>プラン3</p>
				<p class="hl_plantxt">3LDK PLAN</p>
				<p class="hl_date">DATE</p>
				<dl>
					<dt>建築面積</dt>
					<dd>00.00m&sup2;</dd>
					<dt>建築面積</dt>
					<dd>00.00m&sup2;</dd>
					<dt>建築面積</dt>
					<dd>00.00m&sup2;</dd>
				</dl>
			  </div>
		  	<div class="col-12 order1 col-md-6 offset-lg-1 order-md-2"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" alt=""></div>
		  </div>
	  </div>
	</div>
</div>
</div>

</ul>

<dl>

</dl>

</div>

</div>

<dl>

</dl>

</div>

</div>

<dl>

</dl>

</div>

</div>

css

/*bootstrap4tab編集*/
.tab_hl_like .nav{
	margin-bottom: 0.8rem;
}
.tab_hl_like .nav-tabs{
	border-bottom: none;
	margin-right: -0.4rem;
	margin-left: -0.4rem;
}
.tab_hl_like .nav-tabs .nav-link{
	border: 2px #000 solid;
	color: #000;
	font-weight: bold;
	padding: 0.5rem 0;
}
.tab_hl_like .nav-tabs .nav-link.active,.tab_hl_like .nav-tabs .nav-item.show .nav-link{
	border: 2px #000 solid;
	background-color: #000;
	color: #fff;
}
.tab_hl_like .nav-tabs .nav-link{
	border-radius: 0;
}
.tab_hl_like .nav-fill > .nav-link,.tab_hl_like .nav-fill .nav-item{
	width: calc(33.333% - 1.6rem);
	margin-right: 0.4rem;
	margin-left: 0.4rem;
}
.tab_hl_like .nav-tabs .nav-link:hover,.tab_hl_like .nav-tabs .nav-link:focus{
	border: 2px #000 solid;
}
@media screen and (min-width: 1200px){
	.tab_hl_like .nav-tabs .nav-link{
		padding: 0.8rem 0;
		font-size: 1.2rem;
	}
}
/*tabコンテンツ*/
.tab_hl_con{
	border: 2px #000 solid;
	padding: 5%;
}
.tab_hl_plantit{
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.6;
	margin-top: 1rem;
}
.tab_hl_plantit span{
	font-family: 'Fjalla One', sans-serif;
	display: block;
	font-weight: normal;
	letter-spacing: 0.05rem;
	font-size: 1.3rem;
}
.hl_plantxt{
	font-size: 1.8rem;
	font-family: 'Fjalla One', sans-serif;
}
.hl_date{
	margin-bottom: 0;
	font-weight: bold;
	font-size: 1.2rem;
}
.tab_hl_con dl{
	display: flex;
	flex-wrap: wrap;
	border-top: 1px #000 solid;
	border-bottom: 1px #000 solid;
	align-items: center;
	padding-top: 0.5rem;
	margin-bottom: 1rem;
}
.tab_hl_con dl dt{
	width: 50%;
	font-weight: normal;
	letter-spacing: 0.3rem;
	padding-bottom: 0.5rem;
	font-size: 1.1rem;
}
.tab_hl_con dl dd{
	width: 50%;
	text-align: right;
	padding-bottom: 0.5rem;
}
@media screen and (min-width: 768px){
	.tab_hl_plantit{
		margin-top: 0;
	}
}

/*bootstrap4tab編集*/

.tab_hl_like .nav{

margin-bottom: 0.8rem;

}

.tab_hl_like .nav-tabs{

border-bottom: none;

margin-right: -0.4rem;

margin-left: -0.4rem;

}

.tab_hl_like .nav-tabs .nav-link{

border: 2px #000 solid;

color: #000;

font-weight: bold;

padding: 0.5rem 0;

}

.tab_hl_like .nav-tabs .nav-link.active,.tab_hl_like .nav-tabs .nav-item.show .nav-link{

border: 2px #000 solid;

background-color: #000;

color: #fff;

}

.tab_hl_like .nav-tabs .nav-link{

border-radius: 0;

}

.tab_hl_like .nav-fill > .nav-link,.tab_hl_like .nav-fill .nav-item{

width: calc(33.333% - 1.6rem);

margin-right: 0.4rem;

margin-left: 0.4rem;

}

.tab_hl_like .nav-tabs .nav-link:hover,.tab_hl_like .nav-tabs .nav-link:focus{

border: 2px #000 solid;

}

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

.tab_hl_like .nav-tabs .nav-link{

padding: 0.8rem 0;

font-size: 1.2rem;

}

/*tabコンテンツ*/

.tab_hl_con{

border: 2px #000 solid;

padding: 5%;

}

.tab_hl_plantit{

font-size: 1.2rem;

font-weight: bold;

line-height: 1.6;

margin-top: 1rem;

}

.tab_hl_plantit span{

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

display: block;

font-weight: normal;

letter-spacing: 0.05rem;

font-size: 1.3rem;

}

.hl_plantxt{

font-size: 1.8rem;

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

}

.hl_date{

margin-bottom: 0;

font-weight: bold;

font-size: 1.2rem;

}

.tab_hl_con dl{

display: flex;

flex-wrap: wrap;

border-top: 1px #000 solid;

border-bottom: 1px #000 solid;

align-items: center;

padding-top: 0.5rem;

margin-bottom: 1rem;

}

.tab_hl_con dl dt{

width: 50%;

font-weight: normal;

letter-spacing: 0.3rem;

padding-bottom: 0.5rem;

font-size: 1.1rem;

}

.tab_hl_con dl dd{

width: 50%;

text-align: right;

padding-bottom: 0.5rem;

}

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

.tab_hl_plantit{

margin-top: 0;

}

タブ基本

タブ cssで編集

関連記事