−タブ−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

タブ

【 HTML 】
<div class="tabs">
	<input id="tab_box1" type="radio" name="tab_item" checked>
	<label class="tab_item" for="tab_box1">タブ1</label>
	<input id="tab_box2" type="radio" name="tab_item">
	<label class="tab_item" for="tab_box2">タブ2</label>
	<input id="tab_box3" type="radio" name="tab_item">
	<label class="tab_item" for="tab_box3">タブ3</label>

	<div class="tab_content" id="tab_contents1">
		<div class="tab_content_description">
			<p class="c-txtsp">総合の内容がここに入ります</p>
		</div>
	</div>

	<div class="tab_content" id="tab_contents2">
		<div class="tab_content_description">
			<p class="c-txtsp">プログラミングの内容がここに入ります</p>
		</div>
	</div>

	<div class="tab_content" id="tab_contents3">
		<div class="tab_content_description">
			<p class="c-txtsp">デザインの内容がここに入ります</p>
		</div>
	</div>
</div>


【 CSS 】
/*タブ切り替え全体のスタイル*/
.tabs {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  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;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#tab_box1:checked ~ #tab_contents1,
#tab_box2:checked ~ #tab_contents2,
#tab_box3:checked ~ #tab_contents3 {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

calc

width: calc(100%/3); 計算式

【fontサイズを可変にかえる】
p{
	font-size: calc(100vw / 50);
}


【3分割】
width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;


【均等に3分割】※右側に余白分、マイナスで引く
width : -webkit-calc(100% / 3 - 5px) ;
width : calc(100% / 3 - 5px) ;
margin:0px 5px 20px 0px;