display: none

display: block

background-color

border-[上下左右]

<button class="tab-button active" data-target="tab1">タブ1</button>
<button class="tab-button" data-target="tab2">タブ2</button>


<div id="tab1" class="tab-content active">
  <p>タブ1の内容です</p>
</div>
<div id="tab2" class="tab-content">
  <p>タブ2の内容です</p>
</div>

.tab-button {
  padding: 10px 15px;
  cursor: pointer;
  background-color: #f1f1f1;
  border: none;
  border-bottom: 2px solid transparent;
  outline: none;
  transition: background-color 0.3s, border-color 0.3s;
}

.tab-content {
  /* 問題2. 2つあるうちの1つを表示状態となるように、HTML構造を変更してください */
  display: none;
  padding: 20px;
  border-top: 1px solid #ccc;
}

/* 問題2. 2つあるうちの1つを表示状態となるように、HTML構造を変更してください */
.tab-content.active {
  display: block;
}

/* 問題2. 2つあるうちの1つを表示状態となるように、HTML構造を変更してください */
.tab-button.active {
  background-color: #ffffff;
  border-bottom: 2px solid #2196f3;
}


<button class="tab-button" data-target="tab1">タブ1</button>
<button class="tab-button" data-target="tab2">タブ2</button>


<div id="tab1" class="tab-content">
  <p>タブ1の内容です</p>
</div>
<div id="tab2" class="tab-content">
  <p>タブ2の内容です</p>
</div>

.tab-button {
  padding: 10px 15px;
  cursor: pointer;
  background-color: #f1f1f1;
  border: none;
  border-bottom: 2px solid transparent;
  outline: none;
  transition: background-color 0.3s, border-color 0.3s;
}

.tab-content {
  /* 問題2. 2つあるうちの1つを表示状態となるように、HTML構造を変更してください */

  padding: 20px;
  border-top: 1px solid #ccc;
}

/* 問題2. 2つあるうちの1つを表示状態となるように、HTML構造を変更してください */

/* 問題2. 2つあるうちの1つを表示状態となるように、HTML構造を変更してください */


CSSで表示、非表示状態を指定

<button>

<div>

classセレクタ

idセレクタ

data-target

ボタンとコンテンツの配置

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

cursor

border

outline

transition

基本スタイルの指定

document.querySelectorAll()

配列操作/forEach

document.addEventListener()

clickイベント

event.currentTarget

element.getAttribute()

document.getElementById()

タブを開く動作を実装1

element.classList.add()

element.classList.remove()

タブを開く動作を実装2

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます