タイポグラフィ

Ignite UI for Angular タイポグラフィ Sass モジュールは、アプリケーションのすべてのコンポーネント、特定のタイポグラフィのスケールやコンポーネントを変更できます。

概要

アプリケーションで複数のタイポグラフィ scales を定義でき、スケール カテゴリを共有できます。scale category は、type styles のセットで font-family、font-size、font-weight、line-height、letter-spacing、text-transform に関する情報を含みます。

Ignite UI for Angular は、テーマごとに 4 つのデフォルトのタイプ スケールを公開します: $material-type-scale、$fluent-type-scale、$bootstrap-type-scale、$indigo-type-scale です。これらは、typography ミックスインでタイポグラフィ スタイルを設定するために使用します。ただし、追加のタイプ スケールを作成できます。

多くの場合、タイポグラフィを少し変更するだけで済みます。CSS 変数のドキュメントのタイポグラフィ セクションを最初に読んでおくことを推奨します。Sass を使用してタイポグラフィを変更する必要があるのは、タイポグラフィ スケール全体に関連するより深い変更を行う場合のみです。

使用方法

Important

デフォルトではタイポグラフィ スタイルを適用しません。アプリケーションでタイポグラフィを使用するには、最上位要素に ig-typography CSS クラスを設定し、ベース .scss ファイルに typography ミックスインを含める必要があります。

Titillium Web を Ignite UI for Angular のマテリアル テーマのデフォルトフォントとして選択しました。使用にはフォントをホストするか Google フォントからのフォントを含む必要があります。

<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet"/>

カテゴリ スタイルをタイプ スケールに (またはタイプス ケールをカテゴリ スタイルへ) 設定または取得するための複数のミックスインと関数があります。以下はミックスインと関数です。

• type-style [関数] - タイプ スケール カテゴリで使用されるスタイル ルールのセットを返します。
• type-scale [関数] - 13 スタイルカテゴリのセットを返します。
• type-scale-category [関数] - タイプ スケールとカテゴリのスタイル ルールのマップを返します。
• type-style [ミックスイン] - スタイル ルールを特定のタイプ スケールとカテゴリからセレクターへ追加します。
• type-style-vars [ミックスイン] - セレクターに特定のタイプ スタイルからスタイル ルールを追加します。
• typography [ミックスイン] - グローバル アプリケーション タイポグラフィ スタイルを定義します。

次に上記の各ミックスインと関数の機能について説明します。

タイプ スタイル

type-style 関数はインターフェイスのような関数で特定の引数をスケール カテゴリのスタイル セットの一部として渡します。たとえば、h1 スケール カテゴリに新しいスタイル ルールのセットを定義する場合などです。以下はコード例です。

$h1-style: type-style(
  $font-size: rem(112px),
  $font-weight: 600,
  $line-height: rem(96px),
  ...,
);

タイプ スケール

タイプ スケールは、スケール カテゴリとして使用される 13 のタイポグラフィ スタイルのマップを生成します。新しいタイプ スケールを生成するには、次の手順を実行します。

$my-type-scale: type-scale(...);

Important

13 のスケール カテゴリごとにタイプ スタイルを指定する必要があります。上記のように、type-style 関数を使用してスタイルを生成できます。

$my-type-scale: type-scale(
  $h1: $h1-style,
  [$h2...$overline],
);

既存のタイプ スケールを拡張して変更できます。$material-type-scale の h1 タイプ スタイルを変更するには、次のようにします。

$my-type-scale: extend(
  $material-type-scale,
  (
    h1: type-style(...),
  )
);

タイプ スタイルをスケールに追加するのも同様に簡単です。

$my-type-category: type-style(
  $font-weight: 600,
  $font-size: rem(42px),
  $text-transform: uppercase,
  ...,
);

$my-type-scale: extend(
  $my-type-scale,
  (
    "my-category": $my-type-category,
  )
);

タイポグラフィ ミックスイン

タイポグラフィミックスインは、ネイティブ h1-h6 と p 要素の外観を含むアプリケーションのグローバル タイポグラフィ スタイルを定義します。

現在 2 引数を受け付けます。

• $font-family - グローバル フォント ファミリがアプリケーションで使用されます。
• $type-scale - デフォルト タイプ スケールがアプリケーションで使用されます。

タイポグラフィ スタイルを使用するには、core ミックスインの後 typography ミックスインを含めます。上記で定義したタイプ スケール $my-type-scale の利点を活用するためにデフォルト タイプ スケールにしました。

@include typography(
  $font-family: $material-typeface,
  $type-scale: $my-type-scale
);

type-scale と同様のタイプ フェイスの 4 つの変数を公開します - $material-typeface、$fluent-typeface、$bootstrap-typeface、および $indigo-typeface です。typography ミックスインを含む場合、タイプ スケールと組み合わせて使用できます。

カスタム タイプ スタイル設定

type-style ミックスインは、特定のタイプ スケールからスケール カテゴリのスタイル ルールを取得するために使用できます。更にその他のスタイル ルールも追加できます。

.my-fancy-h1 {
  @include type-style('h1') {
    color: royalblue;
  }
}

