CHROMA

世の中の "当たり前" を確認する

CSS レイアウト関連の内 4 つをみてみる

Dev

CSS Property Advent Calendar 2013 14日目の記事。
明日は @watilde さん。

先日のHTML5 CONFERENCE 2013 の中で "CSS Regionsを使った新しいCSSレイアウトを作る方法" というセッションを聞いて依頼、CSS レイアウトが気になったので少し調べてみました。
今回は Flexible Box Layout, Multi-column Layout, CSS Regions, CSS Shapes を調べました。

各 CSS レイアウト の概要を書く際、Microsoft Developer Network の CSS セクション を参考にさせて頂きました。

参考サイトにデモが上げられているものが、こちらに関しては Google Chrome Canary 動作を確認しました。 また、Canary で各サイトのデモを確認する際には、アドレスバーに chrome://flagsを入力し、設定ページで "試験運用版のウェブ プラットフォームの機能を有効にする" という設定を有効にする必要があります。

Flexible Box Layout

f:id:thleap:20131215001211p:plain

ブラウザのサポート状況

flexible box | Can I use

Flexible Box Layout の概要

W3C の2012年 9月付の草案を元にこの概要を書いています。2009年の仕様や 2011年の仕様からはプロパティ名（ box-pack: start; => justify-content: flex-start; など）やプロパティに指定する値の名前（ display: box; => display: flexbox; など）が変わっているものがあります。

Flexible Box を使うことで、ウィンドウの可変によって生じる複雑なレイアウトの変化に応じた配置の組替えやモジュールの位置合わせを HTML を大きく書き変えること無く行うことができます。位置を細かく設定する為にサイズ等の指定が必要な float を使ったレイアウト組みもありますが、レスポンシブデザインのように柔軟な変更が必要なレイアウト組みが想定される際には Flexible Box を使うことを考えてみてはいかがでしょうか。

Flexible Box では、CSS 2.1 で定義された block レイアウト、inline レイアウト、table レイアウト、positioned レイアウトの基本レイアウトモードに加えて、今後は新たなレイアウトモードとして flex レイアウトが利用できるようになります。

Flexibli Box を使用するために、まずは display　プロパティに flex または inline-flex を指定して Flexbox コンテナー をつくる必要があります。display: flex; を指定した場合はブロックレベルのコンテナーとなり、その親コンテナー内の利用可能な幅全体を使います。 display: inline-flex; を指定した場合はコンテナーがインラインレベルのように動作するようになります。 このコンテナーの子要素は Flexbox アイテム となり、コンテナーに指定する各プロパティの指定でアイテムの順序や折り返し設定、幅や間隔の指定が適用されるようになります。また、このアイテム自身にも伸縮倍率の指定（ flex-grow ・ flex-shrink ）が行えます。

Flexbox コンテナーには次のようなプロパティを指定することができます:

  • 子要素の配置方向を指定できる flex-direction プロパティ
  • 子要素の折り返し設定が行う flex-wrap プロパティ
  • flex-direction と flex-wrap の指定をショートハンドで指定できる flex-flow プロパティ（指定の順序問わず）
  • flex-direction で指定した子要素の配置方向をベースに、様々なレイアウト揃えを行う justify-content プロパティ
  • justify-content の垂直方向の軸のレイアウト揃えを行う align-items プロパティ
  • 複数行のときに行揃え設定する align-content プロパティ

Flexbox アイテムには次のようなプロパティを指定することができます:

  • 伸びる倍率を指定できる flex-grow プロパティ
  • 縮む倍率を指定できる flex-shrink プロパティ
  • ベースとなるサイズを指定できる flex-basis プロパティ
  • flex-grow , flex-shrink , flex-basis の指定をショートハンドで指定できる flex プロパティ（指定は flex: {flex-grow} {flex-shrink} {flex-basis}; の順）
  • 個別のアイテムに対して垂直揃えを行う align-self

Flexbox コンテナー、アイテムにどのようなプロパティを指定し、表示はどのようにされるのか？ということについては、今回この概要を書く上でも参考にさせて頂いた可変ボックス レイアウトや今こそ未来！CSS3のFlexboxを基本から理解して、使い倒そう！の記事のほうがより詳細に書かれていますので、気になる方はこちらをご覧ください。

参考

Multi-column Layout

f:id:thleap:20131215001226p:plain

