見出しスタイル (bar)一旦開発完了

見出しスタイル H1相当

見出しスタイル H1相当

見出しスタイル H1相当

見出しスタイル H2相当

見出しスタイル H3相当

見出しスタイル H4相当

見出しスタイル H5相当

見出しスタイル H6相当

※全て<h4>に適用。

クラス名

el_lv1Heading

マークアップ例

<h1 class="el_lv1Heading">見出し(レベル1相当) el_lv1Heading</h1>
<h2 class="el_lv2Heading">見出し(レベル2相当) el_lv2Heading</h2>
<h3 class="el_lv3Heading">見出し(レベル3相当) el_lv3Heading</h3>
<h4 class="el_lv4Heading">見出し(レベル4相当) el_lv4Heading</h4>
<h5 class="el_lv5Heading">見出し(レベル5相当) el_lv5Heading</h5>
<h6 class="el_lv6Heading">見出し(レベル6相当) el_lv6Heading</h6>

定義

機能
文章の見出しを提供(レベル4相当)

あしらい・振る舞い
スマホ時は18px相当(ウインドウ幅の5.6%)徐々に大きくなって最大は20px相当
上部余白は2em、最初の子要素のときは0.75em
H3の直後にあるときは上部のマージンを0に

ファイルパス

assets/scss/element/heading-bar

Change Log

  1. 開発開始:2021-07-10
  2. 最終更新:2022-10-27