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/p/index.html | 188 +++++++++++++++++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100644 files/ja/web/html/element/p/index.html (limited to 'files/ja/web/html/element/p') diff --git a/files/ja/web/html/element/p/index.html b/files/ja/web/html/element/p/index.html new file mode 100644 index 0000000000..14e996d271 --- /dev/null +++ b/files/ja/web/html/element/p/index.html @@ -0,0 +1,188 @@ +--- +title: '

: 段落要素' +slug: Web/HTML/Element/p +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - ウェブ + - 要素 +translation_of: Web/HTML/Element/p +--- +

{{HTMLRef}}
+ +

HTML の <p> 要素は、テキストの段落を表します。視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。

+ +

段落はブロックレベル要素であり、特徴的なのは </p> で閉じる前に他のブロックレベル要素が見つかった場合は自動的に閉じることです。下記の「タグの省略」をご覧ください。

+ +
{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ、知覚可能コンテンツ
許可されている内容記述コンテンツ
タグの省略開始タグは必須。後続する要素が {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} または別の {{HTMLElement("p")}} 要素のいずれかである、または親要素内で他のコンテンツがなく親要素が {{HTMLElement("a")}} 要素ではない場合は終了タグを省略することが可能。
許可されている親要素フローコンテンツを受け入れるすべての要素
許可されている ARIA ロールすべて
DOM インターフェイス{{domxref("HTMLParagraphElement")}}
+ +

属性

+ +

この要素にはグローバル属性があります。

+ +
+

メモ: <p> の align 属性は廃止済みであり、使用するべきではありません。

+
+ +

例

+ +

HTML

+ +
<p>これはテキストの最初の段落です。
+  これはテキストの最初の段落です。
+  これはテキストの最初の段落です。
+  これはテキストの最初の段落です。</p>
+<p>これはテキストの二番目の段落です。
+  これはテキストの二番目の段落です。
+  これはテキストの二番目の段落です。
+  これはテキストの二番目の段落です。</p>
+
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

段落のスタイル付け

+ +

既定で、ブラウザーは段落を単一の空行で分割します。例えば先頭行を字下げするなど、他の分割方法は {{glossary("CSS")}} で実現することができます。

+ +

HTML

+ +
<p>Separating paragraphs with blank lines is easiest
+for readers to scan, but they can also be separated
+by indenting their first lines. This is often used
+to take up less space, such as to save paper in print.</p>
+
+<p>Writing that is intended to be edited, such as school
+papers and rough drafts, uses both blank lines and
+indentation for separation. In finished works, combining
+both is considered redundant and amateurish.</p>
+
+<p>In very old writing, paragraphs were separated with a
+special character: ¶, the <i>pilcrow</i>. Nowadays, this
+is considered claustrophobic and hard to read.</p>
+
+<p>How hard to read? See for yourself:
+  <button data-toggle-text="Oh no! Switch back!">Use pilcrow for paragraphs</button>
+</p>
+
+ +

CSS

+ +
p {
+  margin: 0;
+  text-indent: 3ch;
+}
+
+p.pilcrow {
+   text-indent: 0;
+   display: inline;
+}
+p.pilcrow + p.pilcrow::before {
+  content: " ¶ ";
+}
+ +

JavaScript

+ +
document.querySelector('button').addEventListener('click', function (event) {
+  document.querySelectorAll('p').forEach(function (paragraph) {
+    paragraph.classList.toggle('pilcrow');
+  });
+  var newButtonText = event.target.dataset.toggleText;
+  var oldText = event.target.innerText;
+  event.target.innerText = newButtonText;
+  event.target.dataset.toggleText = oldText;
+});
+ +

結果

+ +

{{EmbedLiveSample('Styling_paragraphs')}}

+ +

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

+ +

コンテンツを段落に分割すると、ページのアクセシビリティを向上するのに役立ちます。読み上げソフトやその他の支援技術が、このようなユーザーに前後の段落に飛ぶショートカットを提供することができ、空行によって視覚ユーザーが飛ばし見をすることができるのと同様、コンテンツをざっと見ることができるようになります。

+ +

段落間の間隔を広げるために空の <p> 要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。読み上げソフトは要素が存在することをアナウンスするものの、その中にはコンテンツが何もないという状況になる可能性があります。これは読み上げソフトを使用している人の利用を混乱させ不満をためる可能性があります。

+ +

追加の間隔をあける必要がある場合は、 {{cssxref("margin")}} のような {{glossary("CSS")}} プロパティを使用して効果を得るようにしてください。

+ +
p {
+  margin-bottom: 2em; // 段落の後の空白を増加させる
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}{{Spec2('HTML WHATWG')}}最新の {{glossary("W3C")}} スナップショットである {{SpecName("HTML5 W3C")}} から変更なし
{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}{{Spec2('HTML5 W3C')}}align 属性を廃止
{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}{{Spec2('HTML4.01')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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