記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

CSS行間を調整して文章を読みやすくする方法【line-height】(初心者向け)

CSSでの行間の調整方法を初心者の方向けに紹介。 基礎知識はもちろんのこと、具体的な方法をサンプルコード付きで詳しく解説。サンプルコード付きなので実際に手を動かして学ぶ事ができ、ご自身のweb制作に活かす事ができます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「行間ってどうやって調整するの・・?」「行間を調整する単位って・・?」「実践的に行間を調整できるようになりたい・・!」
行間を調整し、見栄えの良いwebサイトを制作したいと考えている、初心者WEB製作者の方も多いのではないでしょうか?
今回は、初心者の方向けに「行間の指定方法」「行間の調整単位」を中心に詳しく解説していきます。

行間の調整とは?

そもそも行間の調整とは下記のような状態を言います。

行間が詰まっている↓

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

行間に余裕がある↓

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

行間1つで、より読みやすくする事ができます。
line-heightを指定し行間を指定することができます。

line-heightとは

テキストを表示した時、各行ごとに「行ボックス」が指定されます。 この高さを指定できるプロパティが、line-heightです。 つまりline-heightで高さを指定し、行間を調整していきます。

line-heightの使い方

line-heightの指定方法は下記のようになります。
セレクタ{ line-height: 値; }
「line-height」、値30pxを指定してみます。
HTMLサンプルコード

CSSサンプルコード

line-height:30pxサンプルコード表示結果↓

株式会社セルリア
お客様である人と企業の「こうありたい」を実現する仕組みを生み出し、自己実現のフィールドとして社会に必要とされる会社を目指します。
さらに、株主、パートナー、従業員やそのご家族など当社を支えてくださるステークホルダーの自己実現とも真摯に向き合い、共にかなえる自己実現プラットフォームに成長します。

指定できる単位は3点「px」「%」「em」と、単位をしてしない「単位なし」があります。下記より詳しく解説していきます。

line-heightで指定できる範囲

line-heightで指定できる単位・単位を指定しない数値のみの「単位なし」を解説します。
一番オススメの方法は、最初に紹介する「単位なし」です。
時間がない方は「単位なし」の項目だけ読んでください。

単位なし

●一番オススメの方法です。
「単位なし」がオススメの理由は、「em」「%」で指定すると親要素の影響を受けてしまうため、行間も親要素の影響を受けてしまいます。
これに対して「単位なし」は各要素の文字サイズを基準に、子要素は子要素で計算してくれくれるため、分かりやすく、かつ後からの調整がしやすいです。

文字の大きさに対しての比となり、1が100%、2なら200%となります。 実際に指定していきましょう。

line-height: 1;を指定すると

line-height: 1;を指定↓

株式会社セルリア
お客様である人と企業の「こうありたい」を実現する仕組みを生み出し、自己実現のフィールドとして社会に必要とされる会社を目指します。
さらに、株主、パートナー、従業員やそのご家族など当社を支えてくださるステークホルダーの自己実現とも真摯に向き合い、共にかなえる自己実現プラットフォームに成長します。

HTMLサンプルコード

CSSサンプルコード

line-height: 1.5;を指定すると

行間に余裕が生まれました。

line-height: 1.5;を指定↓

株式会社セルリア
お客様である人と企業の「こうありたい」を実現する仕組みを生み出し、自己実現のフィールドとして社会に必要とされる会社を目指します。
さらに、株主、パートナー、従業員やそのご家族など当社を支えてくださるステークホルダーの自己実現とも真摯に向き合い、共にかなえる自己実現プラットフォームに成長します。

HTMLサンプルコード

CSSサンプルコード

line-height: 2;を指定すると

少し間隔が空きすぎですね。

line-height: 2;を指定↓

株式会社セルリア
お客様である人と企業の「こうありたい」を実現する仕組みを生み出し、自己実現のフィールドとして社会に必要とされる会社を目指します。
さらに、株主、パートナー、従業員やそのご家族など当社を支えてくださるステークホルダーの自己実現とも真摯に向き合い、共にかなえる自己実現プラットフォームに成長します。

