セクション

段落要素を使用して、インライン テキストを追加、スタイル設定、および書式設定します。

タスクに長いテキストブロックを含める場合は、セクション要素または リッチテキスト要素ここでは、セクションに関するすべての基本事項について説明します。

この授業セッションでは、
  1. セクションを組み込む
  2. デザインセクション
  3. セクション間の間隔を変更する
  4. インラインテキストの書式設定とカスタマイズ

セクションを含める

セクションアイコンのサムネイル

セクション要素は、 要素パネル (ショートカット: A)。通常、セクション要素はプレースホルダー テキストのブロックで構成されます。ダブルクリックして選択し、コンテンツを入力または貼り付けて、内部のテキストを置き換えることができます。要素を選択して Enter キーを押すと、テキスト編集モードにアクセスできます。

lorem ipsum テキストで埋められたセクション要素。

複数のセクションを含める

ページの一部に複数のセクションを挿入する必要がある場合があります。 入力 1つのセクション要素内のセクション間にスペースを空ける場合は、セクションごとに別のセクション要素を使用することをお勧めします。これにより、スペースをより細かく制御できます。 リッチテキスト要素Enter キーを押すと、複数のセクションを簡単に挿入できます。

デザインセクション

セクションをデザインする方法は数多くあります。個別のクラスを作成し、同様のスタイルが設定されたセクションでこのクラスを再利用できます。すべてのセクション要素を同時にスタイル設定して、そこで終了することもできます。または、Body でスタイルを定義し、セクションがそれらのスタイルを継承できるようにすることもできます。  

クラスでデザインする

セクションを選択し、スタイル パネルでスタイルの変更を実装することで、セクション要素をデザインできます。これらの変更はクラス名で保存されます。このクラスを他のセクションにも実装できます。

  1. 選択してください セクション あなたがデザインしたい
  2. タップして セレクタフィールド
  3. 同じクラス名を入力してください
  4. 打つ 入力
  5. セクションを設計する
セレクターフィールドには、Bigger sectionというアクティブなクラスが表示されます。

すべてのセクションタグの設計

プロジェクトを初期化する最も適切な方法は、プロジェクト内のすべてのセクションのデフォルト デザインを網羅する「すべてのセクション」タグをスタイル設定することです。

  1. セクションを選択
  2. タップして セレクタフィールド
  3. 選択する すべてのセクション
  4. スタイルをカスタマイズ
セレクター フィールドをクリックすると、新しいクラス、HTML タグ、既存のクラスのセクションを含むドロップダウン メニューが表示されます。

Bodyタグのテキストのデザイン

それでも、セクションを含むすべてのテキスト要素に対して、フォント ファミリやフォント サイズなどのタイポグラフィ スタイルを指定したい場合があります。プロジェクト全体のデフォルトのタイポグラフィ スタイルを定義するには、Body (すべてのページ) タグを調整します。

  1. を選択 要素
  2. タップして セレクターフィールド
  3. 選択する 本文(全ページ)
  4. パーソナライズ タイポグラフィスタイル
左側のステップ 1 では、ナビゲータから body 要素を選択します。右側のステップ 2 では、セレクター フィールドのドロップダウン メニューの HTML タグ セクションの下にある Body (すべてのページ) クラスを選択します。これら 2 つの要素が強調表示されます。

セクション間の間隔を変更する

明確なセクション要素を作成したら、margin プロパティを使用してそれらの要素間の間隔を微調整できます。

  1. を選択 セクション
  2. タップして セレクターフィールド
  3. 選択する すべてのセクション
  4. 下余白を組み込む
左側の手順 1 では、HTML タグの下にある [すべてのセクション] クラスを選択します。右側の手順 2 では、スタイル パネルの [間隔] セクションでセクションに下余白を追加します。

いくつかのセクションの間隔を調整する必要がある場合は、 クラスこれで、このクラスで行われたデザインの変更は、同じクラスを持つセクションに適用されます。

インラインテキストのフォーマットとデザイン

場合によっては、セクション要素内のテキストの一部をデザインしたい場合があります。たとえば、単語を斜体にしたり、フレーズにリンクを追加したり、文に下線を付けたりしたい場合があります。セクション要素をダブルクリックすると表示されるテキスト書式設定バーを使用して、これを実現できます。

セクション テキスト内で iterdum という単語が強調表示されています。単語の上には、太字、斜体、リンクの挿入、範囲で折り返す、書式のクリアという 5 つのテキスト書式設定オプションを含むテキスト書式設定バーが表示されています。

インライン テキストの書式設定について詳しく説明します。

ユアン・マック