HTMLとCSSでタブ表示デザインをする

みなさんごきげんよう。shinoです。勉強を始めて一年、ポートフォリオを作っているのですが難しかった部分を自分のより深い理解のために書きたいと思います。
早速ですがまずは表現したいものがこちらです。上のタブ部分をクリックすると下のコンテンツの表示が変わります。

動き

実際のコード

こちらがHTMLになります。
詳しい説明は下に書いてあります。

sample.html

  <main class="p-main">
    <div class="c-tab">
      <h2 class="p-tab__title yellow"><label for="yellow-radio" class="p-tab__radio">きいろ</label></h2>
      <input type="radio" name="tab" class="none" id="yellow-radio" checked>
      <div class="p-tab__content p-tab__content1">
        <p class="p-tab__text">
          とても簡単なことだ。ものごとはね、心で見なくてはよく見えない。いちばんたいせつなことは、目に見えない。
        </p>
      </div>
      <h2 class="p-tab__title rightblue"><label for="rightblue-radio" class="p-tab__radio">みずいろ</label></h2>
      <input type="radio" name="tab" class="none" id="rightblue-radio">
      <div class="p-tab__content p-tab__content2">
        <p class="p-tab__text">
          ぼくはこの世で一輪だけの花を知っていて、それはぼくの星以外のどこにも咲いていないのに、小さなヒツジがある時、なんにも考えずにぱくっと、こんなふうに、その花を食べてしまっても、それが重要じゃないって言うの？
        </p>
      </div>
      <h2 class="p-tab__title pink"><label for="pink-radio" class="p-tab__radio">ももいろ</label></h2>
      <input type="radio" name="tab" class="none" id="pink-radio">
      <div class="p-tab__content p-tab__content3">
        <p class="p-tab__text">
          きみが星空を見上げると、そのどれかひとつにぼくが住んでいるから、そのどれかひとつでぼくが笑ってるから、きみには星という星が、ぜんぶ笑ってるみたいになるっていうこと。きみには、笑う星々をあげるんだ！
        </p>
      </div>
    </div>
  </main>

sample.css

/* ------------------------------
centering
---------------------------------*/
.p-main {
  width: 80%;
  margin: 0 auto;
}

/* ------------------------------
title
---------------------------------*/
.c-tab {
  display: flex;
  width: 82%;
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.p-tab__title {
  order: -1;
  text-align: center;
  border-radius: 16px 16px 0 0;
}

.p-tab__content {
  display: none;
  border-radius: 0 16px 16px 16px;
  height: 380px;
  align-items: center;
  justify-content: center;
}


.p-tab__text {
  width: 80%;
  line-height: 1.4;
  font-size: 1.2em;
  color: #333;
}

.p-tab__radio {
  display: inline-block;
  padding: 28px;
  cursor: pointer;
  width: 10rem;
  font-size: 1.2em;
  color: #333;
}


/* ------------------------------
content
---------------------------------*/
.yellow {
  background-color: #FFFF00;
}

.p-tab__content1 {
  background-color: #FFFFd6;
}

.rightblue {
  background-color: #92E0FF;
}

.p-tab__content2 {
  background-color: #e0f6ff;
}

.pink{
  background-color: #FFBBDD;
}

.p-tab__content3 {
  background-color: #FFF4FA;
}

#yellow-radio:checked ~ .p-tab__content1{
  display: flex;
}

#rightblue-radio:checked ~ .p-tab__content2{
  display: flex;
}

#pink-radio:checked ~ .p-tab__content3{
  display: flex;
}

.none {
  display: none;
}

解説

まず、HTMLを見て分かる通りc-tabで囲まれているタグたちh2 input divは全て兄弟になります。つまり.c-tabの中に子どもが9個いることになります。それらをdisplay: flex;で横並びにします。

.c-tab {
  display: flex;
  width: 82%;
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
}

次にそれらのなかでtitleのもののみにorder: -1;をつけ順番を入れ替えて前に持ってきます。
(*orderの初期値は0)

.p-tab__title {
  order: -1;
  text-align: center;
  border-radius: 16px 16px 0 0;
}

次にラジオボタンをつけます。

.p-tab__radio {
  display: inline-block;
  padding: 28px;
  cursor: pointer;
  width: 10rem;
  font-size: 1.2em;
  color: #333;
}

ラジオボタンはタブの選択状態を管理するために使い、見た目上は見えなくて良いので、display: none で隠します。

.none {
  display: none;
}

次に各見出しにlabel要素をつけ、タブ部分を押したときに対応するラジオボタンにチェックがつくようにします。
＊input要素に名前をつけ、一つのグループとして認識させる必要があります。

label要素は、フォーム部品のラベル（キャプション）を表します。この要素を使用することで、フォーム部品(ラジオボタン)とラベル(title)を関連付けることができます。
引用元url:https://www.tagindex.com/html/form/label.html

 <h2 class="p-tab__title yellow"><label for="yellow-radio" class="p-tab__radio">きいろ</label></h2>
      <input type="radio" name="tab" class="none" id="yellow-radio" checked>

次にラジオボタンのチェック状態とcontentの表示状態を関連づけます。

#yellow-radio:checked ~ .p-tab__content1{
  display: flex;
}

#rightblue-radio:checked ~ .p-tab__content2{
  display: flex;
}

#pink-radio:checked ~ .p-tab__content3{
  display: flex;
}

というわけでタブ表示の説明を終わりたいと思います。
参考になれば嬉しいです。