module-title

m-title

hx要素、もしくはp要素を見出しへの利用を前提にリセットする。

  • フォントファミリーが first になる。詳細はフォントファミリーを参照。
  • font-size, color は要素本来のサイズを引き継ぐ
  • margin は0となる
  • line-height は標準よりも少なく(1.25)なる
<h1 class="m-title">これはh1要素です</h1>
<h1 class="m-title"><a href="#">リンクを付与したh1要素です</a></h1>
<h2 class="m-title">これはh2要素です</h2>
<h2 class="m-title"><a href="#">リンクを付与したh2要素です</a></h2>
<h3 class="m-title">これはh3要素です</h3>
<h3 class="m-title"><a href="#">リンクを付与したh3要素です</a></h3>
<h4 class="m-title">これはh4要素です</h4>
<h4 class="m-title"><a href="#">リンクを付与したh4要素です</a></h4>
<h5 class="m-title">これはh5要素です</h5>
<h5 class="m-title"><a href="#">リンクを付与したh5要素です</a></h5>
<h6 class="m-title">これはh6要素です</h6>
<h6 class="m-title"><a href="#">リンクを付与したh6要素です</a></h6>
<p class="m-title">これはp要素です</p>
<p class="m-title"><a href="#">リンクを付与したp要素です</a></p>

m-title-level-(level)

見出しレベルを変更する。ブレークポイントが lg 以上で拡大率(ジャンプ率)が増える。
(level)は1-6の6段階となる。あくまで外観のレベルであり、hx要素のレベルとは直結していないことに注意。

これはh1要素で見た目がレベル2です

これはh1要素で見た目がレベル2です

これはh1要素で見た目がレベル3です

これはh1要素で見た目がレベル4です

これはh1要素で見た目がレベル5です

これはh1要素で見た目がレベル6です

これはh2要素で見た目がレベル1です

これはh2要素で見た目がレベル2です

これはh2要素で見た目がレベル3です

これはh2要素で見た目がレベル4です

これはh2要素で見た目がレベル5です

これはh2要素で見た目がレベル6です

これはh3要素で見た目がレベル1です

これはh3要素で見た目がレベル2です

これはh3要素で見た目がレベル3です

これはh3要素で見た目がレベル4です

これはh3要素で見た目がレベル5です

これはh3要素で見た目がレベル6です

これはh4要素で見た目がレベル1です

これはh4要素で見た目がレベル2です

これはh4要素で見た目がレベル3です

これはh4要素で見た目がレベル5です

これはh4要素で見た目がレベル6です

これはh5要素で見た目がレベル1です
これはh5要素で見た目がレベル2です
これはh5要素で見た目がレベル3です
これはh5要素で見た目がレベル4です
これはh5要素で見た目がレベル5です
これはh5要素で見た目がレベル6です
これはh6要素で見た目がレベル1です
これはh6要素で見た目がレベル2です
これはh6要素で見た目がレベル3です
これはh6要素で見た目がレベル4です
これはh6要素で見た目がレベル5です
これはh6要素で見た目がレベル6です

これはp要素で見た目がレベル1です

これはp要素で見た目がレベル2です

これはp要素で見た目がレベル3です

これはp要素で見た目がレベル4です

これはp要素で見た目がレベル5です

これはp要素で見た目がレベル6です

