ページタイトル

ページタイトルのコンポーネントにはsu-titleのクラス名を付与します。

h1要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。文字サイズやウエイト、行高が調整され、前後に続く要素間に1文字分の余白が入ります。

下層ページなど、特定のコンテンツをまとめたページにおいて、ページ先頭にそのページのタイトルとして表示するテキストです。文字サイズは大きく表示され、ページの内容をわかりやすく伝えます。

<h1 class="su-title">ページタイトルテキスト</h1>

サブタイトルを含む場合にはhgroup要素を用いてマークアップします。その場合には、前後に続く要素間の余白は削除されますので、適宜ユーティリティクラスを用いてスタイリングすることが可能です。

<hgroup>
  <h1 class="su-title">ページタイトル</h1>
  <p class="su-mgt-s su-text-l su-text-500">ページサブタイトル</p>
</hgroup>

セクション見出し

ページタイトルのコンポーネントにはsu-heading-*のクラス名を付与します。後述の通り、見出しレベルに合わせてクラス名が異なり、用途に合わせて使い分けます。

文脈に応じてh1〜h6要素を用いてマークアップします。所定のクラス名を付与することでスタイルが適用されます。文字サイズやウエイト、行高が調整され、前後に続く要素間に1文字分の余白が入ります。

本文セクションの見出しテキストとして表示します。重要度によって1〜6の段階があり、段階によって文字サイズなどのスタイルが変化します。

<h1 class="su-heading-1">セクション見出し 1</h1>
<h2 class="su-heading-2">セクション見出し 2</h2>
<h3 class="su-heading-3">セクション見出し 3</h3>
<h4 class="su-heading-4">セクション見出し 4</h4>
<h5 class="su-heading-5">セクション見出し 5</h5>
<h6 class="su-heading-6">セクション見出し 6</h6>

アクセシビリティの支援

見出しのコンポーネントではアクセシビリティの対応として、aria-labelledby属性が設定されたsection要素でマークアップを行い、見出し要素に対して紐づくid属性を付与することで、セクションの見出しと内容を関連付けることができ、ページ内のアンカーリンクとしてもアクセスできるようになります。

<section aria-labelledby="section-1">
  <h2 class="su-heading-2" id="section-1">セクション大見出し</h2>
  <p>このセクションの内容...</p>
  <h3 class="su-heading-3">セクション小見出し</h3>
  <p>このセクションの内容...</p>
</section>

...

<section aria-labelledby="section-2">
  <h2 class="su-heading-2" id="section-2">セクション大見出し</h2>
  <p>このセクションの内容...</p>
  <h3 class="su-heading-3">セクション小見出し</h3>
  <p>このセクションの内容...</p>
</section>