Skip to content

Commit

Permalink
2024/10/11 時点の英語版に基づき更新
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Oct 20, 2024
1 parent b717299 commit 83061e5
Showing 1 changed file with 23 additions and 23 deletions.
46 changes: 23 additions & 23 deletions files/ja/web/html/element/label/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: "<label>: ラベル要素"
slug: Web/HTML/Element/label
l10n:
sourceCommit: 37163d27e0625a83a3f8633fe58b9041867adeaa
sourceCommit: 816cc4d4a5a318a23222946b6981bb92b499aebb
---

{{HTMLSidebar}}
Expand Down Expand Up @@ -41,9 +41,9 @@ l10n:

この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)があります。

- `for`
- [`for`](/ja/docs/Web/HTML/Attributes/for)

- : `for` 属性の値は単一の [`id`](/ja/docs/Web/HTML/Global_attributes#id) でなければならず、これは `<label>` 要素と同一の文書内にある[ラベル付け可能](/ja/docs/Web/HTML/Content_categories#ラベル付け可能)なフォーム関連要素のものです。従って、この `label` 要素が関連付けられるのはフォームコントロール 1 つだけです。
- : `for` 属性の値は単一の [`id`](/ja/docs/Web/HTML/Global_attributes/id) でなければならず、これは `<label>` 要素と同一の文書内にある[ラベル付け可能](/ja/docs/Web/HTML/Content_categories#ラベル付け可能)なフォーム関連要素のものです。従って、この `label` 要素が関連付けられるのはフォームコントロール 1 つだけです。

> [!NOTE]
> プログラムから `for` 属性を設定する場合は、 [`htmlFor`](/ja/docs/Web/API/HTMLLabelElement/htmlFor) を使用してください。
Expand All @@ -58,26 +58,7 @@ l10n:

`<label>` には特殊なスタイル上の考慮事項はありません。構造的に単純なインライン要素であり、ほとんどは {{htmlelement("span")}} や {{htmlelement("a")}} 要素と同じ方法でスタイルを適用します。テキストが読みにくくならない限り、あらゆる方法でスタイルを適用することができます。

##

### 暗黙のラベルの定義

```html
<label>Click me <input type="text" /></label>
```

{{EmbedLiveSample('Simple_label_example', '200', '50')}}

### "for" 属性をつけた明示的なラベルの定義

```html
<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />
```

{{EmbedLiveSample('Using_the_for_attribute', '200', '50')}}

## アクセシビリティの考慮
## アクセシビリティ

### 対話型コンテンツ

Expand Down Expand Up @@ -132,6 +113,25 @@ l10n:

{{HTMLElement("input")}} 要素に `type="button"` がついた宣言に妥当な `value` 属性があれば、関連付けるラベルは必要ありません。ラベルを付けると、支援技術がボタン入力をどう解釈するかをじゃまする可能性があります。 {{HTMLElement("button")}} 要素でも同じことが言えます。

##

### 暗黙のラベルの定義

```html
<label>Click me <input type="text" /></label>
```

{{EmbedLiveSample('Simple_label_example', '200', '50')}}

### "for" 属性をつけた明示的なラベルの定義

```html
<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />
```

{{EmbedLiveSample('Using_the_for_attribute', '200', '50')}}

## 技術的概要

<table class="properties">
Expand Down

0 comments on commit 83061e5

Please sign in to comment.