2019年7月19日シェアツイートシェアブックマーク頑張って文章を書いたのに、文字が詰まっているせいでなんだか見にくい。かっこいいフォントを使ったのに、行間が狭くてきまらない。そんな悩みを解決してくれるのが、line-heightプロパティです。このプロパティを使い行間を指定することで、文章をより読みやすく魅力的なものにすることができます。そこで、今回は、line-heightの使い方を4つの例とともにわかりやすく解説していきます。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。部分的に行間を変える方法まとめ行間を指定するメリット行間を指定する最大のメリットは、文章を読みやすくするところにあります。長くてぎっちりと詰まった文章は読みにくく、せっかく頑張って書いても読者に読んでもらえない原因に。誰が見ても見やすく、読みたくなるような文章を書くには、行間を調節することが重要なポイントとなります。使用するプロパティ行の高さは、スタイルシートにline-heightプロパティを書き込むことで調節することができます。記述方法には、値と単位を組み合わせて指定する方法、値のみで指定する方法、%を使用する方法、normalを指定する方法の4つがあります。負の数を指定することはできません。normalを指定する方法の順番に見てみましょう。値と単位を組み合わせて指定する方法まずは、値と単位を組み合わせて指定する方法を紹介します。数値にpxやemといった単位をつけることにより行間を調節します。下記の例のようにフォントサイズ16pxに対し30pxの行間を指定した場合、14px(上下に7pxずつ)の余白が作られます。pxの他にも、emやxといった単位を指定することもできます。class=”ex1”>フォントを16px<br>行間を30pxに<br>指定しています。</p>■css1.ex1{font-size:16px;line-height:30px;}フォントを16px行間を30pxに指定しています。次は、値のみで指定する方法です。フォントサイズに指定された値をかけた分だけ行間が作られます。下記の場合、フォントサイズ16pxに行間2をかけた32pxが行の高さとなります。class=”ex2”>フォントを16px<br>行間を2に<br>指定しています。</p>■css2.ex2{font-size:16px;line-height:2;}フォントを16px行間を2に指定しています。%を使用する方法そして、%を使用する方法の紹介です。フォントサイズに指定されたパーセントをかけた分、行間が作られます。下記の例では、フォントサイズ16pxに行間250%がかけられているため、50pxが行の高さとなります。class=”ex3”>フォントを16px<br>行間を250%に<br>指定しています。</p>■css3.ex3{font-size:16px;line-height:250%;&}フォントを16px行間を250%に指定しています。normalを指定する方法あわせて、normalを指定する方法を紹介します。Normalでは、初期値を設定することができ、ブラウザの判断により行間が決定されます。class=”ex4”>フォントを16px<br>行間をnormalに<br>指定しています。</p>■css4.ex4{font-size:16px;line-height:normal;}フォントを16px行間をnormalに指定しています。画面のレイアウト上、部分的に行間を変更したい時があると思います。そんな時は、タグとクラスをうまく使い、css適用部分を上手に抜き出すことで対応しましょう。下記の例では、divタグにデフォルト値であるnormalを設定しています。一つ目の文に狭い行間を適用するために、pタグで切り分けをしてsmallクラスを付与しています。同様に、3つ目の文に広めの行間を適用するために、pタグで切り分けをしてbigクラスを付与しています。class="small">小さめに行間を取ると<br>読みにくくなります。</p><br>普通の行間を取ると<br>読みづらく感じる<br>場合があります。class="big">大きめに行間を取ると<br>読みやすくなります。</p></div>■css.normal{font-size:16px;line-height:normal;}p.small{line-height:90%;}p.big{line-height:200%;}小さな行間を設定すると読みにくくなります。普通の行間を取ると読みづらく感じる場合があります。大きめに行間を取ると読みやすくなります。CodeCamp提供のデザインマスターコース当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴はデザインからコーディングまでWebデザイナーに必要なスキルを獲得できるWebデザイナーとして転職・フリーランスも可能になる実際にWebサイトを作るのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。\一流デザイナーのスキルが身に付く/CodeCampの無料体験はこちら▶︎無料体験レッスンの申し込みはスマフォで1分で完了!まとめここまで、line-heightプロパティを用いた行間の設定方法について見てきました。家事も仕事もプログラミングも。【2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。