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

では、また!

あなたにおすすめ

ロイヤリティフリーの無料ストックフォト(写真)1+8選... ロイヤリティフリー(ライセンスフリー)の無料写真を集めているサイトも順調に増えてます。全員が発信者となる現在では、こうしたサイトの重要度・便利度は増すばかりですね。 基本的にパブリッックドメイン(商用利用可能・無料・用途の制限なし)で...
リニューアルのケーススタディ、PSDファイルから自動コーディング、ロゴ検索ツール、グラフ用フォント(... こんにちは。 今週の【UX・デザイン】の情報共有です。 UI ・UX アプリのリニューアルのケーススタディ 2年間まったく更新されなかった健康保険アプリのリニューアルの話です。 他社はどのようにしてリニューアルを行...
UI・UXのベストプラクティス、フラットデザインについての実験結果、ATLASSIANの新CI、無料... こんにちは! 今週の【UX・デザイン】の情報共有です。 UI ・UX UI・UXのベストプラクティスまとめ 心理学とマーケティングを双方のスペシャリストであるNick Kolendaさんのサイトです。 彼のサイト内...
「Design Better」ポッドキャスト、CSSでのレスポンシブな端末、無料フォント、日本科学未... お疲れ様です。 今週の【UX・デザイン】の情報共有です。 UI ・UX 「Design Better」のポッドキャスト 他社や海外において、どのようなUI/UXの戦略が実践されているのか、そしてどのような手法がベストプラ...