CPI x CSS Nite x 優クリエイト 「After Dark」（10）フォローアップ 小山田さん | CSS Nite公式サイト

2014年5月15日 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（10）『マークアップ事情』 のフォローアップとして、小山田 晃浩さん（ピクセルグリッド ）の『IE6がなくなった今だからできる、IE8ベースの新CSSテクニック』セッションのスライドなどをシェアします。

• スライド（PDF、20MB）
• デモデータ「download ZIP」ボタンから取得可能

「IE8ベースの新CSSテクニック」をお話させていただいた小山田です。平日にもかかわらず、ご参加いただきありがとうございました。

"CSS2.1"による新たなレイアウトテクニック、いかがでしたでしょうか。アンケートを拝見しまして、明日から使いたいといったご意見を多数いただき、私自身も、お話できてよかったと感じました。今回紹介した内容はすべて私自身が実際の仕事でお試し済みで、IE8以上で利用可能です。今日からみなさんのお仕事で役立つテクニックです。是非皆さんのお仕事でも使ってみてください。

最後に、アンケート内でご質問いただいた内容にここでお答えいたします。

デメリットを挙げるとすると、

• display:tableにはpaddingが適用できません。(marginはOK)
• display:table-cellにはmarginが適用できません
• display:table-***-groupではpaddingもmarginも適用できません。

ですので必要に応じて、display:table-cellやdisplay:table-*-groupの直下にinnerとなるdivをひとつ設け、そこで余白を適用という流れになります。

例 ```

```

flexboxはCSS3で登場した、新たなレイアウトのためのスタイルです。 display:table; よりもずっと便利です。 しかし、今現在、モバイル端末に限ったとしてもiOSとAndroidの対応はバージョンによってだいぶ差があり、また、当然ながらIE8では利用できません。 今の段階では、display:table; をおすすめします。なぜなら、既に仕様として揺るがないCSS2.1だからです！

最後に、スライド内でご紹介した、弊社の情報サイト、コードグリッドをご紹介させてください。

CSSやJSなど、Webのテクニックについて、毎週3つずつ記事を配信しています。 一部、一般公開のページもあり、ログインすると全ての記事を読めるようになります。(初めの1ヶ月は無料) 今回ご紹介したdisplay: table; をもう少し深く掘り下げた記事もありますのでよろしければ復習にお使いください。

ad10-yomotsu from CSS Nite on Vimeo.