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