<h1 class="m-title m-title-level-1">これはh1要素で見た目がレベル2です</h1>
<h1 class="m-title m-title-level-2">これはh1要素で見た目がレベル2です</h1>
<h1 class="m-title m-title-level-3">これはh1要素で見た目がレベル3です</h1>
<h1 class="m-title m-title-level-4">これはh1要素で見た目がレベル4です</h1>
<h1 class="m-title m-title-level-5">これはh1要素で見た目がレベル5です</h1>
<h1 class="m-title m-title-level-6">これはh1要素で見た目がレベル6です</h1>
<h2 class="m-title m-title-level-1">これはh2要素で見た目がレベル1です</h2>
<h2 class="m-title m-title-level-2">これはh2要素で見た目がレベル2です</h2>
<h2 class="m-title m-title-level-3">これはh2要素で見た目がレベル3です</h2>
<h2 class="m-title m-title-level-4">これはh2要素で見た目がレベル4です</h2>
<h2 class="m-title m-title-level-5">これはh2要素で見た目がレベル5です</h2>
<h2 class="m-title m-title-level-6">これはh2要素で見た目がレベル6です</h2>
<h3 class="m-title m-title-level-1">これはh3要素で見た目がレベル1です</h3>
<h3 class="m-title m-title-level-2">これはh3要素で見た目がレベル2です</h3>
<h3 class="m-title m-title-level-3">これはh3要素で見た目がレベル3です</h3>
<h3 class="m-title m-title-level-4">これはh3要素で見た目がレベル4です</h3>
<h3 class="m-title m-title-level-5">これはh3要素で見た目がレベル5です</h3>
<h3 class="m-title m-title-level-6">これはh3要素で見た目がレベル6です</h3>
<h4 class="m-title m-title-level-1">これはh4要素で見た目がレベル1です</h4>
<h4 class="m-title m-title-level-2">これはh4要素で見た目がレベル2です</h4>
<h4 class="m-title m-title-level-3">これはh4要素で見た目がレベル3です</h4>
<h4 class="m-title m-title-level-5">これはh4要素で見た目がレベル5です</h4>
<h4 class="m-title m-title-level-6">これはh4要素で見た目がレベル6です</h4>
<h5 class="m-title m-title-level-1">これはh5要素で見た目がレベル1です</h5>
<h5 class="m-title m-title-level-2">これはh5要素で見た目がレベル2です</h5>
<h5 class="m-title m-title-level-3">これはh5要素で見た目がレベル3です</h5>
<h5 class="m-title m-title-level-4">これはh5要素で見た目がレベル4です</h5>
<h5 class="m-title m-title-level-5">これはh5要素で見た目がレベル5です</h5>
<h5 class="m-title m-title-level-6">これはh5要素で見た目がレベル6です</h5>
<h6 class="m-title m-title-level-1">これはh6要素で見た目がレベル1です</h6>
<h6 class="m-title m-title-level-2">これはh6要素で見た目がレベル2です</h6>
<h6 class="m-title m-title-level-3">これはh6要素で見た目がレベル3です</h6>
<h6 class="m-title m-title-level-4">これはh6要素で見た目がレベル4です</h6>
<h6 class="m-title m-title-level-5">これはh6要素で見た目がレベル5です</h6>
<h6 class="m-title m-title-level-6">これはh6要素で見た目がレベル6です</h6>
<p class="m-title m-title-level-1">これはp要素で見た目がレベル1です</p>
<p class="m-title m-title-level-2">これはp要素で見た目がレベル2です</p>
<p class="m-title m-title-level-3">これはp要素で見た目がレベル3です</p>
<p class="m-title m-title-level-4">これはp要素で見た目がレベル4です</p>
<p class="m-title m-title-level-5">これはp要素で見た目がレベル5です</p>
<p class="m-title m-title-level-6">これはp要素で見た目がレベル6です</p>

m-title-style-(style)

見出しの外観を変更する。(style)はa-fの6種類となるが、破綻しない程度に追加しても構わない。
線の太さやビュレットの大きさは(level)の影響を受け変化する。
一部の外観はリンクを付与すると下線によって見栄えに問題が生じるが、下線を消すとWCAG 2.1の達成基準を満たせなくなることに注意。

見出しレベル1スタイルaです

見出しレベル2スタイルaです

見出しレベル3スタイルaです

見出しレベル4スタイルaです

見出しレベル5スタイルaです

見出しレベル6スタイルaです

見出しレベル1スタイルbです

見出しレベル2スタイルbです

見出しレベル3スタイルbです

見出しレベル4スタイルbです

見出しレベル5スタイルbです

見出しレベル6スタイルbです

見出しレベル1スタイルcです

見出しレベル2スタイルcです

見出しレベル3スタイルcです

見出しレベル4スタイルcです

見出しレベル5スタイルcです

見出しレベル6スタイルcです

見出しレベル1スタイルdです

見出しレベル2スタイルdです

見出しレベル3スタイルdです

見出しレベル4スタイルdです

見出しレベル5スタイルdです

見出しレベル6スタイルdです

見出しレベル1スタイルeです

見出しレベル2スタイルeです

見出しレベル3スタイルeです

見出しレベル4スタイルeです

見出しレベル5スタイルeです

見出しレベル6スタイルeです

見出しレベル1スタイルfです

見出しレベル2スタイルfです

見出しレベル3スタイルfです

見出しレベル4スタイルfです

見出しレベル5スタイルfです

見出しレベル6スタイルfです

