CSSマークアップの未来

CSS3に関する本の著者であるPeter Gastonは、 The future of CSS layoutsという記事を発行しました。この記事の翻訳は、以下に示すHabréの読者向けです。



CSSのすべての驚くべき機能にもかかわらず、ページレイアウトの基本原則を実装するには十分ではありません。 ただし、より動的なページを作成するための追加機能はすでに表示され始めています。



数年の約束の後、CSS3はようやくスタイルに優れました。 彼は一連の新しいツールを武器庫に追加し、角の丸み、グラデーション、透明度、要素の変換、アニメーションなどを提供しました。 他に何が私たちの目を喜ばせることができますか？



次のCSSの問題はマークアップです。 これまで、浮動ブロック、負のインデントを使用した相対的な位置とトリックを使用してこれを実行してきましたが、これを実装するのは難しく、結果は標準の2列または3列のマークアップのように見えました。



W3Cコンソーシアムとブラウザメーカーはこれらの問題を認識しており、多くのソリューションに取り組んでいます。 その中でもリーダーは（当然のことですが）Internet Explorerです。 IE10は、CSSマークアップの新時代の先駆けとなり、以前は達成できなかった機能を使用して、優れたダイナミックで魅力的なサイトを作成できるようになります。



この記事では、著者は、すでに実装されているものから純粋に理論的なものまで、開発の個々の段階で使用したいさまざまなマークアップ方法を検討します。 （少なくとも現在の形式では）将来的にすべてを使用することはできないかもしれませんが、これらのメソッドを見てCSSマークアップの将来を理解する価値があります。

スピーカー

複数の列間でコンテンツを配布することは印刷の主要な要素であり、 CSS Multi-ColumnsモジュールはWebに同じ機会を提供します。 列を作成するには、2つのメソッドを使用できます。各メソッドは（親要素の）異なるプロパティを使用します。 最初のケースでは、列の数が直接設定され、その中にテキストを配布する必要があります。 たとえば、次のコードは同じ幅の3つの列を作成し、親要素の幅全体を埋めます。

