From e66e24342991f826ca2030d81049f8ad816007bd Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 26 Aug 2021 01:31:33 +0900 Subject: Web/HTML/Element/pre を更新 (#2120) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/18 時点の英語版に同期 --- files/ja/web/html/element/pre/index.html | 84 ++++++++++++-------------------- 1 file changed, 31 insertions(+), 53 deletions(-) diff --git a/files/ja/web/html/element/pre/index.html b/files/ja/web/html/element/pre/index.html index 54cc767dbe..e8b8ffd1d1 100644 --- a/files/ja/web/html/element/pre/index.html +++ b/files/ja/web/html/element/pre/index.html @@ -4,30 +4,29 @@ slug: Web/HTML/Element/pre tags: - HTML - HTML コンテンツグループ化 - - 'HTML:フローコンテンツ' - - 'HTML:知覚可能コンテンツ' + - HTML:フローコンテンツ + - HTML:知覚可能コンテンツ - ウェブ - リファレンス - 要素 +browser-compat: html.elements.pre translation_of: Web/HTML/Element/pre ---
{{HTMLRef}}
-

HTML <pre> 要素は、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 ("monospace") フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。

+

<pre> は HTML の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。

{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}
- - - - + + - + @@ -35,7 +34,11 @@ translation_of: Web/HTML/Element/pre - + + + + + @@ -48,45 +51,44 @@ translation_of: Web/HTML/Element/pre
コンテンツカテゴリフローコンテンツ、知覚可能コンテンツコンテンツカテゴリーフローコンテンツ、知覚可能コンテンツ
許可されている内容記述コンテンツ記述コンテンツ
タグの省略
許可されている親要素フローコンテンツを受け入れるすべての要素フローコンテンツを受け入れるすべての要素
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロール
-

属性

+

属性

この要素はグローバル属性のみを持ちます。

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

例

+

例

+ +

HTML

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

結果

+

結果

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

{{EmbedLiveSample("Example")}}

-

アクセシビリティの考慮事項

+

アクセシビリティの考慮

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

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

-

{{HTMLElement("figure")}} 及び {{HTMLElement("figcaption")}} 要素の組み合わせに、 {{htmlattrxref("id")}} 及び ARIA role 及び aria-labelledby 属性を補ったもので、整形済みテキストを図形として扱い、 figcaption を図形の別の説明として提供することができます。

+

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

-

例

+

例

<figure role="img" aria-labelledby="cow-caption">
   <pre>
@@ -106,45 +108,21 @@ body {
-

仕様書

+

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '<pre>')}}{{Spec2('HTML WHATWG')}}{{SpecName("HTML5 W3C")}} から重大な変更はない
{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}{{Spec2('HTML5 W3C')}}{{SpecName("HTML4.01")}} から重大な変更はない
{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<pre>')}}{{Spec2('HTML4.01')}}cols 属性を非推奨に変更
+

{{Specifications}}

-

ブラウザーの対応

+

ブラウザーの互換性

-

{{Compat("html.elements.pre")}}

+

{{Compat}}

-

関連情報

+

関連情報

-- cgit v1.2.3-54-g00ecf