The CSS in 2016

• 各ブラウザとも新しいCSSの仕様の実装が進んでいる
• 2016年1月12日（米国時間）からInternet Explorerのサポートポリシー変更が実施された。それにより、Webサイト制作時のターゲットブラウザのベースラインが引き上げられると予想される

足かせとなっていたIE8がターゲットブラウザから外れ、普段の業務でも新しいCSSの仕様をより利用しやすい状況になってきている

• ベースをIE9とするかIE11とするかはサイト次第
• Vista自体のサポート期限…2017年4月11日も近づいている

Android 4.3以前の「ブラウザ」についても、他のブラウザへの移行が推奨されている
（Google、古いAndroid向けWebViewパッチ打ち切りについて説明）

Android 4.3以前を使っているユーザーに対しては、AndroidにプリインストールされているWebブラウザではなく、Chrome（Android 4.0以降に対応）あるいはFirefox（Android 2.3以降に対応）をGoogle Playからダウンロードして使うよう勧めた。

• 今すぐ使うことができる便利なCSSの仕様、この先使うことができるようになるCSSの仕様に触れる

細かいコードは説明しないので、どのようなレイアウトになるか等つかんでください

n個目の子要素・最後の子要素

• IE8がターゲットブラウザから外れることにより、CSSのみで表現可能に
  $("selector").addClass(".last-child"）のようなjQuery(JavaScript)のコードは不要

n個目の子要素

E:nth-child(4n){
    // do something
}

最後の子要素

E:last-child{
    // do something
}

最後の子要素以外

例えば、リストの最後だけ下方向マージンはなし、それ以外は下方向マージンを付ける場合

否定疑似クラス:not(X)と最後の子要素を表すE:last-child疑似クラスの合わせ技。

li:not(:last-child){
    margin-bottom: 0.5em;
}

さらにレベルアップ

グリッドの最初 or 最後の行だけスタイルを当てたい場合

• Targeting first and last rows in CSS grid layouts

概要

多くの雑誌が採用しているように、文章を一行幅いっぱいにレイアウトせず、複数のカラムに分けてレイアウトする

ブラウザ対応状況

• CSS3 Multiple column layout

利用する時のポイント

• 非対応の環境では単純に一行に表示されるので、積極的に利用できる（Graceful Degradation）
• column-widthを指定すれば、画面幅に応じてよしなに表示してくれる
• スクリーンの場合は高さに留意する（デモ）

参考：Graceful Degradation

• 最近の環境を基準にデザインを作成
• 古い環境にはデザインの再現レベルを落とす

概要

• 新聞・小説のような縦書きがブラウザ上でも再現できる
• Firefox以外は2013年頃は既に基本的な縦書きが利用できていた
• 2015年9月リリースのFirefox 41から標準で縦書き文章のレイアウト機能が有効に

ブラウザ対応状況

• CSS writing-mode property

利用する時のポイント

• 要素の幅が狭い場合に注意が必要かもしれない
• 縦書きの文章が長い場合、画面右方向に向かってスクロールが発生する（つまり文章の末尾が最初に見えてしまう）

マルチカラムレイアウトを用いた長文の表示

column-widthを指定することで、新聞や雑誌のように段になって表示される
※ただし、今のところ上手くいかないブラウザもある

参考：縦書きWebデザインアワード

• 優れた縦書きWebデザインを選考するアワード
• 2016年2月8日（月）までに応募を

概要

• floatやdisplay: inline-block;でレイアウトを頑張るのはしんどい場面がある
• 上下中央配置もなかなか手間

これらの問題をフレキシブルボックスで解決できる

参考：デモ4の注意点

• 「詳細を見る」のようなリンクラベルは具体性に欠け、アクセシブルでない
• 同一ページへのリンクが2回マークアップされているのも混乱が生じる可能性がある

ECサイトなどでよくある例

見出しの前に画像があるパターン

• 見出しの前に画像をマークアップするのはなんとなく気持ち悪い
• 今まではpositionなどで対応していたが、orderプロパティで無難にレイアウトできるようになる

.club{
    display: flex;
    flex-direction: column;
}

.club .image{
    order: -1;
}

使いどころ

• ヘッダーのレイアウト
• ナビゲーションのレイアウト
• コンテンツエリアのモジュールのレイアウト

いろいろな場面で活用できるこれからの強い味方

ブラウザ対応状況

• Flexible Box Layout Module

利用する時のポイント

• 非対応のブラウザ…IE9をどうするか？ 角丸が再現できないレベルの話ではないので…
• A Complete Guide to FlexboxやFlexbox Cheatsheet Cheatsheetを見るとプロパティの意味がつかみやすい

概要

（イメージとして）Webは四角いボックスの中で表現される世界だった。そこに少し変化をもたらすCSSの仕様

ブラウザ対応状況

• CSS Shapes Level 1

利用する時のポイント

• まだ非対応のブラウザも多いが、非対応のブラウザでは矩形で表示されるだけなので、これもGraceful Degradationの考え方が適用できる

• 新しい技術を利用すれば、難しかったレイアウトが簡単に、また今までに無かったレイアウトも可能になる
• 今までの知識で頑張って作る事も可能だけれど、新しい仕様が使える部分は使ってみよう
• 一度に覚えるのは大変なので、日々少しずつ新しい仕様を取り入れられないか考えてみよう

今日取り上げなかったトピック

• clip-pathとかも面白い
• 22 Essential CSS Recipes
• フォローアップメールで

参考資料（動画）

• Modern Layouts: Getting Out of Our Ruts with Jen Simmons
• 第61回 HTML5とか勉強会『CSS』

• JavaScriptを使っていません
• CSS Scroll Snap Points Moduleを用いており、スライド1画面毎にいい感じにスクロールが止まります
  （※2016年1月20日現在、Firefox・Edge・IE11が対応）
• ネイティブのスクロールを活かしているのでアクセシブル！
• 印刷もそこそこいい感じになるようにCSSを書いています

.slide-container{
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: mandatory;
}

参考とおことわり

スクロールした際、URLにhashを付けた方が良いと思っています。なぜならリンク先からスライドに戻った際にスライドの先頭が表示されてしまうためです。専用のイベントが発生すればベストなのですがなさそうでした。
（今回はCSSのセッションなのでスクリプトを使わずに仕上げたかったため、やむなくtarget="_blank"を使用しました。）