【HTML＋CSS】タブ切り替えでページを表示させるには

狭いページ、あまり情報量の多くない、目立たせたいけど量を取りたくない少量のコンテンツなどに使えるかもしれない。

▼CSS

/*タブ切り替え全体のスタイル*/ 
.tabs { 
  margin-top: 50px; 
  padding-bottom: 40px; 
  background-color: #c1c1c1c1; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
  width: 700px; 
  margin: 0 auto;} 
 
/*タブのスタイル*/ 
.tab_item { 
  width: calc(100%/3); 
  height: auto; 
  border-bottom: 3px solid #FFB2B2; 
  background-color: #c1c1c1; 
  line-height: 50px; 
  font-size: 16px; 
  text-align: center; 
  color: #1c1c1c; 
  display: block; 
  float: left; 
  text-align: center; 
  font-weight: bold; 
  transition: all 0.2s ease; 
} 
.tab_item:hover { 
  opacity: 0.75; 
} 
 
/*ラジオボタンを全て消す*/ 
input[name="tab_item"] { 
  display: none; 
} 
 
/*タブ切り替えの中身のスタイル*/ 
.tab_content { 
  display: none; 
  padding: 40px 40px 0; 
  clear: both; 
  overflow: hidden; 
} 
 
 
/*選択されているタブのコンテンツのみを表示*/ 
#all:checked ~ #all_content, 
#programming:checked ~ #programming_content, 
#design:checked ~ #design_content { 
  display: block; 
} 
 
/*選択されているタブのスタイルを変える*/ 
.tabs input:checked + .tab_item { 
  background-color: #E3E3E3; 
  color: #1c1c1c; 
} 

▼HTML

<div class="tabs"> 
  <input id="all" type="radio" name="tab_item" checked> 
  <label class="tab_item" for="tab1">タブ１</label> 
  <input id="programming" type="tab2" name="tab_item"> 
  <label class="tab_item" for="programming">タブ２</label> 
  <input id="design" type="radio" name="tab_item"> 
  <label class="tab_item" for="tab3">タブ３</label> 
  <div class="tab_content" id="all_content"> 
    <div class="tab_content_description"> 
      <p class="c-txtsp"> 
      タブ１の内容 
      </p> 
    </div> 
  </div> 
  <div class="tab_content" id="programming_content"> 
    <div class="tab_content_description"> 
      <p class="c-txtsp"> 
      タブ２の内容
      </p> 
    </div> 
  </div> 
  <div class="tab_content" id="design_content"> 
    <div class="tab_content_description"> 
      <p class="c-txtsp"> 
      タブ３の内容
      </p> 
    </div> 
  </div> 
 </div>