HTML/CSS ・ Chapter 8

文字を整える

記事 ・ 冒頭を無料公開中

前のチャプターで、CSSの基本の形(どこを・どうするか)を学びました。このチャプターでは、それを使って文字まわりを整えていきます。Webページの大部分は文字です。文字が読みやすいだけで、ページの印象は驚くほど良くなります。

文字を整える、代表的なプロパティ

前のチャプターで color(文字色)と font-size(文字サイズ)はもう使いましたね。今回は、そこに3つ仲間を追加します。

font-weight は文字の太さです。bold にすると太字になり、normal で普通の太さに戻ります。大事な言葉を目立たせたいときに使います。

line-height は行間です。行と行のあいだの余白を指定します。1.8 のように数字で書くのが一般的で、「文字サイズの1.8倍の高さを1行分にする」という意味になります。実は、初心者のページが「なんだか読みにくい」と感じる原因の多くは、この行間の狭さです。日本語の文章なら 1.7〜1.9 くらいにすると、ぐっと読みやすくなります。

このチャプターの続きは受講生限定です

本文の残り、図解・実行できるコードブロック・演習はプラン加入後に読めます。

料金プランを見る