お問い合わせはこちら

092-123-4567

営業時間 10:00 ~ 23:00 (年中無休)

コードサンプル
- 見出し -

装飾なし見出し

見出し中央寄せ

Example code
<h3 class="headline">見出し中央寄せ</h3>

見出し左寄せ

Example code
<h3 class="headline aLeft">見出し左寄せ</h3>

見出し右寄せ

Example code
<h3 class="headline aRight">見出し右寄せ</h3>

下部ボーダー付き見出し

見出し中央寄せ

Example code
<h3 class="headline headline__underline">見出し中央寄せ</h3>

見出し左寄せ

Example code
<h3 class="headline headline__underline--left">見出し左寄せ</h3>

見出し右寄せ

Example code
<h3 class="headline headline__underline--right">見出し右寄せ</h3>

フォントサイズ

見出しサイズ XS

Example code
<h3 class="headline headline__fs--xs">見出しサイズ XS</h3>

見出しサイズ S

Example code
<h3 class="headline headline__fs--s">見出しサイズ S</h3>

見出しサイズ M

Example code
<h3 class="headline headline__fs--m">見出しサイズ M</h3>

見出しサイズ L

Example code
<h3 class="headline headline__fs--l">見出しサイズ L</h3>

見出しサイズ XL

Example code
<h3 class="headline headline__fs--xl">見出しサイズ XL</h3>

枠線付き見出し

見出し中央寄せ

Example code
<h3 class="headline headline__border">見出し中央寄せ</h3>

枠線色変更

Example code
<h3 class="headline headline__border borderColor-red-600">枠線色変更</h3>

枠線色文字色変更+左寄せ

Example code
<h3 class="headline headline__border borderColor-blue-600 color-blue-600 aLeft">枠線色文字色変更</h3>

枠線色文字色背景色フォントサイズ変更

Example code
<h3 class="headline headline__border borderColor-blue-600 color-blue-600 headline__fs--xs">枠線色文字色背景色フォントサイズ変更</h3>

※使用したい色のクラス名は、コードサンプルの「カラー」ページからご確認ください。

両サイドボーダー付き見出し

見出し中央寄せ

Example code
<h3 class="headline headline__sideBorder">
 <span class="headline headline__sideBorder--line"></span>
  <span class="headline headline__sideBorder--text">見出し中央寄せ</span>
 <span class="headline headline__sideBorder--line"></span>
</h3>

ボーダー色変更

Example code
<h3 class="headline headline__sideBorder">
 <span class="headline headline__sideBorder--line bgColor-blue-700"></span>
  <span class="headline headline__sideBorder--text color-blue-700">見出し中央寄せ</span>
 <span class="headline headline__sideBorder--line bgColor-blue-700"></span>
</h3>

※使用したい色のクラス名は、コードサンプルの「カラー」ページからご確認ください。

サブ見出し付き

メイン見出しサブ見出し

Example code
<h3 class="headline">
 メイン見出し
 <span class="headline__sub">サブ見出し</span>
</h3>

見出し中央寄せサブ見出し

Example code
<h3 class="headline headline__underline">
 見出し中央寄せ
 <span class="headline__sub">サブ見出し</span>
</h3>

ボーダー色変更サブ見出し

Example code
<h3 class="headline headline__sideBorder">
 <span class="headline headline__sideBorder--line"></span>
  <span class="headline headline__sideBorder--text">ボーダー色変更<span class="headline__sub">サブ見出し</span></span>
 <span class="headline headline__sideBorder--line"></span>
</h3>

枠線色文字色変更サブ見出し

Example code
<h3 class="headline headline__border borderColor-blue-600 color-blue-600">
 枠線色文字色変更
 <span class="headline__sub color-blue-600">サブ見出し</span>
</h3>

見出しサイズ XSサブ見出し

Example code
<h3 class="headline headline__fs--xs">
 見出しサイズ XS
 <span class="headline__sub">サブ見出し</span>
</h3>