From 9cd1d9191ac7dda6214c66a2bb4b6e9465a3b60d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jul 2023 00:43:03 +0900 Subject: [PATCH] =?UTF-8?q?2023/04/13=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/pre/index.md | 154 +++++++++++++++---------- 1 file changed, 90 insertions(+), 64 deletions(-) diff --git a/files/ja/web/html/element/pre/index.md b/files/ja/web/html/element/pre/index.md index 6080a9b37e29fd..c0fb2a4e6a3d65 100644 --- a/files/ja/web/html/element/pre/index.md +++ b/files/ja/web/html/element/pre/index.md @@ -1,6 +1,8 @@ --- -title: '
: 整形済みテキスト要素'
+title: "
: 整形済みテキスト要素"
 slug: Web/HTML/Element/pre
+l10n:
+  sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff
 ---
 
 {{HTMLSidebar}}
@@ -9,16 +11,98 @@ slug: Web/HTML/Element/pre
 
 {{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}
 
+`
` タグ内で `<`、`>`、`&`、`"` などの予約文字を表示する必要がある場合は、それぞれの [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
+

+  
+      __________________
+  < 私は牧場の達人です。>
+      ------------------
+          \   ^__^
+           \  (oo)\_______
+              (__)\       )\/\
+                  ||----w |
+                  ||     ||
+  

+  

+    「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
+  

+

+```
+
+- [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
+
CSS を使用してフォントの色を変更するのは簡単です。

+
+body {
+  color: red;
+}
+

+```
+
+#### 結果
+
+{{EmbedLiveSample("Basic_example")}}
+
+### 予約文字のエスケープ
+
+#### HTML
+
+```html
+
+let i = 5;
+
+if (i < 10 && i > 0)
+  return "1 桁の数値"
+

+```
+
+#### 結果
+
+{{EmbedLiveSample("Escaping_reserved_characters")}}
+
+## 技術的概要
+
 
@@ -26,7 +110,7 @@ slug: Web/HTML/Element/pre
     
@@ -38,7 +122,7 @@ slug: Web/HTML/Element/pre
     
@@ -62,65 +146,6 @@ slug: Web/HTML/Element/pre
   

   
     

       
-        コンテンツカテゴリー
       
       
-        フローコンテンツ、知覚可能コンテンツ
       

       許可されている内容
       
-        記述コンテンツ
       

       許可されている親要素
       
-        フローコンテンツを受け入れるすべての要素
       

 

 
-## 属性
-
-この要素は[グローバル属性](/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
-
-
-body {
-  color: red;
-}
-

-```
-
-### 結果
-
-{{EmbedLiveSample("Example")}}
-
-## アクセシビリティの考慮
-
-整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。
-
-弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。
-
-{{HTMLElement("figure")}} および {{HTMLElement("figcaption")}} 要素の組み合わせに、 [`id`](/ja/docs/Web/HTML/Global_attributes#id) および [ARIA](/ja/docs/Web/Accessibility/ARIA) `role` および `aria-labelledby` 属性を補ったもので、整形済みテキストを図形として扱い、 `figcaption` を図形の別の説明として提供することができます。
-
-### 例
-
-```
-

-  
-  __________________
-< 私は牧場の達人です。>
-  ------------------
-         \   ^__^
-          \  (oo)\_______
-             (__)\       )\/\
-                 ||----w |
-                 ||     ||
-  

-  

-    「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
-  

-

-```
-
-- [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}}
@@ -132,4 +157,5 @@ body {
 ## 関連情報
 
 - CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}
+- [HTML エンティティ](/ja/docs/Glossary/Entity)
 - 関連する要素: {{HTMLElement("code")}}