Skip to content

Commit

Permalink
2023/04/13 時点の英語版に同期
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfuji09
mfuji09 committed Jul 7, 2023
1 parent 506312b commit 9cd1d91
Showing 1 changed file with 90 additions and 64 deletions.
154 changes: 90 additions & 64 deletions files/ja/web/html/element/pre/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: '<pre>: 整形済みテキスト要素'
title: "<pre>: 整形済みテキスト要素"
slug: Web/HTML/Element/pre
l10n:
sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff
---

{{HTMLSidebar}}
Expand All @@ -9,24 +11,106 @@ slug: Web/HTML/Element/pre

{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}

`<pre>` タグ内で `<`、`>`、`&`、`"` などの予約文字を表示する必要がある場合は、それぞれの [HTML エンティティ](/ja/docs/Glossary/Entity)を用いてエスケープする必要があります。

## 属性

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

- `cols` {{non-standard_inline}} {{deprecated_inline}}
- : 1 行あたりの*望ましい*文字数を示します。これは [`width`](#width) の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
- `width` {{deprecated_inline}} {{Non-standard_Inline}}
- : 1 行あたりの*望ましい*文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
- `wrap` {{non-standard_inline}} {{Deprecated_Inline}}
- : テキストがはみ出た場合の処理に関する*ヒント*を示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。

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

整形済みテキストを使用して作成した画像や図には、代替説明を提供することが重要です。代替説明は、画像や図のコンテンツを明確かつ簡潔に記述する必要があります。

弱視の人やスクリーンリーダーなどの支援技術を使って閲覧している人は、整形済みテキスト文字が順番に読み上げられたときに何を表しているのか理解できないかもしれません。

{{HTMLElement("figure")}} 要素と {{HTMLElement("figcaption")}} 要素の組み合わせや、`pre` 要素の [ARIA](/ja/docs/Web/Accessibility/ARIA) の `role` と [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性によって補われます。整形済み ASCII アートは代替テキストを持つ画像としてアナウンスされ、`figcaption` は画像のキャプションとして機能します。

### 例

```html
<figure>
<pre role="img" aria-label="ASCII COW">
__________________
&lt; 私は牧場の達人です。&gt;
------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
</figcaption>
</figure>
```

- [MDN「WCAG を理解する」ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#ガイドライン_1.1_—_非テキストコンテンツのための代替テキストの提供)
- [H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H86.html)

## 例

### 基本的な例

#### HTML

```html
<p>CSS を使用してフォントの色を変更するのは簡単です。</p>
<pre>
body {
color: red;
}
</pre>
```

#### 結果

{{EmbedLiveSample("Basic_example")}}

### 予約文字のエスケープ

#### HTML

```html
<pre>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
return &quot;1 桁の数値&quot;
</pre>
```

#### 結果

{{EmbedLiveSample("Escaping_reserved_characters")}}

## 技術的概要

<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/ja/docs/Web/Guide/HTML/Content_categories"
<a href="/ja/docs/Web/HTML/Content_categories"
>コンテンツカテゴリー</a
>
</th>
<td>
<a href="/ja/docs/Web/Guide/HTML/Content_categories#フローコンテンツ"
<a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ"
>フローコンテンツ</a
>、知覚可能コンテンツ
</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td>
<a href="/ja/docs/Web/Guide/HTML/Content_categories#記述コンテンツ"
<a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
>記述コンテンツ</a
>
</td>
Expand All @@ -38,7 +122,7 @@ slug: Web/HTML/Element/pre
<tr>
<th scope="row">許可されている親要素</th>
<td>
<a href="/ja/docs/Web/Guide/HTML/Content_categories#フローコンテンツ"
<a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ"
>フローコンテンツ</a
>を受け入れるすべての要素
</td>
Expand All @@ -62,65 +146,6 @@ slug: Web/HTML/Element/pre
</tbody>
</table>

## 属性

この要素は[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみを持ちます。

- `cols` {{non-standard_inline}}{{deprecated_inline}}
- : 1 行あたりの*望ましい*文字数を示します。これは [`width`](/ja/docs/Web/HTML/Element/pre#width) の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
- `width` {{deprecated_inline}}
- : 1 行あたりの*望ましい*文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
- `wrap` {{non-standard_inline}}
- : テキストがはみ出た場合の処理に関する*ヒント*を示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。

## 例

### HTML

```html
<!-- CSS コードを表示する例 -->
<pre>
body {
color: red;
}
</pre>
```

### 結果

{{EmbedLiveSample("Example")}}

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

整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。

弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。

{{HTMLElement("figure")}} および {{HTMLElement("figcaption")}} 要素の組み合わせに、 [`id`](/ja/docs/Web/HTML/Global_attributes#id) および [ARIA](/ja/docs/Web/Accessibility/ARIA) `role` および `aria-labelledby` 属性を補ったもので、整形済みテキストを図形として扱い、 `figcaption` を図形の別の説明として提供することができます。

### 例

```
<figure role="img" aria-labelledby="cow-caption">
<pre>
__________________
< 私は牧場の達人です。>
------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
</figcaption>
</figure>
```

- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
- [H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H86.html)

## 仕様書

{{Specifications}}
Expand All @@ -132,4 +157,5 @@ body {
## 関連情報

- CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}
- [HTML エンティティ](/ja/docs/Glossary/Entity)
- 関連する要素: {{HTMLElement("code")}}

0 comments on commit 9cd1d91

Please sign in to comment.