1.5rem(今回の場合は15px)の
line-height: 1.8;
なので1.8倍で27pxがp
要素の行の高さ。そこから自身のテキスト分1.5remを引いてあげた12px分が、均等に上下に割り振られているから、2で割った6pxがテキストの上の部分の余白になる。これを20pxから引いた数字(つまり14px)をh1
のmargin-bottom
に指定してあげれば、余白をぴったり20pxにできるという計算。
全く間違ってない。ただ,メイリオはブラウザで表示させたときにフォントの中心がインラインボックスの中心には合っていない。以下に図を示す(本当はSVGでゴリゴリ説明を書いていたのだけれど,いつまで経っても完成しなかったのでとりあえず手書きのやつで)。
要するにメイリオはデフォルトだとフォント情報諸々からline-height
が1.5になっているのですがやっかいなことにブラウザは上下の空白から均等に空白を削っていくので,line-height: 1;
の時は若干上にはみ出します。その結果がyoruakiさんの例でh1
の調整の「整」の字が若干上にはみ出している理由になります。
で,真の20pxの空白とは一体なんなのか考えたときにインラインボックスの下端ではなくてディセンダラインとかベースラインを基準にして考えた方が美しい気がします。計算するとh1
は下に約2pxのディセンダラインからはみ出た余白があります。次のp
の上には6pxの余白がありますがフォント全体が上に約1px上がっているので実際の余白は約5pxとなります。つまりここではh1
のmargin-bottom
には約13pxを指定すると美しい20pxの余白が空くことになります。
とか適当に書きましたけど,フォントなんて環境依存だしブラウザもその辺適当な実装(適当じゃないけど)でごまかされているので,あまりこだわると大変なことになるので普通にline-height
からfont-size
引いて2で割るくらいでいいと思います。というかその書き方でちゃんとブラウザがフォントメトリクスに注意して表示するべきだと思います。だいたい仮想ボディとインラインボックスがずれて表示されるとかどうかしてると思います。これだからWindowsは。
ちなみにこのサイトはゆるゆるデザインなので1pxのこだわりとかほとんどないです。検索欄のところくらいです。しかも適当実装状態。
2015年6月9日 05時26分44秒 | カテゴリ: 日記・雑記 | タグ: HTML, 組版 | コメント(0) | トラックバック(1)
LPI-JapanがHTML5プロフェッショナル認定試験とかやっていたので,これは勉強しなくても受かりそうとか思い,先々週適当に受けに行ったら普通に落ちました。頭にきたので適当にその辺のサイトとか見たら古い情報ばかり載っていて全然役に立たないサイトが多すぎたのでW3CのHTML5-RECとか読みましたけど,英語で難しかったので何かないかなと思ったら,そういえば「HTML5 Differences from HTML4」があったなと思い読んだらすごく分かりやすかったので,HTML5プロフェッショナル認定試験受ける人はこれ読んだ方がいいと思いました。その辺の参考書とか読むよりわかるし何より私はこれのおかげで合格しました。これは昨日の事です。
要するにW3Cの仕様書読めということです。あと改行せずにだらだら長い文を書くのはやめよう。
JavaScriptよく分からないのでLv.2は勉強しないと受かる気がしない。(function(){})();するだけで合格出来ないのだろうかとか思ったりする(謎)。
2015年6月8日 23時38分02秒 | カテゴリ: 日記・雑記 | タグ: HTML, HTML5, W3C, Web | コメント(0) | トラックバック(0)