FD4B: セクション見出し、段落テキスト、引用ブロックを作成する

ケーススタディページの要素を作成する準備が整いました。ページを異なるトピックに分けるためのセクション見出し、長文テキストのための段落、メインの本文に属さない引用のための視覚的な切れ目として引用ブロックを作成することから始めましょう。

セクション見出しを作成する

セクション見出しから始めましょう。

1. テキストツールを選択して、ケーススタディの探索フレーム内をクリックします。
2. 小さなプレースホルダーテキストを入力します。テキストコンテンツの編集を停止するには、キャンバスのどこかをクリックします。
3. タイポグラフィセクションを使用して、フォントサイズを28、フォントの太さを太字、行の高さを38に変更します。
4. テキストレイヤーの名前をセクション見出しに変更します。

段落テキストを作成する

次に段落のテキストブロックを作成します。

1. キャンバスの空白の部分をクリックして、すべてのレイヤーを選択解除します。
2. 再びテキストツールを選択します。
3. ケーススタディ探索フレームの約2/3の大きさのテキストボックスをドラッグして作成します。
4. プレースホルダーの段落をいくつか入力し始めます。Figmaが前のレイヤーに設定したテキストプロパティを覚えていたことに気づくでしょう。
5. フォントサイズを20に更新し、フォントの太さをミディアム、テキストのリサイズを高さの自動調整にします。行の高さを38に設定したままにします。
6. 読みやすさを向上させるために、 タイプ設定を開き、段落間隔を24に設定します。
7. テキストレイヤーの幅を1000に設定して、1行に含まれる単語が多すぎることによる読解疲労を防ぎます。
8. 最後に、フレームの名前を段落テキストに変更します。

引用ブロックを作成する

引用ブロックには別のテキストレイヤーを使用します。

1. テキストツールを選択し、段落テキストレイヤーと同じ幅のテキストボックスを描画します。
2. プレースホルダーの引用を入力します。
3. フォントサイズを24に増やし、テキストをミディアムイタリックに変更して強調します。テキストリサイズが高さの自動調整に設定されていることを確認し、行の高さを38、段落の間隔を24に設定します。
4. 引用を他のコンテンツの間に置く切れ目として目立たせるために、レイヤーの幅を570に変更し、水平配置を中央揃えにします。テキスト配置についてもっと学びましょう。
5. レイヤーの名前を引用に変更します。