HTMLサンプルコード

CSSサンプルコード

上記の様に「単位なし」は簡単に調整する事ができ、親要素の影響を受けないので最もオススメの方法です。

PX

pxでの指定は、文字の大きさではなく行の高さをpxで指定します。
フォントサイズより小さい値を指定してまうと、下記の様に文字が重なってしまいます。
フォントサイズが異なる文字に対して、line-heightを指定し直さなければならず、
pxでの指定はなるべく避けた方が良いです。
参考図

サンプルコード表示結果↓

株式会社セルリア
お客様である人と企業の「こうありたい」を実現する仕組みを生み出し、 自己実現のフィールドとして社会に必要とされる会社を目指します。 さらに、株主、パートナー、従業員やそのご家族など 当社を支えてくださるステークホルダーの自己実現とも真摯に向き合い、 共にかなえる自己実現プラットフォームに成長します。

HTMLサンプルコード

CSSサンプルコード

em

相対的な比率を決め、フォントサイズに応じて行間を決めます。
フォントサイズが、20pxだと「1emは20pxの行間」「2emは40pxの行間」と
文字の大きさを基準にして表示することができます。

サンプルコード表示結果↓

株式会社セルリア
お客様である人と企業の「こうありたい」を実現する仕組みを生み出し、 自己実現のフィールドとして社会に必要とされる会社を目指します。 さらに、株主、パートナー、従業員やそのご家族など 当社を支えてくださるステークホルダーの自己実現とも真摯に向き合い、 共にかなえる自己実現プラットフォームに成長します。

HTMLサンプルコード

CSSサンプルコード

簡単に指定はできますが、親要素の影響を受けるので注意が必要です。

%

相対的な比率を決め、フォントサイズに応じて行間を決めます。
フォントサイズが、20pxだと「100%は20pxの行間」「200%は40pxの行間」と 文字の大きさを基準にしてすることができます。

サンプルコード表示結果↓

株式会社セルリア
お客様である人と企業の「こうありたい」を実現する仕組みを生み出し、 自己実現のフィールドとして社会に必要とされる会社を目指します。 さらに、株主、パートナー、従業員やそのご家族など 当社を支えてくださるステークホルダーの自己実現とも真摯に向き合い、 共にかなえる自己実現プラットフォームに成長します。

HTMLサンプルコード

CSSサンプルコード

簡単に指定はできますが、親要素の影響を受けるので注意が必要です。

line-heightで要素の高さ半分(真ん中)に文章を持ってくる方法

line-heightを指定して、要素(四角形)の高さ半分に文章を配置する方法を紹介します。
下記の様な状態です。

サンプルコード表示結果↓

真ん中に文字

HTMLサンプルコード

CSSサンプルコード

※解説
子要素(pタグ)に、親要素(sampleクラス)の高さと同じ値の「line-height」を指定する事で、真ん中(高さの)に表示する事ができます。
web制作の現場ではよく使うので覚えておくと便利でしょう。
ちなみにpタグに追加で「text-align: center;」を指定する事でど真ん中に文字を持ってくる事ができます。

Pタグにtext-align: center;を追加↓

真ん中に文字

追加CSSサンプルコード

まとめ

今回は、初心者の方向けに「行間の指定方法」「行間の調整単位」を中心に解説してきました。
最後にポイントをまとめます。

1.行間は、CSSプロパティ「line-height」を指定して調整する

2.line-heightの指定方法は
セレクタ{ line-height: 値; }

3.指定できる値は、3点「px」「%」「em」と 数値のみの「単位なし」があり、一番オススメの方法は「単位なし」での指定

4.line-heightで要素の高さ半分(真ん中)に文章を持ってくる方法は、子要素に、親要素の高さと同じ値の「line-height: 値;」を指定する

いかがだったでしょうか?
行間を調整することで、見栄えの良いWEBサイト制作をする事ができます。
これを機会に学んでみてください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。