文章の行間は、サイトを訪れるユーザーに与える印象に大きく関わります。
適切な行間指定を行うにはいくつかの方法があるので初心者にわかりやすく紹介します。
行間の変更
行間が狭すぎると窮屈な印象を与え、広すぎると情報量が少ない印象を与えます。
また、どちらもやりすぎると読みづらくなってしまいます。
では、どのように適切な行間へ設定するのでしょうか？
HTMLとCSSが初心者の人でもわかりやすく説明していきます。
line-heightを使う
行の高さを指定することで、行間が決まるline-heightというプロパティを使います。
line-height: 数値；
数値は、大きくなるにつれ行の高さが広がり、数値が下がると狭くなります。
単位について
単位には３種類あります。
| px | 直接高さの指定 |
| em | 親要素のフォントサイズに応じて指定。 |
| % | 親要素のフォントサイズに応じて指定。 |
しかし、上に挙げた３種類はフォントサイズに応じてline-heightの数値を変更する必要があります。
特に、emと%の指定を親要素に行った場合、子要素にも同じline-heightの値が適応されてしまいます。
これらの単位は、親要素と子要素のフォントサイズが異なる場合に、適切な行の高さではなくなってしまいます。
それを防ぐために、line-heightには単位を付けないことを勧めます。
line-height: 1.5;
line-heightに単位を付けないことで、子要素であれ、そのフォントサイズにあった行の高さが適応されます。
HTMLとCSSで変更可能
ここまで説明してきたline-heightはHTMLでもCSS上でも使えます。
HTMLとCSSでの使い方についてそれぞれ説明していきます。
HTMLでline-heightを使った行間指定
まずはHTML上でのline-heightの使い方について解説します。
<div style="line-height: 1.5;>
:
:
</div>
HTML上で行間の指定を行う場合には、style= を使ってline-heightのプロパティを指定します。
CSSでline-heightを使った行間指定
HTMLよりの一般的にはCSS上でのline-heightを使って行の高さが指定されます。
p {
line-height: 1.5;
}
CSS上でのline-heightはこのようになります。
単位を付けないことにより、どのフォントサイズにも適切な行の高さが適応されます。
上手く反応しない場合
行間の指定を行うためにline-heightを使っていも、それが効かない場合があります。
上記したようにline-heightは行間を指定するものではなく、行の高さを指定するものです。
ここではline-heightが正しく作用しにくいpタグのミスについて解説します。
pタグの行間指定
「line-heightを行ったのにpタグだけに適応がされない。」なんてことはありませんか？
pタグの部分だけ、行間指定されない時には余白の指定をすることで解決できます。
line-heightは行の高さの指定です。
なので、pタグの要素はmarginを使って余白の指定をします。
marginについて詳しく知りたい方はこちら。
余白を作る CSS「paddingとmargin」の使い分け方【徹底解説】
これは、行の高さを指定するline-heightとは違い、行の周りにある余白を調整するイメージです。
サンプルコードです。
p {
line-height: 1.5;
margin-top: 5px;
margin-bottom: 5px;
}このようにline-heightで行の高さを指定してから、marginで上下の余白の指定をします。
まとめ
line-heightを使った行の間隔の指定方法を説明しました。
行の高さの指定をするのがline-heightという考えを持っていれば、行間を指定する時にイメージしやすいでしょう。
適切な行間の指定をして、読みやすいサイトにしましょう！
2月枠も残りわずか!!未経験からエンジニアを目指すならDMM WEBCAMP
DMM WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98％！短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます！
「未経験だから不安…」、「転職できるんだろうか…」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。
無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。
