2種類の見出しがあります
-
タイトル -
サブタイトル
スポンサー
タイトルとサブタイトル
ページに深みを与えるためのシンプルな見出し
タイトル
サブタイトル
<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>サイズ #
6つのサイズがあります
タイトル1
タイトル2
タイトル3（デフォルトサイズ）
タイトル4
タイトル5
タイトル6
<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>サブタイトル1
サブタイトル2
サブタイトル3
サブタイトル4
サブタイトル5（デフォルトサイズ）
サブタイトル6
<h1 class="subtitle is-1">Subtitle 1</h1>
<h2 class="subtitle is-2">Subtitle 2</h2>
<h3 class="subtitle is-3">Subtitle 3</h3>
<h4 class="subtitle is-4">Subtitle 4</h4>
<h5 class="subtitle is-5">Subtitle 5</h5>
<h6 class="subtitle is-6">Subtitle 6</h6>タイトルとサブタイトルを組み合わせると、近づきます。
経験則として、2のサイズ差を使用することをお勧めします。そのため、title is-1を使用する場合は、subtitle is-3と組み合わせます。
タイトル1
サブタイトル3
タイトル2
サブタイトル4
タイトル3
サブタイトル5
<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="title is-2">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>最初の要素にis-spaced修飾子を使用すると、タイトルとサブタイトル間の通常のスペースを維持できます。
タイトル1
サブタイトル3
タイトル2
サブタイトル4
タイトル3
サブタイトル5
<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="title is-2 is-spaced">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="title is-3 is-spaced">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>SassとCSS変数 #
|
Sass変数
|
CSS変数
|
値
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|