padding

padding: 10px 20px 30px;

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

cursor

background-color

border

border-[上下左右]

outline

transition

<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>

/* 問題1. ボタンのCSSを書いてください */
.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;
}
/* 問題2. コンテンツ(`.tab-content`クラス)のCSSを書いてください */
.tab-content {
  padding: 20px;
  border-top: 1px solid #ccc;
}


<button data-target="tab1">タブ1</button>
<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>

/* 問題1. ボタンのCSSを書いてください */
.tab-button {
}
/* 問題2. コンテンツ(`.tab-content`クラス)のCSSを書いてください */
.tab-content {
}


基本スタイルの指定

<button>

<div>

classセレクタ

idセレクタ

data-target

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

display: none

display: block

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

document.querySelectorAll()

配列操作/forEach

document.addEventListener()

clickイベント

event.currentTarget

element.getAttribute()

document.getElementById()

タブを開く動作を実装1

element.classList.add()

element.classList.remove()

タブを開く動作を実装2

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