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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

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

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

そう、そのスペース!

魔法がないとき

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

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検証が上手く行かないらしい。

では、また!

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

この記事を書いた人
アバター
Franck VESCHI
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。 今まで書いた記事: http://bitwave.showcase-tv.com/author/franck/

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