Text (テキスト)

Text コンポーネントシンボルは、ニュースやブログポストなどインタラクティブでない段落文字列のタイトルコンテンツを表示します。

Text のデモ

Title と Paragraph

Text には、Titles と Paragraphs のためのバリアントがあります。

タイトルサイズ

テキストタイトルは、最小 H6 から最大 H1 の 6 つのプリセットサイズがあります。

Title の挿入後、そのサイズに基づいて高さを設定してください。 | サイズ | ピクセル単位の高さ | | -- | ----- | | H1 | 170px | | H2 | 85px | | H3 | 68px | | H4 | 42px | | H5 | 36px | | H6 | 31px |

段落サイズ

テキスト段落には、ラージ Body 1、スモール Body 2、画像やタイトルの注釈に使用する極小キャプションがあります。

Paragraph の挿入後、そのサイズおよびテキストコンテンツの長さに基づいて高さを設定してください。Paragraph が複数行にまたがる場合、以下の表の値を行数でかけ算します。

サイズ	ピクセル単位の高さ
Body 1	24px
Body 2	21px
Caption	19px

スタイル設定

Titles と Paragraphs は、オプションを通じて制限されたスタイル設定の柔軟性があり、Styling ライブラリの Typography 部分で使用可能なテキストウェイトや色のプリセットからのみ選択できます。

使用方法

Hyperlink を複数同時に使用する場合は、Hyperlink を目立つように Paragraph テキスト色を選択します。同じ色や似たような色を使用せずに全体的なデザインの色を統一します。1 行注釈のみの段落キャプションサイズを使用し、複数行に及ぶより長い文字列に極小フォントサイズなどは使用しないようにします。

良い例	悪い例

コードの生成

Title または Paragraph に色やフォントを指定した場合、タイトルまたは段落要素に適用される CSS クラスに直接適用されます。

Warning

デザインの Title または Paragraph Text のインスタンスで Detach from Symbol をトリガーすると、ほとんどの場合で Title または Paragraph Text のためのコード生成機能が失われる結果となります。コード生成で Sketch のレイアウトと一致させるには、コンテンツを描画するために必要な高さを Title および Paragraph に設定してください。

テキスト

Text プロパティにテキスト、テキストのバインディング、または両方を含むことができます。例:

設定
{settingsLabel}
重要な {labelText}