takato（@n8takato）です！
CSSで行間を開ける方法を知りたい
この記事は上記の課題に向けて作成しています。
webサイトを制作していると文章の行間を開けることがあります。
文章の行間はcssで簡単に開けられます。
この記事ではcssで行間を開ける方法を紹介します。
この記事を読むメリット
- CSSで行間を開ける方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
CSSで行間を開ける方法
早速cssで行間を開ける方法を紹介します。
行間を開けることの出来るcssは下記のコートです。
行間を開けられるcssコード
line-height:〇〇;「line-height:〇〇;」で行間を開けられる
上記のコードで行間を開けることが出来ます。
例えば下記のような文章があるとします。
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
このクラスに下記のcssコードを追加すると行間が開きます。
line-height:2.5;親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
行間が開きましたよね。
このように行間を開けることが出来ます。
ちなみに上記文章は両端を揃えるコードも追加しています。
単位は無しがおすすめ
「line-height:〇〇;」では数値の単位をいくつか選択出来ます。
設定出来る単位
- 「%」
- 「px」
- 「em」
- 「単位無し」
- 「normal」←初期値
上記の中で「単位無し」がお勧めです。
「px」がおすすめ出来ない理由
フォントサイズを変更するとline-heightの値も変更しなければいけません。
そのため作業量が若干増えるのが難点です。
「%」と「em」がおすすめ出来ない理由
親要素のフォントサイズを元に行間が計算されます。
そのため親要素と子要素のフォントサイズが違くても同じ行間になります。
「単位無し」は子要素のフォントサイズを元に計算
「単位無し」の場合は子要素のフォントサイズを元に行間が決まります。
親要素に依存しないので、「単位無し」がベストです。
line-heightの値3パターン
「line-height」のオススメな値を3パターン紹介します。
「line-height:1.5;」
「line-height:1.5;」の行間は下記の様な感じです。
「line-height:1.5;」
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
「line-height:2;」
「line-height:2;」の行間は下記の様な感じです。
「line-height:2;」
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
「line-height:2.5;」
「line-height:2.5;」の行間は下記の様な感じです。
「line-height:2.5;」
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
値に悩んだ際は是非参考にしてみてください。
CSSで行間を開けるのは簡単！
最後にまとめです。
cssで行間を開ける方法
line-height:〇〇;上記のコードを追加することで行間を開けることが出来ます。
行間を調整することでデザインが良くなります。
まだ実装したことの無い方は是非やってみてください。
