CSS Nite LP39 フォローアップ（6）高津戸 壮さん（ピクセルグリッド） | CSS Nite公式サイト

2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『柔軟なコンポーネント設計のためのCSS』セッションのスライドなどをシェアします。

• HTML
• HTMLのzip
• PDF

フォローアップ

「柔軟なコンポーネント設計のためのCSS」を担当した高津戸です。

頂いた質問にお答えいたします。

> スライドのツールが知りたいです

Reveal.jsという、HTMLで出来たプレゼンテーション用のフレームワークです。

http://lab.hakim.se/reveal-js/#/

> blockでmarginとpaddingの選択に迷う

あくまで私個人の考えですが、下にはpadding、上にはmarginで余白を取っています。この選択をしている理由は以下です。

# marginの相殺が起こらないようにするため

marginの相殺は便利ですが、ブロック間の余白を取りたい時、不都合があることがあります。
例えば、ただdivのmargin-bottomに10pxを指定した場合、これは後続する要素のmargin-topと相殺されますが、左右にfloatしたdivにmargin-bottomを指定した場合、これは後続する要素のmargin-topと相殺されません。
また、display:tableな要素についてもmarginの相殺が行われません。
これは仕様的に正しい動作ではあり、有効に利用できるケースも多いですが、相殺される場合、相殺されない場合が入り混じると、混乱の原因となってしまいます。

# 最後の要素のmargin-bottomは、背景色を消す

以下の様なケースだと、marginで余白をとった前者は、子要素の最後のmargin-bottom部分にて、背景色を描画しません。
http://codepen.io/takazudo/pen/JoOZvN

これは、heightがautoな要素内の最後の要素の下marginは、代わりに親要素の下marginとして扱われるためです。

http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://adiary.org/theme_doc/margin
http://kojika17.com/2012/08/margin-of-css.html

そのような理由で、たとえdiv等が増えてしまったとしても、ブロックの終端の下余白を付けたい場合、それをpaddingにて実装しています。

===

> 下余白派ですが、上と下、どちらが調整しやすいでしょうか

私は昔から下余白の方が調節しやすいと考えていますが、その理由は以下のようなものです。

# 上余白パターンだと、初めのブロックの上余白を殺さないといけないから

上余白パターンだと、エリアの初めに配置される要素の上マージンをなんかしらの方法でゼロにしないと、いきなり大きく空いてしまいます。IE6が対応ブラウザとして当たり前のように入っていた時代は、:first-childが使えなかったため、これを殺すのがやや手間でした。

それに対し、下余白であれば、最後に余白ができてしまいますが、大体において、メインエリア等の最後の部分というのは、大きく余白を空けたいケースがほとんどでした。この余白が問題になるケースはほとんど無いように思います。

# 上余白パターンだと、見出しが連続した時にややこしいから

セッションの中でも軽く述べた通り、見出しの上には比較的大きな余白を取りたいというケースが多いと、個人的に考えています。上余白パターンだと、これを簡単に実現できます。その代わりに、大見出し、中見出し、小見出し…といった具合に、見出しが連続すると、見出し間が空き過ぎ、スカスカになってしまいます。これを何とかするには追加クラスを指定して余白をどうにか調節する等の実装方法になるでしょうが、それは複雑な実装であるように感じます。

また、これもセッションの中で軽く触れましたが、見出しの下には、余白をあまり設けないほうが、見出しとそれに相当する内容が紐付けられているようにみえるため、デザインとしてはベターなのではないか？という個人的な考えがあります。この考えを実現するには、下余白でブロック間の余白を表現したほうが自然です。

上記のような理由で、私個人としては、余白を下に取るパターンを採用しています。ただ、これはあくまで私個人のデザイン視点が含まれた考えになるため、ご参考までに。

動画

CSS Nite LP39「柔軟なコンポーネント設計のためのCSS」 from CSS Nite on Vimeo.