上記のコードは、royalblue カラーに設定した color プロパティと $my-type-scale の h1 スケール カテゴリのすべてのスタイル ルールを含むクラス スタイル セクター .my-fancy-h1 を生成します。任意の要素のクラスを .my-fancy-h1 に設定した場合、その他の h1 要素と同様の外観ですが色は royalblue になります。

コンポーネント タイポグラフィ

Ignite UI for Angular のほとんどのコンポーネントは、テキストのスタイル設定にスケール カテゴリを使用します。たとえば、igx-card 紺ポーン干支は以下のスケール カテゴリを使用します。

• h6 - カード タイトルのスタイル設定に使用します。
• subtitle-2 - カードのサブタイトルと小タイトルのスタイル設定に使用します。
• body-2 - カード テキスト コンテンツのスタイル設定に使用します。

カードのテキスト スタイルの変更には 2 つの方法があります。タイポグラフィ ミックスインへ渡すマテリアル タイプ スケールの h6、subtitle-2、body-2 をすべてまたはそのいずれかを変更し、カードのタイトルを小さくしたい場合、h6 スケール カテゴリの font-size を変更します。

// Create a custom h6 scale category style
$my-h6: type-style(
  $font-size: rem(12px),
);

// Create a custom type scale with the modified h6
$my-type-scale: extend(
  $material-type-scale,
  (
    h6: $my-h6,
  )
);

// Pass the custom scale to the global typography mixin
@include typography($type-scale: $my-type-scale);

Warning

上記コードは h6 スケール カテゴリをグローバルに変更するため、h6 を使用するすべてのコンポーネントのルックアンドフィールに影響します。すべての h6 要素の外観が同じになるため、アプリ全体が統一した外観になります。h6 の変更を特定のコンポーネント (igx-card コンポーネントなど) にのみ適用する場合があります。すべてのコンポーネントにタイポグラフィ ミックスインがあり、カテゴリ構成を受け入れます。

// Create a custom h6 scale category style
$my-h6: type-style(
  $font-size: rem(12px),
);

// You can specify which categories from the type sale the card uses
$card-categories: (
  title: 'h6',
  title-small: 'subtitle-1',
  subtitle: 'subtitle-2',
  content: 'body-2',
);

.my-cool-card {
  // Overwrite the 'h6' type style for this scope
  @include type-style-vars('h6', $my-h6);

  // Pass the custom card catergories to the card typography mixin
  @include card-typography($card-categories);
}

$my-type-scale スケールに h6 カテゴリの変更を渡した場合に typography ミックスインは含まれなくなります。あとは、作成したカスタム h6 スタイルを type-style-vars ミックスインに渡すだけです。

card-typography ミックスインを使用すると、カード コンポーネント内のすべての要素のタイポグラフィ スタイルを更新できます。上記の例では、$card-categories マップの title-small キーに subtitle-1 タイプ スタイルが割り当てられています。この変更により、カード内の小さなタイトルがわずかに大きくなります。デフォルトでは、カード コンポーネントは小さいタイトルに subtitle-2 タイプのスタイルを使用します。これは、subtitle-1 よりも小さいフォント サイズです。ミックスインを使用すると、このデフォルトをオーバーライドして新しいスタイルを適用できます。

単位の変換

プロパティの単位を変換するための 3 つのタイポグラフィ関数も用意されています。これらの関数を使用すると、px 単位を em または rem に変換したり、em または rem 単位を px に変換したりできます。 必要なのは、3 つの関数のいずれかを呼び出して、変換する値を渡すことだけです。

'px' に変換

.my-component {
  margin: px(3.23rem);
}

'rem' に変換

.my-component {
  margin: rem(10px) rem(5px);
}

'em' に変換

.my-component {
  margin: em(10px) em(5px);
}

値を変換する場合、変換はデフォルトの基本フォント サイズ 16px (16px = 1em/rem) に基づいて行われることに注意してください。必要に応じて、変換関数の引数としてカスタムの基本フォント サイズを指定できます。これにより、結果の値が指定された基本フォント サイズを基準にして計算されるようになります。

.my-component {
  margin: rem(10px, 26px);
  // The result will be 0.385rem
}

これにより、26px のフォント サイズに基づいて、10px の値が rem に変換されます。

CSS クラス

タイプ スケール カテゴリに基づいてすべてのコンポーネントにテキスト スタイルの追加する他、デフォルトの h1-h6 と p 要素のスタイルも設定します。これにより、スタイル設定からセマンティクスを分離できます。たとえば、typography の使用時に h1 タグにデフォルトのスタイル設定がある場合も ig-typography__h3 クラスを使用して h3 に変更できます。

<h1 class="ig-typography__h3">Some text</h1>

以下は、デフォルトで提供される全 CSS クラス一覧です。

• ig-typography__h1
• ig-typography__h2
• ig-typography__h3
• ig-typography__h4
• ig-typography__h5
• ig-typography__h6
• ig-typography__subtitle-1
• ig-typography__subtitle-2
• ig-typography__body-1
• ig-typography__body-2
• ig-typography__button
• ig-typography__caption
• ig-typography__overline

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)