module-title

echo-title

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

  • フォントファミリーが first になる。詳細はフォントファミリーを参照。
  • font-size は指定しない(ブラウザの見出し要素の規定値)
  • margin は0となる
  • line-height は、body要素の継承よりも小さくなる( 1.25 )。
<h1 class="echo-title">これはh1要素です</h1>
<h1 class="echo-title"><a href="#">リンクを付与したh1要素です</a></h1>
<h2 class="echo-title">これはh2要素です</h2>
<h2 class="echo-title"><a href="#">リンクを付与したh2要素です</a></h2>
<h3 class="echo-title">これはh3要素です</h3>
<h3 class="echo-title"><a href="#">リンクを付与したh3要素です</a></h3>
<h4 class="echo-title">これはh4要素です</h4>
<h4 class="echo-title"><a href="#">リンクを付与したh4要素です</a></h4>
<h5 class="echo-title">これはh5要素です</h5>
<h5 class="echo-title"><a href="#">リンクを付与したh5要素です</a></h5>
<h6 class="echo-title">これはh6要素です</h6>
<h6 class="echo-title"><a href="#">リンクを付与したh6要素です</a></h6>
<p class="echo-title">これはp要素です</p>
<p class="echo-title"><a href="#">リンクを付与したp要素です</a></p>

sub class echo-title-level-(level)

見出しの文字サイズを、見出しレベルとして望ましい大きさに変更する。
継承された文字サイズに対する相対 (em) で大きくなる。

(level) は 1-6 に対応しているが、これは h1 - h6 要素に併せた便宜的な名称であり、h1要素に「6」を使用しても問題ない。

文字サイズの変化 group: title
(breakpoint)(fontsize)
.echo-***-level-6 .echo-***-level-5 .echo-***-level-4 .echo-***-level-3 .echo-***-level-2 .echo-***-level-1
md以下 md 1.0625em
xl xxl 3l 4l
lg以上 lg xl xxl 3l 4l 5l

※level-5のみの特例。1rem = 16px の場合、17pxとなる

この表の解説

Sassを使用できる場合、 _scss/config_advance.scss の配列 $title-min-font-sizes, $title-max-font-sizesで変更できる。

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

これは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です

この範囲では .echo-text-xs クラスが付与されているため、各見出しの文字サイズが小さくなっています。

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

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

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

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

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

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

この範囲では .echo-text-xl クラスが付与されているため、各見出しの文字サイズが大きくなっています。

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

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

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

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

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

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

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

<div class="echo-text-xs echo-margin-top-lg echo-padding-sm echo-bg-default echo-bg-fade">
    
<p>この範囲では .echo-text-xs クラスが付与されているため、各見出しの文字サイズが小さくなっています。</p>

<h1 class="echo-title echo-title-level-1">これはh1要素で見た目がレベル1です</h1>
<h1 class="echo-title echo-title-level-2">これはh1要素で見た目がレベル2です</h1>
<h1 class="echo-title echo-title-level-3">これはh1要素で見た目がレベル3です</h1>
<h1 class="echo-title echo-title-level-4">これはh1要素で見た目がレベル4です</h1>
<h1 class="echo-title echo-title-level-5">これはh1要素で見た目がレベル5です</h1>
<h1 class="echo-title echo-title-level-6">これはh1要素で見た目がレベル6です</h1>

</div>

<div class="echo-text-xl echo-margin-top-lg echo-padding-sm echo-bg-default echo-bg-fade">
    
<p>この範囲では .echo-text-xl クラスが付与されているため、各見出しの文字サイズが大きくなっています。</p>

<h1 class="echo-title echo-title-level-1">これはh1要素で見た目がレベル1です</h1>
<h1 class="echo-title echo-title-level-2">これはh1要素で見た目がレベル2です</h1>
<h1 class="echo-title echo-title-level-3">これはh1要素で見た目がレベル3です</h1>
<h1 class="echo-title echo-title-level-4">これはh1要素で見た目がレベル4です</h1>
<h1 class="echo-title echo-title-level-5">これはh1要素で見た目がレベル5です</h1>
<h1 class="echo-title echo-title-level-6">これはh1要素で見た目がレベル6です</h1>

</div>

sub class echo-title-fixed

