見出し

セマンティックな見出し要素。

ソースコードを見る問題を報告する

速い茶色のキツネは怠惰な犬を飛び越える

<Heading>The quick brown fox jumps over the lazy dog</Heading>

APIリファレンス

このコンポーネントはh1要素に基づいており、一般的なmarginプロパティをサポートしています。

プロパティ	型	デフォルト値
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h1"`
`asChild`	`boolean`	デフォルト値なし
`size`	`Responsive<enum>`	`"6"`
`weight`	`Responsive<"light" \| "regular" \| "medium" \| "bold">`	デフォルト値なし
`align`	`Responsive<"left" \| "center" \| "right">`	デフォルト値なし
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both">`	デフォルト値なし
`truncate`	`boolean`	デフォルト値なし
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	デフォルト値なし
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし

例

別の要素として

asプロパティを使用して見出しレベルを変更します。このプロパティは純粋にセマンティックなものであり、視覚的な外観は変更しません。

レベル1

レベル2

レベル3

<Heading as="h1">Level 1</Heading>
<Heading as="h2">Level 2</Heading>
<Heading as="h3">Level 3</Heading>

サイズ

sizeプロパティを使用して見出しのサイズを制御します。このプロパティは、正しい行高さおよび補正文字間隔も提供します。テキストサイズが大きくなると、相対的な行高さおよび文字間隔は小さくなります。

見出しサイズはテキストサイズと一致します。ただし、見出しは本文よりも短い傾向があるため、行高はやや狭く設定されています。

速い茶色のキツネは怠惰な犬を飛び越える

<Flex direction="column" gap="3">
  <Heading size="1">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="2">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="3">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="4">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="5">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="6">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="7">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="8">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="9">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

ウェイト

weightプロパティを使用してテキストのウェイトを設定します。

速い茶色のキツネは怠惰な犬を飛び越える。

<Heading weight="regular">
  The quick brown fox jumps over the lazy dog.
</Heading>

<Heading weight="medium">
  The quick brown fox jumps over the lazy dog.
</Heading>

<Heading weight="bold">
  The quick brown fox jumps over the lazy dog.
</Heading>

位置合わせ

alignプロパティを使用してテキストの位置合わせを設定します。

左揃え

中央揃え

右揃え

<Heading align="left">Left-aligned</Heading>
<Heading align="center">Center-aligned</Heading>
<Heading align="right">Right-aligned</Heading>

トリム

trimプロパティを使用して、テキストボックスの先頭、末尾、または両側の先行スペースをトリムします。

このプロパティは、今後のハーフリーディング制御仕様と同様に機能しますが、クロスブラウザサポートのために一般的な負のマージン回避策を内部で使用しています。

トリムなし

トリムあり

<Flex direction="column" gap="3">
  <Heading
    trim="normal"
    style={{
      background: 'var(--gray-a2)',
      borderTop: '1px dashed var(--gray-a7)',
      borderBottom: '1px dashed var(--gray-a7)',
    }}
  >
    Without trim
  </Heading>
  <Heading
    trim="both"
    style={{
      background: 'var(--gray-a2)',
      borderTop: '1px dashed var(--gray-a7)',
      borderBottom: '1px dashed var(--gray-a7)',
    }}
  >
    With trim
  </Heading>
</Flex>

先行スペースのトリミングは、カードやその他の「ボックス状」コンポーネントの垂直方向の間隔を調整する際に役立ちます。そうでないと、パディングは左右よりも上下で大きく見えます。

トリムなし

タイポグラフィの目標は、フォントサイズ、行高さ、行幅を比例的に関連付けることで、美しさを最大限に高め、読みやすく、快適にすることです。

トリムあり

<Flex direction="column" gap="3">
  <Box
    style={{
      background: 'var(--gray-a2)',
      border: '1px dashed var(--gray-a7)',
    }}
    p="4"
  >
    <Heading mb="1" size="3">
      Without trim
    </Heading>
    <Text>
      The goal of typography is to relate font size, line height, and line width
      in a proportional way that maximizes beauty and makes reading easier and
      more pleasant.
    </Text>
  </Box>

  <Box
    p="4"
    style={{
      background: 'var(--gray-a2)',
      border: '1px dashed var(--gray-a7)',
    }}
  >
    <Heading mb="1" size="3" trim="start">
      With trim
    </Heading>
    <Text trim="end">
      The goal of typography is to relate font size, line height, and line width
      in a proportional way that maximizes beauty and makes reading easier and
      more pleasant.
    </Text>
  </Box>
</Flex>

デフォルトのトリム値は、Radix Themesで使用されているシステムフォントスタックに合わせて構成されています。カスタムフォントを使用している場合は、対応するCSS変数を使用してトリム値を調整できます。

.radix-themes {
  --default-leading-trim-start: 0.42em;
  --default-leading-trim-end: 0.36em;
  --heading-leading-trim-start: 0.42em;
  --heading-leading-trim-end: 0.36em;
}

切り詰め

truncateプロパティを使用して、テキストがコンテナからはみ出した場合に省略記号で切り詰めます。

速い茶色のキツネは怠惰な犬を飛び越える

<Flex maxWidth="300px">
  <Heading truncate>The quick brown fox jumps over the lazy dog</Heading>
</Flex>

折り返し

wrapプロパティを使用してテキストの折り返しを制御します。

速い茶色のキツネは怠惰な犬を飛び越える

<Flex maxWidth="300px">
  <Heading wrap="nowrap">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

速い茶色のキツネは怠惰な犬を飛び越える

<Flex maxWidth="300px">
  <Heading wrap="balance">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

速い茶色のキツネは怠惰な犬を飛び越える

<Flex maxWidth="300px">
  <Heading wrap="pretty">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

text-wrap: prettyは実験的な値であり、まだすべてのブラウザでサポートされているわけではありません。ただし、これをサポートするブラウザのプログレッシブエンハンスメントとして扱うことができます。

色

colorプロパティを使用して、特定の色を割り当てます。テキストの色は、一般的な背景色に対して少なくともLc 60 APCAのコントラストを実現するように設計されています。

速い茶色のキツネは怠惰な犬を飛び越える

<Flex direction="column">
  <Heading color="indigo">The quick brown fox jumps over the lazy dog</Heading>
  <Heading color="cyan">The quick brown fox jumps over the lazy dog</Heading>
  <Heading color="orange">The quick brown fox jumps over the lazy dog</Heading>
  <Heading color="crimson">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

高コントラスト

highContrastプロパティを使用して、背景との色のコントラストを上げます。

速い茶色のキツネは怠惰な犬を飛び越える。

<Flex direction="column">
  <Heading color="gray">The quick brown fox jumps over the lazy dog.</Heading>
  <Heading color="gray" highContrast>
    The quick brown fox jumps over the lazy dog.
  </Heading>
</Flex>

前へテキスト

次へブロッククォート

GitHubでこのページを編集します。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

見出し

速い茶色のキツネは怠惰な犬を飛び越える

レベル1

レベル2

レベル3

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える。

速い茶色のキツネは怠惰な犬を飛び越える。

速い茶色のキツネは怠惰な犬を飛び越える。

左揃え

中央揃え

右揃え

トリムなし

トリムあり

トリムなし

トリムあり

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える

速い茶色のキツネは怠惰な犬を飛び越える。

速い茶色のキツネは怠惰な犬を飛び越える。