段落／Paragraph

テキストを表示するためのコンポーネントです。
基本文字スタイル、強調文字スタイル、キャッチコピースタイルを選択出来ます。

<p class="c-paragraph">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>

原則

本文の文字サイズはデフォルト設定の「M」サイズを使用します。
個別のセマンティックコンポーネントに内包するテキスト要素においては、「M」サイズ以外の文字サイズを使用しています。
段落内で文字を強調する必要がある場合は、「太字文字スタイル」を使用します。
段落タグ内には、インラインで記述するHTMLタグを内包できます。ただし、対応するスタイルを個別に用意はしていません。
- 太字文字
 - HTMLでは, で再現されます。
- イタリック
 - HTMLではで再現されます。
- 上付き文字・下付き文字
 - HTMLでは上付き文字は、下付き文字はで再現されます。

パターン

文字サイズ

文字サイズの変更が可能です。


<p class="c-paragraph c-paragraph--sizeSS">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--sizeS">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--sizeM">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--sizeL">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--sizeLL">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>

太字文字

太字文字で強調した表示することが可能です。


<p class="c-paragraph c-paragraph--sizeSS c-paragraph--weightBold">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--sizeS c-paragraph--weightBold">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--sizeM c-paragraph--weightBold">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--sizeL c-paragraph--weightBold">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--sizeLL c-paragraph--weightBold">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>

キャッチコピー

キャッチコピーとして表示する段落の指定が可能です。


<p class="c-paragraph c-paragraph--copy c-paragraph--copyM">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--copy c-paragraph--copyL">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--copy c-paragraph--copyLL">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>

文字揃え

文字揃えの指定が可能です。

<p class="c-paragraph c-paragraph--alignCenter">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>
<p class="c-paragraph c-paragraph--alignRight">本文テキスト 「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにしてできているのだろう?」</p>