.echo-title-level-(size) と同時に付与すると、見出しが (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。

各サイズは、前項の表内の最低値となる。

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

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

sub class echo-title-style-(style)

見出しの外観を変更する。(style)はa-fの6種類となるが、破綻しない程度に追加しても構わない。

線の太さやブレットの大きさは .echo-title-level-(level) の影響を受け変化する。
線、背景、ブレットの色は $default (文字色と同じ)が定義されている。Sassを使用している場合は _scss/_config_basic.scss 内の変数 $title-key-color, $title-key-bg で一括変更ができる。

一部の外観はリンクを付与すると下線によって見栄えに問題が生じるが、下線を消すと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="echo-title echo-title-level-1 echo-title-style-a">見出しレベル1スタイルaです</p>
<p class="echo-title echo-title-level-2 echo-title-style-a">見出しレベル2スタイルaです</p>
<p class="echo-title echo-title-level-3 echo-title-style-a">見出しレベル3スタイルaです</p>
<p class="echo-title echo-title-level-4 echo-title-style-a">見出しレベル4スタイルaです</p>
<p class="echo-title echo-title-level-5 echo-title-style-a">見出しレベル5スタイルaです</p>
<p class="echo-title echo-title-level-6 echo-title-style-a">見出しレベル6スタイルaです</p>
<p class="echo-title echo-title-level-1 echo-title-style-b">見出しレベル1スタイルbです</p>
<p class="echo-title echo-title-level-2 echo-title-style-b">見出しレベル2スタイルbです</p>
<p class="echo-title echo-title-level-3 echo-title-style-b">見出しレベル3スタイルbです</p>
<p class="echo-title echo-title-level-4 echo-title-style-b">見出しレベル4スタイルbです</p>
<p class="echo-title echo-title-level-5 echo-title-style-b">見出しレベル5スタイルbです</p>
<p class="echo-title echo-title-level-6 echo-title-style-b">見出しレベル6スタイルbです</p>
<p class="echo-title echo-title-level-1 echo-title-style-c">見出しレベル1スタイルcです</p>
<p class="echo-title echo-title-level-2 echo-title-style-c">見出しレベル2スタイルcです</p>
<p class="echo-title echo-title-level-3 echo-title-style-c">見出しレベル3スタイルcです</p>
<p class="echo-title echo-title-level-4 echo-title-style-c">見出しレベル4スタイルcです</p>
<p class="echo-title echo-title-level-5 echo-title-style-c">見出しレベル5スタイルcです</p>
<p class="echo-title echo-title-level-6 echo-title-style-c">見出しレベル6スタイルcです</p>
<p class="echo-title echo-title-level-1 echo-title-style-d">見出しレベル1スタイルdです</p>
<p class="echo-title echo-title-level-2 echo-title-style-d">見出しレベル2スタイルdです</p>
<p class="echo-title echo-title-level-3 echo-title-style-d">見出しレベル3スタイルdです</p>
<p class="echo-title echo-title-level-4 echo-title-style-d">見出しレベル4スタイルdです</p>
<p class="echo-title echo-title-level-5 echo-title-style-d">見出しレベル5スタイルdです</p>
<p class="echo-title echo-title-level-6 echo-title-style-d">見出しレベル6スタイルdです</p>
<p class="echo-title echo-title-level-1 echo-title-style-e">見出しレベル1スタイルeです</p>
<p class="echo-title echo-title-level-2 echo-title-style-e">見出しレベル2スタイルeです</p>
<p class="echo-title echo-title-level-3 echo-title-style-e">見出しレベル3スタイルeです</p>
<p class="echo-title echo-title-level-4 echo-title-style-e">見出しレベル4スタイルeです</p>
<p class="echo-title echo-title-level-5 echo-title-style-e">見出しレベル5スタイルeです</p>
<p class="echo-title echo-title-level-6 echo-title-style-e">見出しレベル6スタイルeです</p>
<p class="echo-title echo-title-level-1 echo-title-style-f">見出しレベル1スタイルfです</p>
<p class="echo-title echo-title-level-2 echo-title-style-f">見出しレベル2スタイルfです</p>
<p class="echo-title echo-title-level-3 echo-title-style-f">見出しレベル3スタイルfです</p>
<p class="echo-title echo-title-level-4 echo-title-style-f">見出しレベル4スタイルfです</p>
<p class="echo-title echo-title-level-5 echo-title-style-f">見出しレベル5スタイルfです</p>
<p class="echo-title echo-title-level-6 echo-title-style-f">見出しレベル6スタイルfです</p>