div { column-count: 3; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目の方法では、列の幅が固定され、親要素の幅を満たすまで列が繰り返されます。 この例では、列の幅が140pxに設定されています。つまり、800px幅のブロックに5つの列が表示されます。

 div { column-width: 140px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルトでは、列間のギャップは1emですが、 column-gapプロパティを使用して変更できます。 column-ruleを使用して列の間に分割線を配置することもできます。構文はborderプロパティに似ています。 以下のコードは、幅が2ピクセルの破線を作成し、列間のインデントを28ピクセルに設定します（セパレーターは中央に配置されます）。

 div { column-gap: 28px; column-rule: 2px dotted #ccc; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果を確認したい場合は、CSS列の実装の例をご覧ください。 3つの列を表示するには、Firefox、Chrome、Safari、Opera 11.1またはIE10 Platform Preview （IE10PP）を使用する必要があります。 または、以下のスクリーンショットをご覧ください。







列を使用してさまざまなことができます。 それらの実際的な使用例は、Wikipedia のnotesセクションにあり、 column-countが使用されています。 Firefoxでは、マルチカラムは-moz-プレフィックスで実装され、ChromeおよびSafariでは-webkit-プレフィックスで、Opera 11.1およびIE10PPではプレフィックスなしで実装されます。

フレキシブルボックス

フレキシブルボックスレイアウト （FlexBox）モジュールを使用すると、高さと幅の値を計算する必要なく、親内の要素のサイズを自動的に変更できます。 たとえば、2つの子があり、両方のブロックの幅が同じになるように、親（幅が異なる）を埋めたいとします。 これはパーセント値を使用して実行できますが、境界線とインデントの場合、タスクは困難になります。 FlexBoxを使用したソリューションははるかに簡単です。

 .parent { display: box; } .child-one, .child-two { box-flex: 1; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは、2つの子を親の内側に水平に配置し、それらを同じ幅にします。 実際には、 box-flex値は割合として機能し、空の領域が考慮され、この値の割合で子に分配されます。 危機にatしているものを理解するには、次のコードを検討してください。

 .child-one { box-flex: 1; } .child-two { box-flex: 2; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2つの要素が親の内部に分散されると、 .child-oneの各ピクセルごとに.child-twoの幅が2ピクセル増加します。 親の幅が260ピクセルで、各子が100ピクセルの場合、残りの60ピクセルは.child-twoと.child-oneの 20px が割り当てられるように分配されます。



この概念は、 FlexBoxを例として使用すると理解しやすくなります （Firefox、Chrome、Safari、またはIE10PPが必要です）。 ブラウザウィンドウのサイズを変更して、スケーリングに注意してください。



要素の動的なサイズ変更と同様に、FlexBoxではプロパティを親に適用して、空白の分布を制御し、子要素の位置を設定することもできます。 box-alignプロパティは子の幅に影響し、ペアのbox-packプロパティは子の高さに影響します。 以下に、これがどのように機能するかを示します。

 .parent { box-align: center; box-pack: center; display: box; height: 200px; width: 200px; } .child { box-flex: 0; height: 100px; width: 100px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.child要素のbox-flexプロパティ値は0であるため、動的にサイズ変更されることはありません。また、親要素の高さと幅の半分になり、 box-alignと箱パック 。 つまり、子ブロックは垂直方向と水平方向の中央に配置されます。







現時点では、FlexBoxはFirefox、Chrome、Safari、IE10PPに適切なブラウザープレフィックス（ -moz- 、- webkit- 、および-ms- ）で実装されており、JS Polyfill、Flexieも試してみることができます。 構文が変更されたことを覚えておいてください。詳細は最後の仕様にあります。

テーブル

IE10PPの真新しいのは、テーブルレイアウトシステムです。 使用する前に、行と列を決定する必要があります。 列の場合、長さの値、 自動キーワード、および新しい測定単位fr （ fraction 、relative amountの略）を使用できます。 この例を見てください：

 div { display: grid; grid-columns: 1fr 3fr 1fr; grid-rows: 100px auto 12em; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは、3つの列のテーブルを作成します。その中央は、左右に3倍の幅があり、3行からなります。上部の高さは100ピクセル、下部の長さは12em、コンテンツの長さに応じて中央の高さが自動的に拡大します。



テーブルができたので、そこにコンテンツを配置できます。 HTML5要素を使用すると、非常に単純なページレイアウトを実際に作成できます。

 header { grid-column: 1; grid-column-span: 3; grid-row: 1; } nav { grid-column: 1; grid-row: 2; } article { grid-column: 2; grid-row: 2; } aside { grid-column: 3; grid-row: 2; } footer { grid-column: 1; grid-column-span: 3; grid-row: 3; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードを見ると、ページのコンテンツがそれぞれgrid-rowプロパティとgrid-columnプロパティを使用して行と列に分散されていることがわかります。 article要素は、2行目の2列目、つまり3x3テーブルの中央に配置されます。 column-spanプロパティは、 ヘッダー要素とフッター要素にも使用され、3つの列すべてに引き伸ばされます（ここでは使用されなかったrow-spanプロパティも同様に機能します）。



CSSグリッドの例でデモマークアップを確認できますが、IE10プラットフォームが必要です。 そうでない場合は、スクリーンショットをご覧ください。







上記のプロパティはIE10PPで完全に実装されているため、今すぐ試すことができます。 ただし、多くのプロパティはまだ実装されていません。

模様

テーブルビューへの別のアプローチは、 テンプレートレイアウトモジュールです。 わずかに異なる構文を使用します。最初に、アルファベット文字と位置プロパティを使用してブロックに位置を割り当てる必要があります。

 header { position: a; } nav { position: b; } article { position: c; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

位置を割り当てたら、一連の文字を使用してマークアップを作成できます。 各シーケンスは行に相当し、シーケンス内の各文字は列です。 たとえば、1行3列からテーブルを作成するには、次を使用できます。

 div { display: 'abc'; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、3つの均等に分散された要素が水平線で表示されます。 ただし、文字を繰り返して列を展開したり、異なる行の同じ位置にある同じ文字を使用して行を展開したりできます。 次の例では、 nav要素が2つの行に重なっており、 ヘッダーと記事が2つの列に重なっています（コードは明確にするためにフォーマットされています）。

 div { display: 'baa' 'bcc'; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テンプレートレイアウトはブラウザではまだ使用されていませんが、jQueryには、実験を可能にする優れたポリフィルスクリプトが既にあります 。これは、参照例で使用されました。 結果はテーブルレイアウトの例と同じに見えますが、コードはまったく異なります。



デモページはJavaScriptを使用しているため、最新のすべてのブラウザーで動作するはずです。 次の例のように、テーブルレイアウトはテンプレートの構文もサポートする場合があります。

 header { grid-cell: a; } article { grid-cell: b; } div { display: grid; grid-template: 'a' 'b'; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

機能面では、このコードはテンプレートレイアウトのプロパティと同じですが、まだ実装されていません（または実装されていない可能性があります）。

配置されたフローティングブロック

現在のフロートプロパティを使用すると、テキストは要素の左または右に流れることができますが、IE10PPの高度なプロパティを使用すると、任意の場所に配置することでフローティング要素を調整できます 。 これを行うには、 floatプロパティの新しい値が必要でした。

 div { float: positioned; left: 200px; position: absolute; top: 100px; width: 250px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは、左側に200px、親の上部に100pxに位置する250px幅の要素を作成します。 デフォルトでは、親内のその他のコンテンツは、配置された要素の周りを四方から流れますが、これは、たとえば、テキストが要素の上下のみで流れている場合など、 wrap-typeプロパティのさまざまな値で変更できます。

 div { wrap-type: top-bottom; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テーブルに要素を配置し、その要素の周囲にコンテンツを四方から流すことで、配置とテーブルレイアウトのプロパティを組み合わせることができます。

 div { float: positioned; grid-column: 2; grid-row: 2; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

IE10PPをお持ちの場合、配置されたフローティングブロックのデモを見ることができます 。 そうでない場合、結果は下のスクリーンショットに示されていますが、現在のCSS機能を実装することは不可能です。

除外

floatプロパティでは、長方形要素のみを合理化できますが、ドキュメントでは形状の周りのフローを提供しています。 このアイデアは、 CSS Exclusionsモジュールを使用した後に生まれました。 2つの重要なプロパティがあります。 最初のwrap-shapeを使用すると、コンテンツによって合理化されたブロックの形状を定義する楕円、長方形、または多角形を作成できます。次に例を示します。

 div { wrap-shape: circle(50%, 50%, 100px); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは、半径が100ピクセルの円を作成し、親要素の中心に配置します。 polygon（）関数を使用して、たとえば三角形のようにスペースで区切られた座標ペアを指定することにより、任意の形状を作成できます。

 div { wrap-shape: polygon(0,100px 100px,100px 50px,0); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

既に特定の形状がある場合、次のように、2番目のwrap-shape-modeプロパティを使用して、この図の周りの内部コンテンツを合理化できます。

 div { wrap-shape: circle(50%, 50%, 100px); wrap-shape-mode: around; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Adobe LabからMacまたはWindows用のプロトタイプをダウンロードすることにより、CSSの除外の動作を確認できます。 完全なドキュメントといくつかの非常にクールなデモファイルがあります。たとえば、次のとおりです。

エリア

アドビの次の提案はCSSリージョンで、これはコンテンツが多くの異なる要素内でどのように配布されるかを定義します。 これは、まず、 フロープロパティで一意の文字列識別子を使用して他のコンテンツを提供する要素を定義することによって行われます。次に、 コンテンツプロパティのfrom（）関数を使用して、このコンテンツで満たされる領域を選択します：

 .content { flow: foo; } .target1, .target2 { content: from(foo); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、コンテンツは.content要素から取得され、最初に.target1要素に配信されます 。ブロックがコンテンツを表示するのに十分でない場合は、引き続き.target2に表示されます 。 コンテンツはブロック単位で複製されず、最初のコンテンツで開始され、2番目のコンテンツで続行されます（必要な場合）。 理解を深めるために、下の画像をご覧ください。







ちなみに、マークアップ内の場所に関するターゲットエリアの要件はありません。 必要に応じて、ページの反対側に配置できます。



CSSエリア仕様はまだブラウザーに実装されていませんが、Exclusionsと同様に、Adobeラボのプロトタイプを使用して、自分で機能を試すことができます。

おわりに

どの新しいマークアップモジュール（FlexBoxおよびColumnsから）がブラウザーに完全に実装されるかはまだ明確ではありません。 フローティングブロックと除外については、機能の類似性のためにそれらをクロスしたいと思います（おそらくそうなるでしょう）。 テーブルレイアウトはテンプレートレイアウトと密接に関連しており、もちろん、IE10での外観が期待できます。 CSSエリアはすでにWebKitのブランチの1つに実装されており、WebKitブラウザ（Safari、Chromeなど）にすぐに表示される可能性があります。



したがって、構文にいくつかの変更を加えると、上記のすべてがCSS3で将来使用されると予測できます。 この場合、新しい方法を使用すると、わずか数年で最小限のコストで非常に思慮深いサイトを作成できるため、これが発生すると非常に便利です。