Labo 215: 記事タイトル
Labo 215: 記事タイトル
ページ上に表示するモジュールの作成
記事タイトルモジュールでタイトルを表示する
記事の大見出し、ページタイトルなどページの一番重要なタイトルを表示する基本モジュール
h1 タグを使うシンプルなもの
記事タイトルなど、ページの最も重要なタイトルや見出しには h1 タグを使う
記事タイトルモジュールに設定する CSS では以下のようなスタイルを設定する
h1 のデフォルト CSS には上下マージンが設けられている
h1 タグはページの主要なコンテンツの中で最初に出てくる事が多い
マージンは親要素のパディングと隣接することになる
レイアウトのしやすさや CSS の書きやすさを考えて、上マージンは 0 にしておくのが良い
h1 の上にスペースが必要な場合は、親要素のパディングで設定する
line-height は 1行の高さを設定するプロパティで、テキストの上下にスペースを作る
値を 1.5 にすると、1行の高さが設定されているフォントサイズの 1.5倍になる
値には単位は付けない
line-heght: 1行の高さ;
レイアウトでは 16px、モバイルレイアウトでは 14px にしているので、h1 のフォントサイズはそれぞれ 30px、約26px となる