CSSを使用して特定の部分のみにボーダーを追加する方法

1. クラスを使用する方法: HTMLの特定の要素にクラスを追加し、そのクラスに対してボーダースタイルを指定します。

HTML:

<div class="bordered-element">
  この要素にボーダーが追加されます。
</div>

CSS:

.bordered-element {
  border: 1px solid black;
}

2. IDを使用する方法: HTMLの特定の要素にIDを追加し、そのIDに対してボーダースタイルを指定します。

HTML:

<div id="bordered-element">
  この要素にボーダーが追加されます。
</div>

CSS:

#bordered-element {
  border: 1px solid black;
}

3. 子孫セレクタを使用する方法: 特定の要素の子孫要素に対してのみボーダーを追加します。

HTML:

<div class="parent">
  <div class="child">
    この要素にのみボーダーが追加されます。
  </div>
</div>

CSS:

.parent .child {
  border: 1px solid black;
}

4. 擬似クラスを使用する方法: 特定の状態にある要素にボーダーを追加します。

HTML:

<button class="active-button">
  アクティブなボタン
</button>
<button>
  通常のボタン
</button>

CSS:

.active-button {
  border: 1px solid black;
}
.active-button:hover {
  border: 2px solid red;
}

これらはいくつかの一般的な方法ですが、CSSにはさまざまなセレクタとスタイリングのオプションがあります。要件に合わせて適切な方法を選択してください。