フォントサイズを変える | HTML / CSS入門

CSS では font-size を使って文字の大きさを変えられます。

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px; /* 基本の本文サイズ */
}

h1 {
  font-size: 32px; /* 見出しサイズ */
}

h2 {
  font-size: 24px;
}

ポイント：

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

文字が詰まりすぎると読みにくくなります。 line-height を使うと、行間を調整できます。

p {
  font-size: 16px;
  line-height: 1.6; /* 文字サイズの1.6倍の行間 */
}

ポイント：

文字が狭すぎる場合は、letter-spacing を使います。

h1 {
  font-size: 32px;
  letter-spacing: 1px; /* 文字の間を広げる */
}

ポイント：

<body>
  <h1>見出しです</h1>
  <p>本文です。行間や文字間を調整すると、読みやすさが変わります。</p>
</body>

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 32px;
  letter-spacing: 1px;
}

保存してブラウザで確認してください。文字の読みやすさや見た目の印象が大きく変わるはずです。

今回学んだこと：

次のページでは、

を学んでいきます。

少しずつ「デザインらしさ」が増えていきます。