TIL

Today I Learned. 知ったこと、学んだことを書いていく

サブタイトルの作り方 - CSS

サブタイトルのためのタグはないため、作るときにはh1の中にspanbrを使って実装する

  • span
  • br

サンプル

HTML

<h1>東雲めぐの配信最高!!<br>
    <span class="subtitle">〜毎朝、早起きして癒やしてもらおう〜</span>
</h1>

h1内にタイトルとサブタイトルを記述し、span内にサブタイトルを記述する

CSS

h1 {
    font-size: 1.5em;
    line-height: 1.2em;
    text-align: center;
}

h1 .subtitle {
    font-size: 0.7em;
    font-weight: normal;
}

h1(タイトルとサブタイトル)に対してスタイルを設定して、サブタイトルだけにスタイルを設定する

サブタイトルのフォントサイズは1 * 1.5 * 0.71.049…となり、ほぼ1。

結果

CSS適用前

f:id:tmg1998:20180315230301p:plain:w500

CSS適用後

f:id:tmg1998:20180315225719p:plain:w500

わ〜CSSってすごいんだな...

参考文献