• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Code School

プログラミング初心者向け応援メディア

  • Home
  • Python3
  • Django
  • Ruby
  • Ruby on Rails
  • CSS
  • JavaScript
  • Swift
  • Git
  • Linux
  • How to Study
You are here: Home / Web制作 / CSS / CSSのline-heightとは?使い方をあわせて紹介

CSSのline-heightとは?使い方をあわせて紹介

2018年3月29日 By Code School編集部

CSSで使われるline-heightについてその意味や使い方を紹介していきます。

line-heightは行間を調整する際に使う

CSSではWebページの配置や装飾などを整えることがメインで使われると思いがちですが、テキストを読みやすくするためにも使われます。

書体を変えたり、フォントサイズを変更したり・・・そして、ぱっと見て読みやすい文章だなとWebサイトの訪問者に感じてもらうためには行間の調整も必要になってきます。

その時に使用するのがCSSのline-heightというわけです。

height(高さ)からも分かるように段落の上下の行間を調整します。

 

line-heightの使い方

さっそくline-heightの使い方をみていきましょう。

まず、line-heightなしで書いてみます。

See the Pen text by code-school (@code-school) on CodePen.


何もしていない状態なので、上下が詰まって見えますね。
これに、フォントサイズとline-heightを指定してみましょう。

See the Pen text-line-height by code-school (@code-school) on CodePen.

詰まった印象がなくなり読みやすくなったのではないでしょうか?

 

ちなみに、font-sizeで20pxを指定しline-heightで28pxを指定した場合には上下に4pxずつ行間が指定されます。

 

line-heightのおすすめ設定方法

ここまでline-heightの使い方を紹介しましたが、実際の現場ではpxで指定するのではなく値で指定するのがおすすめです。

pxで指定した場合は絶対的な値になってしまいます。フォントサイズが変われば表示のずれが出てきますのでpxではなく単位なしで指定する方がおすすめです。

具体的な書き方としては、

CSS
1
2
3
4
p{
  font-size:20px;
  line-height:1.5;
}

このように書く方がメンテナンスもしやすいです。

この時の値を1にした場合は上下に余白が生まれませんので、だいたい1.5くらくの設定がおすすめです。

 

Filed Under: CSS

Primary Sidebar

Categories

  • Git (6)
    • Github (2)
  • iOSアプリ開発 (48)
    • Swift (30)
    • Xcode (13)
  • JavaScript (7)
  • Linux (8)
  • nginx (3)
  • Python3 (74)
    • Django (26)
    • Pycharm (5)
  • Ruby (17)
    • Ruby on Rails (6)
  • Scratch (1)
  • SQL (5)
    • MySQL/MariaDB (4)
    • SQLite3 (1)
  • Unity (2)
  • Web制作 (49)
    • bootstrap4 (1)
    • Brackets (5)
    • CSS (35)
    • HTML (4)
  • プログミラングコラム (12)
  • プログラミングスクール (93)
    • 子供向けプログラミングスクール (58)
    • 社会人向けプログラミングスクール (41)
  • プログラミング学習方法 (8)
  • 開発ツール (20)
    • Atom (1)
    • Mac (1)
    • Sketch (16)
[Django]mysqlでmigrateした時にエラーが発生した場合の対処方法

[Django]mysqlでmigrateした時にエラーが発生した場合の対処方法

私的命名規則メモ

私的命名規則メモ

[JavaScript]replaceで文字列の置換をする

[JavaScript]replaceで文字列の置換をする

[JavaScript]addEventListenerを使う

[JavaScript]addEventListenerを使う

[JavaScript]focusとは?使い方を紹介

[JavaScript]focusとは?使い方を紹介

[JavaScript]classListを使って楽にクラスを操作する

[JavaScript]classListを使って楽にクラスを操作する

[JavaScript]querySelectorで要素を取得する、書き換える

[JavaScript]querySelectorで要素を取得する、書き換える

[JavaScript]少ないコードのif文は三項演算子ですっきり書く

[JavaScript]少ないコードのif文は三項演算子ですっきり書く

[JavaScript]==と===の違い

[JavaScript]==と===の違い

[bootstrap]カラムの順番をPC版・スマホ版で入れ替える

[bootstrap]カラムの順番をPC版・スマホ版で入れ替える

[CSS]fontawsomeが◽︎でうまく表示されない時の確認事項

[CSS]fontawsomeが◽︎でうまく表示されない時の確認事項

[MySQL]ローカルサーバーが停止してしまった場合の復活方法

[MySQL]ローカルサーバーが停止してしまった場合の復活方法

[Django]templatesで掛け算の処理をしたい→ないのでフィルタを作って対応

[Django]templatesで掛け算の処理をしたい→ないのでフィルタを作って対応

[Python]super()で親クラスのメソッドを呼び出す

[Python]super()で親クラスのメソッドを呼び出す

[Django]IntegerFieldで最小値、最大値を決める

[Django]IntegerFieldで最小値、最大値を決める