サブタイトルの作り方 - CSS
サブタイトルのためのタグはないため、作るときにはh1
の中にspan
とbr
を使って実装する
- 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.7
で1.049…
となり、ほぼ1。
結果
CSS適用前
CSS適用後
わ〜CSSってすごいんだな...
参考文献
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログ (1件) を見る