TIL

Today I Learned. 知ったこと、学んだことを書いていく

タブの表示 - CSS

CSS HTML テキストエディタ作成

こっちの書き方のほうが好き

タブの表示 ２ - CSS - TIL

こんな感じのタブ！！！

See the Pen qowGpN by tamago (@tamago324) on CodePen.

ポイント

ラジオボタンの非表示

ラジオボタンは見せなくていいから非表示にする

input[type="radio"] {
  display: none;
}

ラベルを横並びにしてタブっぽく

横並びにすることでタブっぽくなる

.tab-item {
  /* 横並びにしている */
  display: block;
  float: left;
}

コンテンツのデフォルトは非表示

デフォルトは非表示にすることで、一つだけ表示ができるようになる

.tab-content {
  display: none;
}

clear-fixでfloatの解除

clear-fixという技術を使うとfloatの解除ができる
clear-fixについてはfloatを解除する手法のclearfix と 次世代のレイアウトの話｜Web Design KOJIKA17を参考にした

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

選択されたものに紐付けてコンテンツを表示

xxx:checked ~ yyyyでxxxにチェックがついているときのyyyのスタイルを設定する

IDじゃないといけないのかな？？JavaScriptで追加した要素に対してはどうしようかな...

#tab1:checked ~ #tab1-content,
#tab2:checked ~ #tab2-content, 
#tab3:checked ~ #tab3-content{
  display: block;
}

テキストディタにタブを付けたい！！！タブの作成とか、削除とかもやりたい！！！

参考文献