From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/pre/index.html | 152 +++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 files/ja/web/html/element/pre/index.html (limited to 'files/ja/web/html/element/pre/index.html') diff --git a/files/ja/web/html/element/pre/index.html b/files/ja/web/html/element/pre/index.html new file mode 100644 index 0000000000..f5272db04a --- /dev/null +++ b/files/ja/web/html/element/pre/index.html @@ -0,0 +1,152 @@ +--- +title: '
: 整形済みテキスト要素'
+slug: Web/HTML/Element/pre
+tags:
+  - HTML
+  - HTML コンテンツグループ化
+  - 'HTML:フローコンテンツ'
+  - 'HTML:知覚可能コンテンツ'
+  - ウェブ
+  - リファレンス
+  - 要素
+translation_of: Web/HTML/Element/pre
+---
+
{{HTMLRef}}

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

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

+
+
+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
コンテンツカテゴリフローコンテンツ、知覚可能コンテンツ
許可されている内容記述コンテンツ
タグの省略{{no_tag_omission}}
許可されている親要素フローコンテンツを受け入れるすべての要素
許可されている ARIA ロールすべて
DOM インターフェイス{{domxref("HTMLPreElement")}}

+
+
属性

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

+
+

+ 
{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}

+ 
1行あたりの望ましい文字数を示します。これは {{htmlattrxref("width", "pre")}} の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。

+ 
{{htmlattrdef("width")}} {{obsolete_inline}}

+ 
1行あたりの望ましい文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。

+ 
{{htmlattrdef("wrap")}} {{non-standard_inline}}

+ 
テキストがはみ出た場合の処理に関するヒントを示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。

+

+
+
例

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

+
+
結果

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

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

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

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

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

+
+
例

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

+
+
+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{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 属性を非推奨に変更

+
+
ブラウザーの対応

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

+
+
関連情報

+
+
-- 
cgit v1.2.3-54-g00ecf