【CSS講座】STEP7: 段落の行間は「line-height」で変更しよう!
ではCSSを使って、段落の行間を変更する方法を紹介します。
こちらの例文を見てください。
こんにちは。今日は非常にいい天気ですね。散歩に行くのもとっても気持ちよくて、さっきから2時間ぐらいスキップをし続けています。誰か止めてください。
スキップと言えば、私は昔、スキップが苦手でした。なんというかリズムがうまく取れずできなかったんですよね。リズムを取るのって生まれつきできる人もできない人もいるんですよ。いえ、知りませんけど。
まぁ、そんなしょうもない話をしてもアレなんで、もうやめておきます。
段落の行間の変え方
上記の文章の上で、いつものようにメニューから「検証」を選択します。
出てきたウィンドウにあるCSSの「line-height」で行間を変えます。
.ex p { line-height: 1; }「 1 」「1.7」にしてみましょう（小数点以下は微調整）。文字の行間が広くなって一気に読みやすくなりますね。
※「line-height」では単位は要りません。
※「 2 」にするとちょうど文字1つ分の高さが空きます。「 3 」にすると文字2つ分です。
ここで覚えるCSS
line-height : ここにコードを入れる ;
「line-height」には単位はいりませんよ！
※ ちなみに「line-height」は「ラインハイト」と読みます。「ラインヘイト」ではありません！
CSSの基本はこちらです
CSSの基本についてはこちらの記事にまとめています。