ブラウザのサポート状況

regions | Can I use

Multi-column Layout の概要

Multi-column Layout （段組レイアウト）を使うことで、列間に区切りのスタイルが指定された複数の列にコンテンツを流し込むができます。また、ブラウザのウィンドウサイズの変更に合わせて列数を変更させることができます。

列幅と列数の指定には次のプロパティを使います:

  • 列幅の指定を行う column-width プロパティ
  • 列数の指定を行う column-count プロパティ
  • column-width , column-count の指定をショートハンドで指定できる columns プロパティ（指定の順序問わず）

列間のセパレーションの指定には次のプロパティを使います:

  • 複数列での列間の余白の幅指定を行う column-gap プロパティ
  • 複数列での列間セパレーションの幅指定を行う column-rule-width プロパティ
  • 複数列での列間セパレーションの色指定を行う column-rule-color プロパティ
  • 複数列での列間セパレーションのスタイル指定を行う column-rule-style プロパティ
  • column-rule-width , column-rule-color , column-rule-style の指定をショートハンドで指定できるcolumn-rule プロパティ（指定は `column-rule: {column-rule-width} {column-rule-style} {column-rule-color}; ）

column-rule プロパティは border プロパティで使える値と同じものが指定できます。

列間のどこでコンテンツを区切るかを指定するには次のプロパティを使います:

  • 複数列で、コンテンツブロックの前に列区切りを挿入する break-before プロパティ
  • 複数列で、コンテンツブロックの後に列区切りを挿入する break-after プロパティ
  • 複数列で、コンテンツブロック内に列区切りを挿入する break-inside プロパティ

blockquote 要素内では列区切りを挿入することはできません。

コンテンツの列のまたがりを指定するには次のプロパティを使います:

  • 複数列で、コンテンツがまたがる列の数を指定するには column-span プロパティ

列コンテンツの長さを指定するには次のプロパティを使います:

  • 列コンテンツの長さを指定を行う column-fill プロパティ

参考

CSS Regions

f:id:thleap:20131215001240p:plain

ブラウザのサポート状況

regions | Can I use

CSS Regions の概要

CSS Regions を使うことで、コンテンツとレイアウトを完全に切り離すことができ、複雑なレイアウトの変更に合わせてコンテンツが含まれるマークアップまで大幅に変える必要がなくなります。

CSS Regions 使うには、最初にコンテンツ用の HTML とレイアウト用の HTML を分けて書く必要があります。

コンテンツをレイアウトに流しこむには次のプロパティを使います:

  • コンテンツ側に flow-into プロパティ（値には レイアウト側と合わせて一意のクラス名を指定）
  • レイアウト側に flow-from プロパティ（コンテンツ側と同名の値を指定）

参考

CSS Shapes

f:id:thleap:20131215001251p:plain

ブラウザのサポート状況

CSS Shapes Support | adobe.github.io/

CSS Shapes の概要

CSS Shapes を使うことで、これまで四角形の周囲にしかコンテンツの回り込みが行えませんでしたが、円形や多角形、他の様々なシェイプに合わせたコンテンツの回り込みが可能になります。また、シェイプに合わせて中にコンテンツを流しこむこともできるので、強い斜め線を意識したデザイン上でテキストを斜めのシェイプに流し込んで、文章にもデザインの形状を反映させることなどもできます。

シェイプに合わせてコンテンツを回りこませたり、流しこむには次のプロパティを使います:

  • シェイプの外側にコンテンツをとる shape-outside プロパティ
  • シェイプの内側にコンテンツをとる shape-inside プロパティ

シェイプの抽出範囲やシェイプに余白を設けるには次のプロパティを使います:

  • シェイプのアルファチャネルのしきい値を指定する shape-image-threshold プロパティ
  • シェイプに余白を設ける shape-margin プロパティ

参考

最後に

今回張り切って焦らして頂きました。最初この記事に含めようと考えていた Grid Layout, CSS Exclusions まで記事に載せることができず、また各レイアウトの実装を行ってデモも載せようと思っていましたがこちらも結局時間が間に合わず.. 。
Advent Calendar は前日に記事ができとかないと本当にダメですね。

上記、今回記事に載せれなかった内容は今年中には別の記事で書こう。

あと記事書きながら「これ CSS Property の記事？」ってのは思いました。