The CSS in 2016

第86回「WEB TOUCH MEETING」
フロントエンド・エンジニア
安倍 英樹

自己紹介

安倍 英樹

写真:安倍英樹
  • フロントエンド・エンジニア
  • ブログ「Another Sky」を運営
    ブログ「Another Sky」ロゴ
  • Twitter @_hideki_a

本日のスライド

http://bit.ly/wtm86-css
※Firefox・Edgeでの閲覧を推奨

本日のセッションの背景

  • 各ブラウザとも新しいCSSの仕様の実装が進んでいる
  • 2016年1月12日(米国時間)からInternet Explorerのサポートポリシー変更が実施された。それにより、Webサイト制作時のターゲットブラウザのベースラインが引き上げられると予想される
Windows 7のInternet Explorer 10に表示されたブラウザアップデートを促す案内画面のキャプチャ

足かせとなっていた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の仕様に触れる

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

Selectors Level 3

jQueryのフォローは不要に

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

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

n個目の子要素

E:nth-child(4n){
    // do something
}
8つの要素があり、4つ目と8つ目の要素が選択された状態
要素選択の概念図1

最後の子要素

E:last-child{
    // do something
}
4つの要素があり、最後の要素が選択された状態
要素選択の概念図2

最後の子要素以外

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

4つのリスト項目があり、最後のリスト項目以外が選択された状態
要素選択の概念図3

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

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

さらにレベルアップ

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

13の要素が1行に5要素ずつ並んでおり、最後の行になる3つの要素を選択している状態
要素選択の概念図4

マルチカラムレイアウト(段組)

幅広画面でも文字を読みやすく

概要

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

Web Designingの紙面から、マルチカラムレイアウト部分を抜粋した図
マルチカラムレイアウトのサンプル(Web Designingの紙面より)

ブラウザ対応状況

利用する時のポイント

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

参考:Graceful Degradation

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

縦書き

Webの世界に和のテイストを

概要

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

ブラウザ対応状況

利用する時のポイント

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

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

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

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

  • 優れた縦書きWebデザインを選考するアワード
  • 2016年2月8日(月)までに応募を
縦書きWebデザインアワードのサイトのキャプチャ

フレキシブルボックス

レイアウトの強い味方

概要

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

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

参考:デモ4の注意点

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

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

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

html5jのサイトより部活動部分の表示をキャプチャした図。部のロゴ・見出し・説明分の順にレイアウトされている。
見出しの前に画像があるパターンのサンプル(HTML5J
  • 見出しの前に画像をマークアップするのはなんとなく気持ち悪い
  • 今まではpositionなどで対応していたが、orderプロパティで無難にレイアウトできるようになる
マークアップは見出し・画像の順だが、画像要素へorderプロパティ -1を指定することで表示は画像・見出しの順になる
orderプロパティで画像の表示位置を逆転
.club{
    display: flex;
    flex-direction: column;
}

.club .image{
    order: -1;
}

使いどころ

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

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

ブラウザ対応状況

利用する時のポイント

CSS Shapes

四角いレイアウトに変化を

概要

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

ブラウザ対応状況

利用する時のポイント

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

まとめ

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

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

おまけ…このスライドの秘密

  • 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"を使用しました。)