CSSスタイルプロパティの行の高さを使用して、Webページの行間隔に影響を与える方法を学びます。
CSS行間隔の値
CSSの行間は、CSSスタイルのプロパティline-heightの影響を受けます。このプロパティは5つの異なる値をとります：
- ノーマル： ブラウザは、フォントサイズに関連する行間隔の値を決定します。これは通常、フォントサイズと同じか、わずかに大きい（20％のように）。
- 継承： 行間は親要素の行間から取るべきです。したがって、bodyタグの行の高さをフォントサイズより30％大きく設定し、内部の段落タグが継承するように設定されている場合、font-sizeよりも30％大きい行の高さになります。
- 数： 行高さの値に測定単位がない場合は、行の高さのフォントサイズの倍数と見なされます。したがって、1.25の線高さは、フォントサイズよりも25％大きくなります。
- A長さ： ライン高さの値に測定単位がある場合、それはライン間にあるスペースの正確な量です。したがって、1.25mmの場合、1.25ミリメートル離れた線になります。
- パーセンテージ： 行の高さがパーセンテージの場合、それはフォントサイズのパーセンテージになります。したがって、125％の行の高さはフォントのサイズより25％大きくなります。
CSSの行間隔に使用する値
ほとんどの場合、行間の最適な選択は、デフォルトまたは「通常」のままにしておくことです。これは一般に最も読みやすく、特別なことをする必要はありません。しかし、行間を変更することで、テキストに違った感触を与えることができます。
フォントサイズがemまたはパーセンテージとして定義されている場合、その行の高さもそのように定義する必要があります。これは、リーダがフォントのサイズを変更し、行間隔に同じ比率を維持できるため、最も柔軟な行間隔の形式です。
ポイント（pt）値を持つ印刷スタイルシートの行の高さを設定します。ポイントは印刷基準ですので、フォントサイズはポイント単位である必要があります。
数字の選択肢を使用するのは好きではありません。これは、人々にとって最も混乱していることがわかったからです。多くの人は、その数は絶対的な大きさだと思うので、それは巨大になります。たとえば、フォントを14pxに設定して、行の高さを14に設定すると、行間隔が14に設定されているため、行間に大きなギャップが生じます 回 フォントサイズ
行間隔にどれだけのスペースを使用すべきか
上記のように、特別な理由がない限り、デフォルトの行間を使用することをお勧めします。行間隔を変更すると、さまざまな影響があります。
- 非常に緊密なテキストは、読みにくい場合があります。しかし、小さな行スペースはテキストの気分に影響を与える可能性があります。テキストが一緒に表示される場合、テキストの感覚をより暗くまたは濃く見せることができます。
- 遠くにあるテキストも読みにくい場合があります。しかし、広い線スペースにより、テキストがより流動的で流動的に見えるようになります。
- 行間を変更すると、そうでなければスペースに収まらないテキストをよりコンパクトにしたり、デザイン内のスペースを増やすことができます。
