CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのline-height（行の高さ）プロパティ完全ガイド：基本構文から実践例まで

CSSのline-heightプロパティは、HTML要素の行の高さを決定します。主にテキストの行間を設定するために使われ、キーワード、パーセンテージ、数値などさまざまな方法で指定できます。

CSSのline-heightプロパティを使うと、Webページ上のインライン要素同士の間隔を定義できます。開発者の間では、ページ内のテキスト行間を広げたり狭めたりする目的でよく利用されています。

この記事では、CSSのline-heightプロパティの使い方を解説します。具体的なコード例も交えて紹介するので、読み終える頃にはline-heightを自在に使いこなせるようになっているでしょう。

CSSのline-heightとは

CSSのline-heightプロパティは、ラインボックス（行ボックス）の高さを設定します。ラインボックスとは、CSSにおけるボックスを構成する各行のことです。このプロパティは、テキストの行間を指定する際によく使われます。

行の高さを調整することで、Webページ上のテキスト（やその他の要素）の行間を間接的に調整できます。これは、Microsoft Wordで文章を「1.15行」や「2行」に設定する操作に似ています。

line-heightプロパティの構文は以下のとおりです。

line-height: 値;

「値」には、要素の行の高さを決める長さの値を指定します。

line-heightプロパティで使用できる値には、「長さ」「数値」「パーセンテージ」の3種類があります。

値の種類説明指定例指定例の結果
長さem、px、cmなどの特定の単位で行の高さを設定します。10px、15px、20px10pxと指定すれば、行の高さは10pxになります。
数値フォントサイズの倍数を行の高さとして設定します。1、1.8、2フォントサイズが10pxの場合、行の高さはそれぞれ10px、18px、20pxになります。
パーセンテージ要素のフォントサイズに対する割合で行の高さを設定します。30%、50%、110%フォントサイズが10pxの場合、行の高さはそれぞれ3px、5px、11pxになります。

また、「normal」というキーワードを指定することもできます。このキーワードはブラウザのデフォルト値を使用することを意味し、その値は閲覧環境のブラウザによって異なりますが、おおよそ1.2前後です。

line-heightプロパティをボックスに適用すると、そのボックス内のすべてのテキストに指定した行の高さが適用されます。

アクセシビリティに関する注意点

line-heightプロパティの一般的な用途の一つが行間の変更です。行と行の間に十分なスペースを確保することは、常に意識すべきポイントです。行間が狭すぎると、テキストが読みにくくなってしまいます。

読みにくいテキストは、特に視覚に障害を持つ方々にとって深刻な障壁となります。Webサイトを構築する際は、アクセシビリティへの配慮を欠かさないようにしましょう。

CSSで数値を使って要素の行の高さを設定する場合、1.5未満の値は使用しないことをおすすめします。1.5未満の行間は、視覚に障害のある読者にとってWebサイトの利用を難しくしてしまう可能性があるためです。

line-heightのCSSコード例

ここで、ある料理クラブのWebサイトに「私たちについて」ページを作成しているとしましょう。このページには見出しがあり、その後にクラブの概要を示す段落が続きます。

テキストには適切な行間を設けたいところです。そこで、ページ内の段落テキストの行の高さを1.6remに設定することにしました。以下のコードで実現できます。

<html>

<h2>私たちについて</h2>
<p>Fantastic Chefsは2007年に設立された、ワシントン州シアトルのローカル料理クラブです。当クラブは毎週集まり、レシピの共有や調理技術についての議論、そして一緒に料理を作る活動を行っています。毎週土曜日の午後、メンバーはシアトルにあるキッチンに集合します。</p>

<style>

p {
	font-size: 16px;
	line-height: 1.6rem;
}

上記のコードエディタの「実行」ボタンをクリックすると、HTML/CSSコードの出力結果を確認できます。CSSのline-height（行の高さ）プロパティ完全ガイド：基本構文から実践例まで

HTMLファイルでは、<h2>タグを使って「私たちについて」という見出しを定義しました。次に、Fantastic Chefsの説明文を書き、それをHTMLの<p>タグで囲んでいます。

CSSファイルでは、ルールを1つだけ定義しました。このルールでは2つのCSSプロパティを使用し、すべての<p>タグに対して行の高さを1.6rem、フォントサイズを16pxに設定しています。

line-heightプロパティで使用した「rem」という単位は、ルート要素のフォントサイズを基準とした相対的な行の高さを設定します。「rem」は「root element（ルート要素）」の略です。今回のフォントサイズは16pxなので、この段落の行の高さは25.6px（16px × 1.6）となります。

段落のテキストは適切に行間が空いており、文字が重なることもありません。

また、上記の例では<div>要素にline-heightを適用することも可能です。その場合、<div>タグ内のすべてのテキストに指定した行の高さが適用されるため、見出しと<p>タグの両方が影響を受けます。

テック系ブートキャンプ参加者の81%が、受講後にテック業界でのキャリアの見通しに対する自信が高まったと回答しています。まずはブートキャンプとのマッチングを試してみてはいかがでしょうか。

また、ブートキャンプ卒業生の平均的なキャリア移行期間は、受講開始から初めての仕事獲得まで6ヶ月未満と短いことで知られています。

まとめ

CSSのline-heightプロパティは、ラインボックスの高さを設定します。通常、このプロパティは段落や見出し内のテキスト行間を指定するために使用されます。行の高さは、normalキーワード、パーセンテージ、長さ、数値のいずれかで設定できます。

この記事では、CSSのline-heightプロパティの基礎と、コードでの活用方法について解説しました。これで、プロのようにline-heightプロパティを使いこなすための知識が身についたはずです。

Web開発者を目指している方は、学習リソースやおすすめのコースに関する専門家のヒントをまとめた「CSSの学び方ガイド」もぜひ参考にしてください。

  1. CSSで行間（line-height）を設定する方法

    CSSで行間を設定するには テキストの行間（行の高さ）を設定するには、CSSの line-height プロパティを使用します。適切な行間を指定することで、文章の可読性を大きく向上させることができます。 line-height プロパティに指定できる値は以下のとおりです。 line-height: normal|number|length|initial|inherit; normal：ブラウザのデフォルトの行間が適用されます number：フォントサイズに対する倍率で指定します（例：1.9） length：px や em などの単位で指定します initial：初期値に設定します inhe

  2. CSSのline-heightプロパティで行の高さを設定する方法

    テキストの行の高さは、CSSのline-heightプロパティを使用して定義できます。このプロパティには正の値のみを指定できます。負の値や無効な値を設定した場合は無視されるため、注意が必要です。構文CSSのline-heightプロパティの構文は以下のとおりです。Selector { line-height: /*値*/ }指定できる値の種類line-heightプロパティには、以下のような値を指定できます。normal：ブラウザのデフォルトの行の高さ（初期値）数値（単位なし）：フォントサイズに対する倍率で指定（例：1.5）長さ（px、emなど）：絶対的な値で指定（例：50px）パーセ