見出し／Heading

見出しを表示するためのコンポーネントです。
併せて利用できる「ショルダー（見出しの上に表示）」「リード文（見出しの下に表示）」も用意しています。
h1は使用状況によって複数のスタイルを用意しています。


<div class="c-heading c-heading--h1Normal">
  <div class="c-heading__inner">
    <h1 class="c-heading__label">見出しテキスト 「自然界はどのようにしてできているのだろう?」</h1>
    <p class="c-heading__shoulder">ショルダー</p>
    <p class="c-heading__lead">リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です</p>
  </div>
</div>

原則

見出しコンポーネントには「見出し」「ショルダー」「リード文」の3つの要素が含まれています。「ショルダー」「リード文」は任意で利用することが可能です。他の要素の追加はできません。
見出し（h1〜h6）」のfont-weight（太さ）は、標準設定から変更して利用できません。

パターン

見出しレベル

デザイン上のサイズはh1~h5までの5種類があります。内包するテキスト要素のスタイルは以下の通りです。h5とh6は意図的に差異を持たせていません。

h1


<div class="c-heading c-heading--h1Normal">
  <div class="c-heading__inner">
    <h1 class="c-heading__label">見出しテキスト 「自然界はどのようにしてできているのだろう?」</h1>
    <p class="c-heading__shoulder">ショルダー</p>
    <p class="c-heading__lead">リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です</p>
  </div>
</div>

h2

<div class="c-heading c-heading--h2">
  <div class="c-heading__inner">
    <h2 class="c-heading__label">見出しテキスト 「自然界はどのようにしてできているのだろう?」</h2>
    <p class="c-heading__shoulder">ショルダー</p>
    <p class="c-heading__lead">リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です</p>
  </div>
</div>

h3

<div class="c-heading c-heading--h3">
  <div class="c-heading__inner">
    <h3 class="c-heading__label">見出しテキスト 「自然界はどのようにしてできているのだろう?」</h3>
    <p class="c-heading__shoulder">ショルダー</p>
    <p class="c-heading__lead">リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です</p>
  </div>
</div>

h4

<div class="c-heading c-heading--h4">
  <div class="c-heading__inner">
    <h4 class="c-heading__label">見出しテキスト 「自然界はどのようにしてできているのだろう?」</h4>
    <p class="c-heading__shoulder">ショルダー</p>
    <p class="c-heading__lead">リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です</p>
  </div>
</div>

h5

<div class="c-heading c-heading--h5">
  <div class="c-heading__inner">
    <h5 class="c-heading__label">見出しテキスト 「自然界はどのようにしてできているのだろう?」</h5>
    <p class="c-heading__shoulder">ショルダー</p>
    <p class="c-heading__lead">リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です</p>
  </div>
</div>

h6

<div class="c-heading c-heading--h6">
  <div class="c-heading__inner">
    <h6 class="c-heading__label">見出しテキスト 「自然界はどのようにしてできているのだろう?」</h6>
    <p class="c-heading__shoulder">ショルダー</p>
    <p class="c-heading__lead">リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です</p>
  </div>
</div>

ページヘッダー

必ずヘッダー直下に配置して使用します。キービジュアルが使用できない場合に使用します。


<div class="c-heading c-heading--h1">
  <div class="c-heading__inner">
    <h1 class="c-heading__label">見出しテキスト 「自然界はどのようにしてできているのだろう?」</h1>
    <p class="c-heading__shoulder">ショルダー</p>
    <p class="c-heading__lead">リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です</p>
  </div>
</div>

記事用ページヘッダー

必ずヘッダー直下に配置して使用します。投稿日・更新日を入れるなど、記事で使用します。


<div class="c-mediaHeading">
  <div class="c-heading c-heading--h1 c-mediaHeading__title">
    <div class="c-heading__inner">
      <h1 class="c-heading__label">ページタイトル「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。法則や論理を探究するのが理学です</h1>
      <p class="c-heading__shoulder">ショルダー 「シリーズ名が入ります。vol.〇〇と入ります。」</p>
    </div>
  </div>
  <div class="c-mediaHeading__meta">
    <p class="c-paragraph c-mediaHeading_publishDate">2024年12月31日 公開</p>
    <p class="c-paragraph c-mediaHeading_updateDate">2025年01月01日 更新</p>
  </div>
  <div class="c-mediaHeading__copy">
    <p class="c-paragraph c-paragraph--weightBold c-mediaHeading__copyText">リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です</p>
  </div>
  <div class="c-labelGroup c-mediaHeading__labels">
    <a href="/" class="c-label">
      <span class="c-label__text">メディア種別</span>
    </a>
    <a href="/" class="c-label"><span class="c-label__text">タグ分類</span></a>
    <a href="/" class="c-label"><span class="c-label__text">タグ分類</span></a>
  </div>
</div>