<p class="m-title m-title-level-1 m-title-style-a">見出しレベル1スタイルaです</p>
<p class="m-title m-title-level-2 m-title-style-a">見出しレベル2スタイルaです</p>
<p class="m-title m-title-level-3 m-title-style-a">見出しレベル3スタイルaです</p>
<p class="m-title m-title-level-4 m-title-style-a">見出しレベル4スタイルaです</p>
<p class="m-title m-title-level-5 m-title-style-a">見出しレベル5スタイルaです</p>
<p class="m-title m-title-level-6 m-title-style-a">見出しレベル6スタイルaです</p>
<p class="m-title m-title-level-1 m-title-style-b">見出しレベル1スタイルbです</p>
<p class="m-title m-title-level-2 m-title-style-b">見出しレベル2スタイルbです</p>
<p class="m-title m-title-level-3 m-title-style-b">見出しレベル3スタイルbです</p>
<p class="m-title m-title-level-4 m-title-style-b">見出しレベル4スタイルbです</p>
<p class="m-title m-title-level-5 m-title-style-b">見出しレベル5スタイルbです</p>
<p class="m-title m-title-level-6 m-title-style-b">見出しレベル6スタイルbです</p>
<p class="m-title m-title-level-1 m-title-style-c">見出しレベル1スタイルcです</p>
<p class="m-title m-title-level-2 m-title-style-c">見出しレベル2スタイルcです</p>
<p class="m-title m-title-level-3 m-title-style-c">見出しレベル3スタイルcです</p>
<p class="m-title m-title-level-4 m-title-style-c">見出しレベル4スタイルcです</p>
<p class="m-title m-title-level-5 m-title-style-c">見出しレベル5スタイルcです</p>
<p class="m-title m-title-level-6 m-title-style-c">見出しレベル6スタイルcです</p>
<p class="m-title m-title-level-1 m-title-style-d">見出しレベル1スタイルdです</p>
<p class="m-title m-title-level-2 m-title-style-d">見出しレベル2スタイルdです</p>
<p class="m-title m-title-level-3 m-title-style-d">見出しレベル3スタイルdです</p>
<p class="m-title m-title-level-4 m-title-style-d">見出しレベル4スタイルdです</p>
<p class="m-title m-title-level-5 m-title-style-d">見出しレベル5スタイルdです</p>
<p class="m-title m-title-level-6 m-title-style-d">見出しレベル6スタイルdです</p>
<p class="m-title m-title-level-1 m-title-style-e">見出しレベル1スタイルeです</p>
<p class="m-title m-title-level-2 m-title-style-e">見出しレベル2スタイルeです</p>
<p class="m-title m-title-level-3 m-title-style-e">見出しレベル3スタイルeです</p>
<p class="m-title m-title-level-4 m-title-style-e">見出しレベル4スタイルeです</p>
<p class="m-title m-title-level-5 m-title-style-e">見出しレベル5スタイルeです</p>
<p class="m-title m-title-level-6 m-title-style-e">見出しレベル6スタイルeです</p>
<p class="m-title m-title-level-1 m-title-style-f">見出しレベル1スタイルfです</p>
<p class="m-title m-title-level-2 m-title-style-f">見出しレベル2スタイルfです</p>
<p class="m-title m-title-level-3 m-title-style-f">見出しレベル3スタイルfです</p>
<p class="m-title m-title-level-4 m-title-style-f">見出しレベル4スタイルfです</p>
<p class="m-title m-title-level-5 m-title-style-f">見出しレベル5スタイルfです</p>
<p class="m-title m-title-level-6 m-title-style-f">見出しレベル6スタイルfです</p>

m-title-(color)

見出しの色を変更する。(color)は標準のカラーテーブルを参照。
文字色のみが変わるのではなく、(style)の影響を受けて線やビュレットも含め変化する。
grayはない(初期値)ことに注意。

見出しレベル3スタイルaカラーfirstです

見出しレベル3スタイルbカラーfirstです

見出しレベル3スタイルcカラーfirstです

見出しレベル3スタイルdカラーfirstです

見出しレベル3スタイルeカラーfirstです

見出しレベル3スタイルfカラーfirstです

見出しレベル3スタイルaカラーsecondです

見出しレベル3スタイルbカラーsecondです

見出しレベル3スタイルcカラーsecondです

見出しレベル3スタイルdカラーsecondです

見出しレベル3スタイルeカラーsecondです

見出しレベル3スタイルfカラーsecondです

見出しレベル3スタイルaカラーthirdです

見出しレベル3スタイルbカラーthirdです

見出しレベル3スタイルcカラーthirdです

見出しレベル3スタイルdカラーthirdです

見出しレベル3スタイルeカラーthirdです

見出しレベル3スタイルfカラーthirdです

見出しレベル3スタイルaカラーinfoです

見出しレベル3スタイルbカラーinfoです

見出しレベル3スタイルcカラーinfoです

見出しレベル3スタイルdカラーinfoです

見出しレベル3スタイルeカラーinfoです

見出しレベル3スタイルfカラーinfoです

見出しレベル3スタイルaカラーimportantリンク

見出しレベル3スタイルbカラーimportantリンク

見出しレベル3スタイルcカラーimportantリンク

見出しレベル3スタイルdカラーimportantリンク

見出しレベル3スタイルeカラーimportantリンク

見出しレベル3スタイルfカラーimportantリンク