line-heightの単位はどれがいい?

書き方

単位はどれがいいか。
単位なしがよい。倍率指定を意味する。
例えば1.5倍なら以下のように書く。

p {line-height: 1.5;}

単位をつけないほうがいい理由

font-sizeに対する倍率指定が自然だ。
絶対指定より相対指定がいい。

単位としてはem・rem・%が考えられるが、単位ありだと子要素等への継承時に問題が生じる。
親要素のみにline-height指定する場合、単位あり指定だと、その倍率値自体は継承されない。
継承されるのは、親要素のfont-sizeを基準にした、計算結果としての実数値である。

単位なしの場合のみが、倍率を純粋に継承する。
結論。現実的にはline-heightは単位なし一択である。
想定外のミス表示を防ぐことができるだろう。

その他の基本知識

デフォルト値はnormal。
Chromeの場合、normalは1.5倍。1倍ではない。

a要素にも反映される。
a要素にline-height指定しても、クリック範囲は変わらない。

margin

初期値

相対設定の場合、ブラウザの拡大縮小で、marginも拡大縮小する。
H1タグやpタグには、marginが予め設定されている。
Chromeの場合のpのnarginの初期値は以下のものと予想される。
p {margin:1em 0px;}

単位はどれがいいか

px・em(=%)・rem。
いずれを使用すべきかは状況によると思う。
見やすくする目的で、文字の大きさに対して指定する場合はemがいいだろう。

ブラウザ指定の初期値のまま使用せず、明示的に初期設定していくことが望ましい。

marginの相殺

marginには重要な性質がある。
2つの要素が上下に並んでいて、その両方にmarginが一定数値とられていたとする。
この場合のmarginは相殺されて、値の大きいmarginのみが反映される。
これをmarginの相殺という。
marginの相殺にはいくつかのパターンも有るようだ。

相殺を回避するには

片方の要素に、marginを使用せずpaddingで代用するという手法が考えられる。

書き方

h1 {margin: 0;}

一括指定
margin: 上 右 下 左;
margin、border、padding、すべて順番は一緒。

一部だけ指定。
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

text-transform

  • none。初期値、不変。
  • capitalize。先頭だけ大文字。
  • uppercase。すべて大文字。
  • lowercase。すべて小文字。

大文字に勝手に変換させない

WordPressのテーマなどで、勝手に大文字(または小文字)に変換するものがある。
まったくもって余計なお世話である。
CSSで応対する。

当サイトのテーマでは以下のものに見受けられた。
それぞれ、text-transformを設定する。

  • H1H2H3などH系要素。
  • コメント投稿者名。
    当サイトのテーマでは、「.comment-author .fn」。

h1, h2, h3 {text-transform: none;}
.comment-author .fn {text-transform: none;}

うまくいかない場合は、!importantを追加。

font-familyでは文字の太さに注目

欧文と和文の太さの違い

太文字の場合、欧文英文の文字の太さだけが目立つことがある。
この場合に調整すべきは、font-weightではなく、font-familyである。
Googleなどが使用しているものを使えばよい。
文字の太さの違いが気になる部分に指定する。

.widget h3 {
font-family: arial, sans-serif;
}

borderが表示されない時

太さの指定方法

一括指定。
border: solid 上 右 下 左 #000;

一部だけ指定。
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;

表示されない場合の考えられる理由

効かない場合。

  • border-wjdthのみでは表示されない。
    border-style指定が必要。
  • !importantを忘れた。

書き方

h1 {border: solid 1px #000;}

solidはborder-styleの一つで基本形。省略不可。

!importantは任意

h1 {border: solid 1px #000 !important;}

これを末尾に加えるとうまくいく場合がある。
不要なら入れないほうがいい。