• CSSで行間を調整する方法~line-heightプロパティの使い方~

    公開日:2016年12月05日 最終更新日:2022年04月25日

    line-heightプロパティ」を使って行間を広くしたり、狭くしたりレイアウトに合わせて調整する事ができます。HTML文書中のテキストの行間はブラウザーで自動調節されますが、文章に合わせて行間を調整して文章を読みやすくしましょう。「line-heightプロパティ」の値の指定方法がいくつかありますのでサンプルソースを元に確認していきましょう。

    プロエンジニアの無料会員登録はこちら

    目次

    1. line-heightプロパティの基本書式

    「line-heightプロパティ」に行間の値を指定する事でフォントサイズを含む上下行間の余白を設定する事ができます。

    ●line-heightプロパティの基本書式

    line-height: 値;

    実際にHTML文書を保存してどのように表示されるか確認してみましょう。「line-height1.html」をコピーしてPC上の任意の場所に保存して下さい。ファイルの保存形式を「UTF-8」にします。

    ●line-height1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>CSS入門-行間の調整</title>
    <style>
    p {
    width: 300px; /* ボックスの横幅を指定する */
    font-size: 10px; /* フォントのサイズを指定する */
    line-height: 30px; /* 行の高さを指定する */
    }
    </style>
    </head>
    <body>
    <p>行間を調整するには「line-height」プロパティを使います。
    プロパティに値を指定し行の上下の高さを調整します。</p>
    </body>
    </html>

    10行目の「line-heightプロパティ」に30pxを指定して、段落(p)タグ内の文章の行の高さを30pxに調整しています。

    ●ブラウザーの表示(line-height1.html)

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニアhtml-lineheight1

    ▲ページトップへ戻る

    2. 行間を自動で調整する方法[line-height:normal]

    line-heightプロパティ」の初期値はnormal になります。「line-height2.html」をPC上の任意の場所に保存して行間を確認してみましょう。

    ●line-height2.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>CSS入門-行間の調整</title>
    <style>
    p {
    width: 300px; /* ボックスの横幅を指定する */
    font-size: 10px; /* フォントのサイズを指定する */
    line-height: normal; /* 行の高さを指定する */
    }
    </style>
    </head>
    <body>
    <p>行間を調整するには「line-height」プロパティを使います。
    プロパティに値を指定し行の上下の高さを調整します。</p>
    </body>
    </html>

    「line-height」プロパティに"normal"を指定するとブラウザーが自動で行間を調節してくれます。

    ●ブラウザーの表示(line-height2.html)

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニアhtml-lineheight2

    ▲ページトップへ戻る

    3. line-heightプロパティに実数値を指定する

    line-heightプロパティ」に、実数値にpxemexなどの単位をつけて行間の値を指定します。行の高さは、フォントサイズと上下の余白を合わせた合計値になります。

    3.1. 行間をピクセル(px)で指定する

    px」とは1ピクセルを1とした単位になります。実際の表示はモニタの解像度により変わります。

    ●line-height3.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>CSS入門-行間の調整</title>
    <style>
    p {
    width: 450px; /* ボックスの横幅を指定する */
    font-size: 12px; /* フォントのサイズを指定する */
    line-height: 20px; /* 行の高さを実数値+単位(px)で指定する */
    }
    </style>
    </head>
    <body>
    <p>行間を調整するには「line-height」プロパティを使います。
    プロパティに値を指定し行の上下の高さを調整します。</p>
    </body>
    </html>

    ●ブラウザーの表示(line-height3.html)

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニア

    サンプルコードでは、「line-height」プロパティの値を実数値+pxで指定しましたので、1行の高さが20ピクセルになります。この場合、文字の大きさにに関係なく行間が20ピクセルになります。例ではフォントサイズを12pxにしているので、行間は上下の高さは4pxずつになります。

    ▲ページトップへ戻る

    3.2. 行間をフォントサイズ(em)で指定する

    em」とはフォントの高さを1emとした単位になります。

    ●line-height3.html

    <style>
    p {
    width: 450px; /* ボックスの横幅を指定する */
    font-size: 12px; /* フォントのサイズを指定する */
    line-height: 2em; /* 行の高さを実数値+単位(em)で指定する */
    }
    </style>

    ●ブラウザーの表示(line-height3.html)

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニア

    実数値の単位をemにすると、フォントサイズを基準とします。サンプルコードのフォントサイズは12pxのため、「line-height」に「2」を指定すると、行の高さはフォントサイズの2倍である24pxになります。

    ▲ページトップへ戻る

    3.3. 行間を小文字のxの高さ(ex)で指定する

    ex」は、アルファベット小文字の「x」の高さを1exとした単位になります。

    ●line-height3.html

    <style>
    p {
    width: 450px; /* ボックスの横幅を指定する */
    font-size: 12px; /* フォントのサイズを指定する */
    line-height: 2ex; /* 行の高さを実数値+単位(ex)で指定する */
    }
    </style>

    ●ブラウザーの表示(line-height3.html)

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニア

    実数値の単位をexにすると、emを指定するよりも詰まった行の高さになります。

    ▲ページトップへ戻る

    3.4. 行間の単位を指定する際に気を付けること

    フォントサイズ(font-size)と行の高さ(line-height)を指定する場合には、フォントサイズより行の高さを小さくすると、行間がせまくなり上下の文字列が重なりますので単位で行間を指定する場合は注意が必要です。

    ●line-height3.html

    <style>
    p {
    width: 300px; /* ボックスの横幅を指定する */
    font-size: 30px; /* フォントのサイズを指定する */
    line-height: 20px; /* 行の高さを実数値+単位で指定する */
    }
    </style>

    例えばフォントサイズ(font-size)を30pxにし、行間を指定するline-heightプロパティをそれよりも小さい20pxにした場合は文字が重なってしまいます。意図的に文字の重なりを作りたい場合などに利用するとよいでしょう。

    ●ブラウザーの表示

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニアhtml-lineheight5

    ▲ページトップへ戻る

    4. line-heightプロパティに実数値のみを指定する

    line-heightプロパティ」に単位をつけず、実数値のみを指定すると1行の高さに対する倍率を指定するのと同じことになります。値を「2」にすると、1行の2倍の高さ、つまり行間は1行分空くことになります。

    ※行の高さは一番大きいフォントサイズを基準に上下に間隔をとります。

    ●line-height4.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>CSS入門-行間の調整</title>
    <style>
    p {
    width: 300px; /* ボックスの横幅を指定する */
    font-size: 10px; /* フォントのサイズを指定する */
    line-height: 2; /* 行の高さを実数値で指定する */
    }
    </style>
    </head>
    <body>
    <p>行間を調整するには「line-height」プロパティを使います。
    <span style="font-size:30px;">プロパティ</span>に値を指定し行の上下の高さを調整します。
    </p>
    </body>
    </html>

    フォントサイズ(font-size)を10pxにしてますので、通常フォントサイズの場合は上下に5pxの行間が入ります。段落(p)タグ内に30pxの「プロパティ」というフォントがありますので、この行は「プロパティ」のサイズを基準として上下に5pxの行間が入ることになります。

    ●ブラウザーの表示(line-height4.html)

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニアhtml-lineheight6

    line-height プロパティの値を1より小さくしてしまうと上下の行が重なってしまいますので気を付けましょう。

    ●line-height4.html

    <style>
    p {
    width: 300px; /* ボックスの横幅を指定する */
    font-size: 10px; /* フォントのサイズを指定する */
    line-height: 0.5; /* 行の高さを実数値で指定する */
    }
    </style>

    ●ブラウザーの表示(line-height4.html)

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニアhtml-lineheight7

    「0.5」の実数値を指定した場合、「0.5倍の高さ」になるため1行の半分重なってしまいます。

    ▲ページトップへ戻る

    5. line-heightプロパティに割合(%)を指定する

    line-heightプロパティ」には、割合を指定することもできます。

    ●line-height5.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>CSS入門-行間の調整</title>
    <style>
    p {
    width: 300px; /* ボックスの横幅を指定する */
    font-size: 10px; /* フォントのサイズを指定する */
    line-height: 200%; /* 行の高さを割合(%)で指定する */
    }
    </style>
    </head>
    <body>
    <p>行間を調整するには「line-height」プロパティを使います。
    <span style="font-size:30px;">プロパティ</span>に値を指定し行の上下の高さを調整します。
    </p>
    </body>
    </html>

    ●ブラウザーの表示(line-height5.html)

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニアhtml-lineheight8

    また、「line-height」プロパティを指定しない場合はブラウザーが行間を自動調整してある程度の高さをとって表示されますが、line-heightプロパティの値を100%にすると行間がなくなりますので、行の上下を空けたくない場合などに指定するとよいでしょう。

    ●line-height5.html

    <style>
    p {
    width: 300px; /* ボックスの横幅を指定する */
    font-size: 10px; /* フォントのサイズを指定する */
    line-height: 100%; /* 行の高さを割合(%)で指定する */
    }
    </style>

    ●ブラウザーの表示(line-height5.html)

    「CSSで行間を調整する方法~line-heightプロパティの使い方~フリーランスエンジニア案件情報 | プロエンジニアhtml-lineheight9

    行間を空けるのも詰めるのもline-heightプロパティで実数値や割合(%)を指定することで調節可能です。

    ▲ページトップへ戻る

    月額単価80万円〜90万円
    勤務地 東京都 中央区
    月額単価70万円〜80万円
    勤務地 東京都 渋谷区
    月額単価80万円〜90万円
    勤務地 東京都 文京区 ・江東区
    月額単価60万円〜70万円
    勤務地 フルリモート

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    NEW 【PHP/Laravel】バックエンドエンジニア★入札情報サービスの開発

    クラウドソーシング事業やBPO事業を展開している企業にて、今回は入札情報サービスの新規事業として、プ...

    月額単価:80万円〜90万円

    フリーランス

    NEW 【Java】システムエンジニア★Webサイト開発

    同社はWebシステム、Webサイトの企画、構築を受託開発している企業です。 今回はJavaを用いたWebサイト...

    月額単価:70万円〜80万円

    フリーランス

    【Java/Spring】サーバーサイドエンジニア★証券会社向け顧客管理システム開発

    自社内で複数パッケージソフトの開発や、ソフトウェア設計、開発を提供している受託開発企業にて、Java...

    月額単価:80万円〜90万円

    フリーランス

    【PHP/AWS/他】システムエンジニア★国内大手EC向け販促支援システムの開発・運用

    楽天市場やYahoo!ショッピングなど国内大手ECショッピングモールの出店者向け総合型販促支援システムの...

    月額単価:60万円〜70万円

SCROLL TOP