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)
だいたい1年ぶりくらいに更新しているような気がします。
私はオンライン書店のhontoをかなり利用していて，たぶんJR東日本に次いで金をぶち込んでる気がします。
新刊は発売日前日くらいにステータスが「7-21日」になって購入が出来るようになるのですが，ここで注文すると発売日当日になって「24時間」以内に発送状態になってもそれが発送されず，出版社に問い合わせて入荷するまで待たされます。一度キャンセルして「24時間」の同じ商品を注文するとすぐ発送されます。新刊でなくても後から在庫に入荷されてステータスが「24時間」になってもその在庫は引き当てられずに出版社からの入荷待ちのままとなります。どう考えてもおかしいですが仕様のようです。
あと「7-21日」の商品は時々「入荷事故」になってキャンセルされます。注文から22日経っても入荷されないと事故になるようです。これは仕方がないですがよくある事なので「7-21日」の商品は入荷事故になるかもしれないけどまぁいいかみたいな本しか注文しないようにしています。
「入荷事故」で検索すると結構出てくるので他の人もよく入荷事故になっているようでもはや仕様だと割り切るしかないと思います。というよりもだいたい2週間経っても入荷されないとそのまま入荷事故になる感じがするので普通に買いたい本はその辺の書店で買いましょう。
2015年5月30日 22時58分36秒 | カテゴリ: 日記・雑記 | タグ: honto, ネットショップ, 本 | コメント(0) | トラックバック(0)
最近物覚え悪いし物忘れ激しいと感じるのでもう歳なんだなとか思ってしまいます。何が言いたいかというと旅行したときに乗った路線とか忘れそうなのでここにメモとして残して置けばあとから見返せていいんじゃないかなという話です。
ということなので次からメモ残そうと思います。
2014年5月31日 22時02分52秒 | カテゴリ: 日記・雑記 | タグ: 雑記 | コメント(0) | トラックバック(0)
JR東日本のえきねっとで新幹線の割引きっぷを買おうと思って見てみたら，普通車指定席の35%引きが売り切れで15%引きのものしかなかったのでそっちを買おうとしたのですが，よく考えたらグリーン車の35%引きの方が安かったのでそちらを買いました。
今回のケースは長岡-上野で普通車指定席（繁忙期）の15%引きなので7,380円。グリーン車は繁忙・閑散期関係が無いので35%引きの場合7,140円でした（消費税5%時）。
えきねっとトクだ値（5・10・15%引き）とお先にトクだ値（25・30・35%引き）の場合後者の方が通常期と繁忙期でだいたい価格差がほとんど無いくらいになるので，乗りたい列車の前後で普通車の高い割引率の方が売り切れて無くなってしまったときは別にグリーン車でもいいかみたいな気持ちで買える感じはします。
元々JR東日本のグリーン料金は他のJRよりほとんどの区間で安く設定されていますし，運賃+自由席特急料金の2-3割増しくらいの価格になるのでこの割引率の設定になっているのかなという気もしますけれど。
2014年3月13日 06時11分30秒 | カテゴリ: 日記・雑記 | タグ: JR, 運賃, 鉄道 | コメント(0) | トラックバック(0)