CSSでline-hightを使って行間を指定する方法【初心者向け】
CSSの初心者向けに、【line-hight】を使って行間を指定する方法を解説した記事。px(ピクセル)、em(エム)、%(パーセント)で指定する方法をサンプルコードを用いて紹介。読めばすぐに使えるようになります。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSS初心者向けに、line-hightを使って行間を指定する方法を解説する記事です。
CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。
line-hightとは
CSSのline-hightプロパティを使用することで、文字列の行の間隔を調整することができます。間隔が狭すぎても広すぎても見にくくなってしまいますので、サイトに合わせて調整しましょう。
事前準備
事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。また、ブラウザのデフォルトサイズを16pxとしています。
ぜひ自分のPCでもやってみましょう。
HTMLファイル：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”sample1″>廣い門の下には、この男の破瓜に誰もゐない。 唯、所々丹塗の剥げた、大きた圓柱に、蟋蟀が一匹とまつてゐる。羅生門が、朱雀大路にある以上は、この男の破瓜にも、雨やみをする市女笠や揉烏帽子が、もう二三人はありさうなものである。それが、この男の外には誰もゐない。</p>
<p class=”sample2″>何故かと云ふと、この二三年、京都には、地震とか、辻風とか火事とか飢饉とか言ふ災がつヾいて起つた。そこで洛中のさびれ方は一通りではない。舊記によると、仏像や仏具を打砕いて、その丹がついたり、金銀の箔がついたりした木を、路ばたにつなみ重ねて、薪の料に売つてゐたと言ふ事である。洛中がその始末であるから、羅生門の修理などは、元より誰も捨てヽ顧る者がなかつた。するとその荒れ果てたのをよい事にして、狐狸が棲む。盗人が棲む。とうとうしまひには、引取り手のない死人を、この門へ持つて来て、棄てヽ行くと言ふ習慣さへ出来た。そこで、日の目が見えなくなると、誰でも気味を悪るがつて、この門の近所へは足ぶみをしない事になつてしまつたのである。</p>
</body>
</html>
line-hightを使ってみる
では具体的に使ってみましょう。
まずは値をnormalに設定してみます。
p.sample1 {line-height:normal; }
p.sample2 {line-height:normal; }
デフォルトではこの状態に設定されているので、当然なにも変わりません。
ここからは、下記の3つの指定方法を紹介します。
- pxで指定
- emで指定
- %で指定
pxで指定
コンピューターで画像や文字を表すときの、色情報を持つ最小単位「px（ピクセル）」で設定します。
下記のように記述します。
p.sample1 {line-height:20px; }
p.sample2 {line-height:50px; }
ブラウザで確認してみましょう。line-heightで指定した数値から文字のサイズ（ここではデフォルトの16px）を引き、残った数値を上下に均等に振り分けます。そのため、数値が大きいほど行の間隔も広くなります。
emで指定
続いて、単位「em（エム）」で指定した場合の例です。emはfont-sizeプロパティで指定された大きさを1とした単位で、親要素などで指定されていない場合は1em=16pxとなります。
下記のように記述します。
p.sample1 {line-height:2em; }
p.sample2 {line-height:4em; }
ブラウザで確認してみましょう。こちらも指定した値が大きいほど行間も広くなります。デフォルトが16pxでしたので、2em=32px、4em=64pxで指定したことと同じです。
%で指定
最後に%で指定します。font-sizeプロパティで指定された大きさを100%とし、指定した%の数値で行間を指定します。親要素などで指定されていない場合は100%=16pxとなります。
下記のように記述します。
p.sample1 {line-height:150%; }
p.sample2 {line-height:200%; }
ブラウザではこのようになります。デフォルトが16pxでしたので、150%=24px、200%=32pxで指定したことと同じです。
今回の記事は以上です。
CSSをさらに学びたい場合は、CSSでfont-styleを使って文字のスタイルを指定する方法も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
