SANGOのテーマのトップページにはタブ切り替えで、各カテゴリのサムネイル表示ができるブロックがあります。これを好きなところに色々使えるようにタブ切り替えのデザインを作ってみました。
今回は、SANGOのテーマに合いそうなタブ切り替えボタンのデザイン3種についてご紹介します。
3つとも、各タブ内にはHTMLでfontawesomeを入れ、HTML＋CSSのコピペでできるように作っています。
2つボタンのタブ切り替え
SANGOのテーマにトップページ用に標準で搭載されている、2つボタンのタブ切り替えのオブジェクトです。
かかかず
これぞSANGOのデザイン的なタブです。
サンプルの切り替えで表示される関連記事は、 のショートコードを使って表示しています。
tabs. の色は#FFFFFFで背景白で入れていますが、背景を透明の background-color: transparent;にするなどして、ご利用ください。
コードを表示する
HTML
<div class="wrapper">
<div class="tabs">
<input id="all" type="radio" name="tab_item" checked>
<label class="tab_item tab_item01" for="all"><i class="fas fa-rss"></i> 総合</label>
<input id="programming" type="radio" name="tab_item">
<label class="tab_item tab_item02" for="programming"><i class="fas fa-rss"></i> プログラミング</label>
<div class="tab_content" id="all_content">
総合の内容がここに入ります
</div>
<div class="tab_content" id="programming_content">
プログラミングの内容がここに入ります
</div>
</div>
</div>
CSS
.wrapper{
}
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
width: 100%;
margin: 0 auto;
}
/*タブのスタイル*/
.tab_item {
width: calc(100%/2);
height: 50px;
background-color: #FFFFFF;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
.tab_item01 {
border-radius: 6px 0 0 6px;
}
.tab_item02 {
border-radius: 0 6px 6px 0;
}
.tab_item:hover {
opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 20px 2px 0;
clear: both;
overflow: hidden;
}
.tab_content{
position: relative; /* 位置指定 */
animation: anime1 1s ease; /* アニメーション指定 */
}
@keyframes anime1 {
0% {
opacity: 0; /* 透明度指定 */
top: 50px; /* 位置指定 */
}
100% {
opacity: 1; /* 透明度指定 */
top: 0; /* 位置指定 */
}
}
/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #6bb6ff;
color: #fff;
}3つボタンのタブ切り替え
2つボタンの1個ボタンを増やした3つボタンのタブ切り替えのオブジェクトです。
コードを表示する
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="wrapper">
<div class="tabs">
<input id="at1" type="radio" name="tab_item2" checked>
<label class="tab_item2 tab_item01" for="at1"><i class="fas fa-rss"></i> １つ目</label>
<input id="at2" type="radio" name="tab_item2">
<label class="tab_item2 tab_item02" for="at2"><i class="fas fa-rss"></i> ２つ目</label>
<input id="at3" type="radio" name="tab_item2">
<label class="tab_item2 tab_item03" for="at3"><i class="fas fa-rss"></i> ３つ目</label>
<div class="tab_content" id="at1_content">
１つ目の内容がここに入ります
</div>
<div class="tab_content" id="at2_content">
2つ目の内容がここに入ります
</div>
<div class="tab_content" id="at3_content">
3つ目の内容がここに入ります
</div>
</div>
</div>
CSS
/*--------------------------------------
3つのタブ切り替え
--------------------------------------*/
.wrapper{
}
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
width: 100%;
margin: 0 auto;
}
/*タブのスタイル*/
.tab_item2 {
width: calc(100%/3);
height: 50px;
background-color: #FFFFFF;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
.tab_item01 {
border-radius: 6px 0 0 6px;
}
.tab_item02 {
border-radius: 0;
}
.tab_item03 {
border-radius: 0 6px 6px 0;
}
/*ラジオボタンを全て消す*/
input[name="tab_item2"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 20px 2px 0;
clear: both;
overflow: hidden;
}
.tab_content{
position: relative; /* 位置指定 */
animation: anime1 1s ease; /* アニメーション指定 */
}
@keyframes anime1 {
0% {
opacity: 0; /* 透明度指定 */
top: 50px; /* 位置指定 */
}
100% {
opacity: 1; /* 透明度指定 */
top: 0; /* 位置指定 */
}
}
/*選択されているタブのコンテンツのみを表示*/
#at1:checked ~ #at1_content,
#at2:checked ~ #at2_content,
#at3:checked ~ #at3_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item2 {
background-color: #6bb6ff;
color: #fff;
}2つのボタンでテキストリンク一覧のタブ
2つのボタンで切り替えできるタブです。比較的余白を多めに取っているデザインで、テキストベースのリンク一覧向けに作ったUIです。
かかかず
ちょっとSANGOぽさはないかもしれませんが、影をつけて多少寄せています。
コードを表示する
HTML
<!-- タブここから -->
<div class="recomendQuestionBlock">
<div class="recomendQuestionWrapper">
<div class="Questiontabs"> <input id="QuestionLeft" type="radio" name="Questiontab_item" checked> <label class="Questiontab_item tab_item01" for="QuestionLeft"><i class="fas fa-user-friends"></i>左のタブのテキスト</label> <input id="QuestionRight" type="radio" name="Questiontab_item"> <label class="Questiontab_item tab_item02" for="QuestionRight"><i class="fas fa-user-tie"></i>右のタブのテキスト</label>
<div class="Questiontab_content" id="QuestionLeft_content">
<ul>
<li>
<a href="">
テキスト0。テキスト0。テキスト0。テキスト0。テキスト0。テキスト0。
</a>
</li>
<li>
<a href="">
テキスト1。テキスト1。テキスト1。テキスト1。テキスト1。
</a>
</li>
<li>
<a href="">
テキスト2。テキスト2。テキスト2。
</a>
</li>
<li>
<a href="">
テキスト3。テキスト3。テキスト3。テキスト3。テキスト3。テキスト3。
</a>
</li>
</ul>
</div>
<div class="Questiontab_content" id="QuestionRight_content">
<ul>
<li>
<a href="">
テキスト0。テキスト0。テキスト0。テキスト0。テキスト0。テキスト0。
</a>
</li>
<li>
<a href="">
テキスト1。テキスト1。テキスト1。テキスト1。テキスト1。
</a>
</li>
<li>
<a href="">
テキスト2。テキスト2。テキスト2。
</a>
</li>
<li>
<a href="">
テキスト3。テキスト3。テキスト3。テキスト3。テキスト3。テキスト3。
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- タブここまで -->
CSS
/* よくある質問の関連記事 */
.recommend_inner h2.questionhead:before {
content: "\f059";
font-size: 1.7rem;
}
.recomendQuestionBlock {
background: #F4F9FF;
padding: 30px 35px;
margin-bottom: 40px;
}
.Questiontabs {
margin-top: 50px;
background-color: transparent;
width: 100%;
margin: 0 auto;
}
label.Questiontab_item {
width: 47.5%;;
height: 80px;
background-color: #FFFFFF;
line-height: 78px;
font-size: 1.2rem;
text-align: center;
color: #2165C0;
display: block;
float: left;
text-align: center;
font-weight: 500;
transition: all 0.2s ease;
margin-bottom: 15px;
border-radius: 0;
opacity: 0.5;
letter-spacing: 0.04rem;
position: relative;
cursor: pointer;
}
label.Questiontab_item:hover {
opacity: 0.8;
}
label.Questiontab_item.tab_item01 {
margin-right: 5%;
}
label.Questiontab_item i {
font-size: 1.7rem;
vertical-align: text-bottom;
margin-right: 5px;
}
/*ラジオボタンを全て消す*/
input[name="Questiontab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.Questiontab_content {
display: none;
padding: 20px 2px 5px;
clear: both;
overflow: hidden;
}
.Questiontab_content{
position: relative; /* 位置指定 */
animation: anime1 1s ease; /* アニメーション指定 */
}
@keyframes anime1 {
0% {
opacity: 0; /* 透明度指定 */
top: 50px; /* 位置指定 */
}
100% {
opacity: 1; /* 透明度指定 */
top: 0; /* 位置指定 */
}
}
/*選択されているタブのコンテンツのみを表示*/
#QuestionLeft:checked ~ #QuestionLeft_content,
#QuestionRight:checked ~ #QuestionRight_content {
display: block;
filter: drop-shadow(0px 2px 4px #ccc);
}
/*選択されているタブのスタイルを変える*/
.Questiontabs input:checked + .Questiontab_item {
opacity: 1;
filter: drop-shadow(0px 2px 4px #ccc);
}
.Questiontabs input:checked + .Questiontab_item:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
border: 12px solid transparent;
border-top: 12px solid #FFF;
}
div.Questiontab_content ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
}
div.Questiontab_content ul li {
width: 100%;
margin: 0;
padding: 0;
}
div.Questiontab_content ul li a {
padding: 18px 60px 19px 60px;
background: #FFF;
border-bottom: dotted 2px #ddd;
position: relative;
color: #313131;
line-height: 1.6;
display: block;
text-decoration: none;
}
div.Questiontab_content ul li a:hover {
background: #FAFAFA;
color: #2165C0;
opacity: 1;
}
div.Questiontab_content ul li a:before {
font-family: "Font Awesome 5 Free";
font-weight: 100;
font-size: 1.1em;
content: "\f059";
color: #AAAAAA;
position: absolute;
left: 30px;
transition: all 0.2s ease;
}
div.Questiontab_content ul li a:hover:before {
color: #2165C0;
}
div.Questiontab_content ul li a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em;
content: "\f0da";
color: #313131;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
transition: all 0.2s ease;
}
div.Questiontab_content ul li a:hover:after {
transform: translateY(-50%) translatex(3px);
}
div.Questiontab_content ul li:last-child a {
border: none;
padding-bottom: 23px;
}
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
.recomendQuestionBlock {
padding: 0;
background: transparent;
}
label.Questiontab_item {
width: 100%;
margin: 0;
background: #f1f1f1;
height: 60px;
line-height: 58px;
}
label.Questiontab_item.tab_item01 {
margin: 0;
}
.Questiontabs input:checked + .Questiontab_item:after {
content: none;
}
label.Questiontab_item.tab_item02 {
margin-bottom: 10px;
}
.Questiontabs input:checked + .Questiontab_item {
background: #FFF;
}
div.Questiontab_content ul li a {
padding: 4% 10% 4% 12%;
}
div.Questiontab_content ul li a:before {
left: 5%;
}
div.Questiontab_content ul li:last-child a {
padding-bottom: 5%;
}
#QuestionLeft:checked ~ #QuestionLeft_content, #QuestionRight:checked ~ #QuestionRight_content {
filter: drop-shadow(0px 0px 2px #ccc);
}
}
