CSSの魔法を使って無駄なスペースを第八次元に送ってみよう

CSSの魔法を使って無駄なスペースを第八次元に送ってみよう

あのスペース、覚えている?

自分で決めたスペース(余白)ではなく、悪戯のスペース。
一番忙しい時に、とても迷惑なスペース。

そう、そのスペース!

魔法がないとき

魔法がないと困るよね~
例えば、これは魔法抜きのソース:

bitwave-20150806-01
http://codepen.io/anon/pen/VLVeVB

あら!赤いボックスの間に余分なんスペースが悪戯をしに来ました!
困るでしょう!

で、残念なことに、魔法を知らない人で改行を無くす人も多いようです。
こういう風に:

bitwave-20150806-02
http://codepen.io/anon/pen/OVaMaY

ソースが結構読み辛くなる。
嫌でしょう!?

魔法を使って見よう

親のDIVに
font: 0/0 a;
を追加してみましょう。

こういう風に:

bitwave-20150806-03
http://codepen.io/anon/pen/MwqOZw

ほら~!
気持ち良くない?

魔法の説明

今時間が無いので、この魔法に関した量子力学の細かい説明を次回にしましょうね。

今回覚えないといけないのはこれだけ:

font: 0 [←これはfont-size] / 0 [←これはline-height] a [←これはfont-family];

font指定のショートハンドを使った魔法。
偽物のフォントファミリー(a)を入れないとW3CのCSS検証が上手く行かないらしい。

では、また!

Franck VESCHI

Franck VESCHI

シニア UI/UX デザイナー・デベロッパー at 株式会社ショーケース・ティービー
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。

今まで書いた記事:
http://bitwave.showcase-tv.com/author/franck/
Franck VESCHI

コメント