「CSSのline-heightで単位を指定してはいけないのか？」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
文章を記述していると自動的に改行されたときに、行間を変えるCSSプロパティとしてline-heightというものがあります。line-heightの使い方には少し注意が必要です。そのことについて書いていこうと思います。6月8日記事
~
多くのサイトを見るとと&color(red){ある条件下なら、単位を付けなく記述する例が好ましい}ようなのですが、その条件下で実行してみるも表示は単位を付けてもつけなくてもかわりませんでした・・・。あれ？・・・・・・。うーん。
~
~
色々とWEBを見るとemタグと単位のemが混在している様子・・・~
どんなことをしたかでも話していきたいと思います。
~
~
目次
#contents
~
~
----
~
*line-heightにpx指定はいけない。好ましくない例。
行間を書いていく際に以下のように
p{
color: #000;
font-size: 16px;
line-height: 20px;
}
font-size: 16px;～line-height: 20px～と書くのはよろしくない。というのは、フォントサイズが変えたい時にline-heightもまた変えなければいけないからだ。ピクセルとしての絶対値は望ましくない。
よって&color(red){倍数表示が好ましい}
~
*emが主流だったが・・・これで本当によいのか？
さて、倍数表示としてem表示があります。20pxの1.5emだったら30px分行間があきます。10pxだったら15px分行間があきます。フォントサイズを変更したとしても、16の1.5emの24px分・・・とフォントサイズを買えたとしても自動的に変更されるのはline-heightも変えなくていいので楽です。&color(red){しかし、emという単位を指定してよいのでしょうか？}
p{
color: #000;
font-size: 16px;
line-height: 1.5em;
}
~
*pxやemや%より単位を指定しないほうが望ましいらしい！？
とあるサイトに&color(red){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部・・・&color(red){コメントアウトの部分を色々と変更していきます。}
@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;
}
結果を表示させてみる
~
**結果 2em
#image(width=600,2em.png)
**結果 200%
#image(width=600,200percent.png)
**結果 2のみ
#image(width=600,2.png)
**まとめ
変わんないじゃん。&color(red){単位なし2も継承されとるやないかい。}
~
~
謎です。どなたかコメントください。まあピクセルじゃなく、emや単位なしやパーセントで書けってことだな。
[[CSSのline-heightで単位を指定しない理由:http://qiita.com/4cres/items/5ab4b07e6b5cdfc8f799]]
#comment
文章を記述していると自動的に改行されたときに、行間を変えるCSSプロパティとしてline-heightというものがあります。line-heightの使い方には少し注意が必要です。そのことについて書いていこうと思います。6月8日記事
~
多くのサイトを見るとと&color(red){ある条件下なら、単位を付けなく記述する例が好ましい}ようなのですが、その条件下で実行してみるも表示は単位を付けてもつけなくてもかわりませんでした・・・。あれ？・・・・・・。うーん。
~
~
色々とWEBを見るとemタグと単位のemが混在している様子・・・~
どんなことをしたかでも話していきたいと思います。
~
~
目次
#contents
~
~
----
~
*line-heightにpx指定はいけない。好ましくない例。
行間を書いていく際に以下のように
p{
color: #000;
font-size: 16px;
line-height: 20px;
}
font-size: 16px;～line-height: 20px～と書くのはよろしくない。というのは、フォントサイズが変えたい時にline-heightもまた変えなければいけないからだ。ピクセルとしての絶対値は望ましくない。
よって&color(red){倍数表示が好ましい}
~
*emが主流だったが・・・これで本当によいのか？
さて、倍数表示としてem表示があります。20pxの1.5emだったら30px分行間があきます。10pxだったら15px分行間があきます。フォントサイズを変更したとしても、16の1.5emの24px分・・・とフォントサイズを買えたとしても自動的に変更されるのはline-heightも変えなくていいので楽です。&color(red){しかし、emという単位を指定してよいのでしょうか？}
p{
color: #000;
font-size: 16px;
line-height: 1.5em;
}
~
*pxやemや%より単位を指定しないほうが望ましいらしい！？
とあるサイトに&color(red){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部・・・&color(red){コメントアウトの部分を色々と変更していきます。}
@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;
}
結果を表示させてみる
~
**結果 2em
#image(width=600,2em.png)
**結果 200%
#image(width=600,200percent.png)
**結果 2のみ
#image(width=600,2.png)
**まとめ
変わんないじゃん。&color(red){単位なし2も継承されとるやないかい。}
~
~
謎です。どなたかコメントください。まあピクセルじゃなく、emや単位なしやパーセントで書けってことだな。&color(red){長いものにまかれるか・・・・。よし、みんな単位をつけちゃいかん。}
[[CSSのline-heightで単位を指定しない理由:http://qiita.com/4cres/items/5ab4b07e6b5cdfc8f799]]
#comment
