文章を記述していると自動的に改行されたときに、行間を変えるCSSプロパティとしてline-heightというものがあります。line-heightの使い方には少し注意が必要です。そのことについて書いていこうと思います。6月8日記事
多くのサイトを見るとと
ある条件下なら、単位を付けなく記述する例が好ましい
ようなのですが、その条件下で実行してみるも表示は単位を付けてもつけなくてもかわりませんでした・・・。あれ?・・・・・・。うーん。
色々とWEBを見るとemタグと単位のemが混在している様子・・・
どんなことをしたかでも話していきたいと思います。
目次
行間を書いていく際に以下のように
p{ color: #000; font-size: 16px; line-height: 20px; }
font-size: 16px;~line-height: 20px~と書くのはよろしくない。というのは、フォントサイズが変えたい時にline-heightもまた変えなければいけないからだ。ピクセルとしての絶対値は望ましくない。
よって
倍数表示が好ましい
さて、倍数表示としてem表示があります。20pxの1.5emだったら30px分行間があきます。10pxだったら15px分行間があきます。フォントサイズを変更したとしても、16の1.5emの24px分・・・とフォントサイズを買えたとしても自動的に変更されるのはline-heightも変えなくていいので楽です。 しかし、emという単位を指定してよいのでしょうか?
p{ color: #000; font-size: 16px; line-height: 1.5em; }
とあるサイトに emを指定するとそのあとの子要素すべてに適応される現象が起きてしまいます。 よって以下のように指定しましょうと書かれている
p{ color: #000; font-size: 16px; line-height: 1.5;/*%やemを付けずにそのまま書く。*/ }
HTML部
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>行間</title> </head> <body> <div id="wrapper"> <p>ここにだけemを指定している<br>のにも関わらず・・・</p> <div id="middle"> <p>ここにはline-heightを書いてないにも<br>関わらず、継承されてしまう・・・!?</p> <div id="inner"> <p>ここも同じく<br>継承されてしまう・・・!?</p> </div> </div> </div> </body> </html>
CSS部・・・ コメントアウトの部分を色々と変更していきます。
@charset "utf-8"; /* CSS Document */ #wrapper{ margin: 0 auto; width: 1000px; border: 1px solid #F00; } #wrapper p{ color: #000000; font-size: 30px; line-height: 2em;/*ここの部分を2,2em,200%に変える*/ } #middle{ margin: 0 auto; width: 800px; border: 1px solid #F00; } #middle p{ color: #000000; font-size: 20px; } #inner{ margin: 0 auto; width: 600px; border: 1px solid #F00; } #inner p{ color: #000000; font-size:10px; }
結果を表示させてみる
変わんないじゃん。
単位なし2も継承されとるやないかい。
謎です。どなたかコメントください。まあピクセルじゃなく、emや単位なしやパーセントで書けってことだな。
長いものにまかれるか・・・・。よし、みんな単位をつけちゃいかん。
CSSのline-heightで単位を指定しない理由