CSS入門 #2 - classとidでスタイルを当てる

今回やること

CSSでは、どのHTMLにスタイルを当てるかをセレクタで指定します。

複数の場所で使う見た目はclass、ページ内で一意の場所を示す時はid、と分けると管理しやすくなります。

今回は、classとidの使い分けを練習します。

要素セレクタ

タグ名をそのまま指定する書き方です。

p {
  line-height: 1.8;
}

この場合、すべての p に同じスタイルが当たります。

classを使う

HTMLに class を付けます。

<p class="lead">Web制作を学んでいる高校生です。</p>

CSSでは先頭に . を付けます。

.lead {
  font-size: 18px;
  font-weight: bold;
}

classは同じページ内で何度も使えます。

<section class="card">学習中のこと</section>
<section class="card">目標</section>

.card {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

idを使う

HTMLに id を付けます。

<section id="learning">
  <h2>学習中のこと</h2>
</section>

CSSでは先頭に # を付けます。

#learning {
  background-color: #eff6ff;
}

idはページ内で同じ名前を重複させないのが基本です。ページ内リンクにも使います。

ボタンを作る

classを使ってボタン風のリンクを作ります。

<a class="button" href="https://github.com/">GitHubを見る</a>

.button {
  display: inline-block;
  padding: 12px 16px;
  color: #ffffff;
  background-color: #2563eb;
  border-radius: 9999px;
  text-decoration: none;
}

.button:hover {
  background-color: #1d4ed8;
}

hover はマウスを乗せた時の状態です。

使い分けの目安

迷ったら、見た目の指定にはclassを使うのが安全です。

よくあるミス

練習

次を実装してください。

1. 2つの section に card classを付ける
2. 最初の説明文に lead classを付ける
3. GitHubリンクに button classを付ける
4. button:hover の色を変える

次のステップ

CSS入門 #3 - Flexboxで横並びレイアウトを作る で、要素を横並びにします。

参考リソース

• MDN: 基本セレクター
• MDN: CSSセレクター
• CSS Gridチートシート

×

PR

×

PR