#13|文章の段落構成(パラグラフ)について

インラインテキストの追加、スタイル、フォーマットには、Paragraph(パラグラフ)要素を使用します。

目次

プロジェクトに長いテキストブロックを追加したい場合、パラグラフ要素またはリッチテキスト要素のどちらかを選択することになります。

このレッスンでは

  1. 段落を追加する
  2. 段落のスタイルの設定
  3. 段落間のスペーシングを調整する
  4. インラインテキストのフォーマットとスタイル

について説明しています。

1. 段落を追加する

Paragraph icon thumbnail

要素パネル(ショートカット:A)から、パラグラフ要素を追加することができます。デフォルトでは、パラグラフ要素にはプレースホルダーテキスト(入力欄などにあらかじめ表示されている単語やフレーズ)のブロックが含まれています。

ダブルクリックでテキストを選択し、入力またはペーストすることで、内部のテキストを置き換えることができます。また、要素を選択してEnterキーを押すことで、テキスト編集モードに入ることもできます。

A paragraph element filled with lorem ipsum text.

複数の段落を追加したいとき

ページ内の1つのセクションに複数のパラグラフを追加する必要がある場合があります。

この場合、1つのパラグラフ要素内でパラグラフ間にEnterキーを入力することもできますが、各パラグラフに別々のパラグラフ要素を使用する方がよい方法です。

こうすることで、間隔をより細かく制御することができます。リッチテキスト要素を使用すると、Enterキーを押すだけで簡単に複数の段落を追加することができます。

2. 段落のスタイルの設定

段落のスタイルを設定する方法はたくさんあります。ユニークなクラスを作成し、このクラスを同様のスタイルを持つ段落に再利用することができます。一度にすべての段落の要素にスタイルを設定し、そのままにしておくこともできます。あるいは、Bodyにスタイルを設定し、段落にそれらのスタイルを継承させることもできます。 

クラスによるスタイル設定

段落を選択し、スタイルパネルでスタイルを変更することで、段落要素にスタイルを設定することができます。変更した内容は、クラス名で保存されます。このクラスは、他の段落にも適用することができます。

  1. スタイルを設定する段落を選択します。
  2. セレクタフィールドをクリックする
  3. 同じクラス名を入力します。
  4. Enterキーを押す
The selector field displays an active class named Bigger paragraph

All Paragraphsタグによるスタイル設定

このタグは、プロジェクト内のすべての段落のデフォルトスタイルを保持します。

  1. 段落を選択する
  2. セレクタフィールドをクリックする
  3. すべての段落を選択する
  4. スタイルをカスタマイズする
The selector field is clicked displaying a dropdown menu containing sections New class, HTML tag and existing classes.

Bodyタグでテキストをスタイル指定する

しかし、段落を含むすべてのテキスト要素について、フォントファミリやフォントサイズなどの組版スタイルを指定したい場合があります。プロジェクト全体のデフォルトの組版スタイルを設定するには、「Body(全ページ)」タグを編集します

  1. Body要素を選択します。
  2. セレクタフィールドをクリックします。
  3. 本文(全ページ)」を選択
  4. タイポグラフィースタイルをカスタマイズする
Step one on the left, select the body element from the navigator. Step two on the right, select the Body (all pages) class under the HTML tag section in the Selector field dropdown menu. These two elements are highlighted.

3. 段落間のスペーシングを調整する

段落が分かれている場合、marginプロパティを使って段落間の間隔を調整することができます。

Step one on the left, select the All paragraphs class under the HTML Tag. Step two on the right, add bottom margin to the paragraph in the Spacing section of the style panel.

また、一部の段落だけ間隔を調整する必要がある場合は、クラスを適用することができます。このクラスで変更したスタイルは、同じクラスを持つ段落に適用されます。

4. インラインテキストの書式設定とスタイル

場合によっては、段落要素内のテキストの一部にスタイルを付けたいこともあります。例えば、ある単語を斜体にしたり、フレーズにリンクを付けたり、あるいは文章に下線を引いたりしたい場合があります。そのような場合は、段落要素をダブルクリックすると表示されるテキストフォーマットバーを使用します。

The word iterdum is highlighted within the paragraph text. A text formatting bar is hovering above the word with the 5 text formatting options, bold, italic, insert link, wrap with span and clear formatting.