CSS 3 Gridレイアウトによるコンテンツ優先
20253 ワード
CSS 3 Gridレイアウトによるコンテンツ優先
http://www.w3cplus.com/css3/css3-grid-layout-module.html
本文は砂漠からRachel Andrewの《Giving Content Priority with CSS3 Grid Layout》によって訳して、全体の訳文は私达の自分の理解と思想を持って、もし訳すのがよくないあるいは悪いところはまた同業者の友达に指摘してもらいます.この訳文を転載する必要がある場合は、英語の出典:http://24ways.org/2012/css3-grid-layout、および著者に関する情報を明記する必要があります.
——著者:Rachel Andrew
——訳者:砂漠
ブラウザは多くのCSS 3のモジュールをサポートし、画像を使用することに慣れているCSS効果を解決するのに役立ちます.台頭したモバイルブラウザと応答型ウェブデザインの概念は、Webデザインを見るための新しい方法を与えてくれた.しかし、それらが来たとき、私たちのレイアウトはまだついていませんでした.長年のソース順序,コンテンツ構造,およびコンテンツとスタイルの分離について議論した.しかし、一定の視覚的レイアウトを得るためには、ソース秩序を決定しなければならないことが多い.
現在、W 3 Cはいくつかの面白い規範を作っています.これらの規範は絶えず変化しますが、彼らはいつもスタートラインで変動しています.この記事では、グリッドと配置要素を定義できるCSSのモジュールCSS 3グリッドレイアウトモジュールについて説明します.本論文では,基本的なグリッドレイアウトを実証し,より多くの適応法を持つことを考えることができる方法を検討した.
開始する前に、本明細書を作成する際に、これらの例はIE 10上でのみ実行できることに特に注意する必要があります.CSS 3グリッドレイアウトはマイクロソフトによって作成されたモジュールであり、使用時にIE 10ブラウザのプレフィックス「-ms-」を追加する必要がある.私の例では、CSS 3 Gridレイアウトモジュールが仕様草案であるだけでなく、他のブラウザで実現される効果にも不一致がある可能性があるため、他のブラウザの接頭辞を含まない「-ms-」接頭辞を使用します.今日の効果も変わる可能性が高いので、フィードバックをお願いします.
IE 10ブラウザがまだない場合は、Browserstackにアカウントを登録することができます.無料で試してみてください.関連するフェーズの例示的なスクリーンショットも文章に示した.
CSS 3 Gridレイアウトとは?
CSS 3グリッドレイアウトは、開発者にグリッドを設計し、これらのグリッド内にコンテンツを配置させることを目的としています.フローティングを使用してメッシュを作成するのではなく、実際には要素をメッシュコンテナとして宣言し、要素の内容をメッシュに配置します.最も重要なのは、ドキュメント・フローのソース・シーケンスが重要ではないことです.
メッシュの宣言
グリッドは、「display」の新しいプロパティ値「display:grid」を使用することを宣言します.ここではIE 10で実装する必要があるため、「display:-ms-grid;」という接頭辞を付ける必要があります.
グリッドを宣言すると、grid-columnsプロパティとgrid-rowsプロパティを使用して列と行を設定できます.
上記の例では、「.wrapper」要素をグリッドとして宣言します.「grid-columns」プロパティを使用して、200ピクセル幅の列を作成しました.1つの20ピクセルの間隔、1つの使用可能な空間に基づいた弾性列、もう1つの20ピクセルの間隔、200ピクセルのサイドバーです.1つの柔軟なレイアウトには、2つの固定幅のサイドバーがあります.「grid-rows」プロパティを使用して、私は2つの行を作成しました.最初の行は「auto」を設定し、内容が入るかどうかにかかわらず、彼は延長して承諾します.2行目には、グリッド用の新しい単位値「1 fr」が設定されています.これは、スコア単位を意味します.この場合、スペースが存在するかどうかにかかわらず、スコア単位の空き領域が有効です.
グリッド項目の配置
今は簡単なグリッドがあります.内容を上げる必要があります.クラス「.mian」というdivがあれば、グリッドの2行目とauto値を設定した列に配置したいのですが、次のスタイルを使用できます.
古い開発者であれば、CSSを使用してHTMLのようなテーブルレイアウトを作成していることに気づいたかもしれません.対応する要素を見つけたい場合は、グリッドレイアウトをテーブルの概念として使用することができます.これは最も有益な方法です.
メッシュシステムの作成
CSS 3グリッドレイアウトを始めたとき、960流体16列メッシュシステムのような柔軟なグリッドシステムをコピーできるかどうか見てみたいと思います.
まず、コンテナwrapper要素をメッシュコンテナとして定義し、スコアを使用してこのメッシュを流体メッシュにします.
私が挙げた例は960メッシュシステムに似ています.グリッドの各列の前後に間隔があり、このように16回繰り返します.これは、2つの列にまたがりたい場合、グリッドレイアウトモジュールでは、実際には3つの列にまたがります.2つのセルに1つの間隔を加えます.所在はプロジェクトの位置決め時に明確に指定しなければならない.
各配置オプションのクラス名を作成しました.列、行、間隔などです.
各要素に複数のクラス名を追加して、グリッド上の要素の位置を設定できます.
CSS 3メッシュレイアウトでコピーした流体メッシュを使用します.この例を正常に閲覧するには、IE 10を有効にしてください.
サンプルをオンラインで表示
仕事はできるが...
これは仕事ができるが、理想的ではない.私のテストはこの段階では表示されないと思いますが、グリッドレイアウトモジュールの動作の特徴を明確に示していると思います.これは役に立つ始まりです.しかし、これは生産においても一つの方法ではありません.まず、タグにクラス名を定義し、グリッドの位置に配置する必要があります.16列のグリッドを常に操作する場合は、あまり問題ではないかもしれません.本当に強力なグリッドレイアウトモジュールは、異なるメディアクエリーに基づいてグリッドレイアウトを使用し、自分でグリッドを再定義することができます.6列レイアウトを小さな画面で使用すると、16列のグリッド配置要素には何の意味もありません.
LESSを使用してメッシュの位置を定義するには
ご覧のように、プライマリ・カラムと間隔を使用してグリッドを定義する場合は、カラム間隔と実際のカラムを考慮する必要があります.これは、プロジェクトごとにグリッドを計算しなければならないことを意味します.上記の例では、32列ではなく16列のクラス名を各場所に作成しました.ただし、CSSプリプロセッサを使用することで、プライマリ・カラムとみなされる限り、すべてのカラムを使用することは回避できます.
私の例では、LESSを使用しています.私の簡単なグリッドフレームワークは簡単なmixinで完成しました.
私のmixinには、列、行、スパンの列、スパンの行の4つのパラメータが含まれています.1つの項目を列4、行3、2つの列と1行にまたがりたい場合.CSSスタイルは以下のように書くことができます.
mixin翻訳:
このようにして、多くの字を打つことと数学の計算を少なくします.ブラウザの接頭辞をmixinに追加することもできます.最初からブラウザ互換処理をしています.
今回、新しいグリッドが作成されたことがわかります.各要素に複数のクラスを追加するのではなく、mixinを使用して必要な場所を作成するクラスを追加します.私はずっとmixinで行をまたいでいます.私が最後にかなり複雑なグリッドレイアウトを作ったのを見ることができます.JavaScrrpt LESS解析器を使用しています.これにより、私が使用しているLESSを表示できます.なお,−msの接頭辞の使用を避けるために,LESSコードでは実際に"~"が用いられる.
素敵に見えます.テンプレートには要素ごとに多くの情報が指定されていません.grid(x)というクラス名しか使いませんが、より意味的なクラス名があるかもしれません.この例をさらに拡張することができます.これは、スクリーン幅に基づいてグリッドを再定義することです.
サンプルコード
皆さんの時間を節約するために、私はわざわざそのコードをここに引き出して、皆さんの参考にします.
HTML構造
http://www.w3cplus.com/css3/css3-grid-layout-module.html
本文は砂漠からRachel Andrewの《Giving Content Priority with CSS3 Grid Layout》によって訳して、全体の訳文は私达の自分の理解と思想を持って、もし訳すのがよくないあるいは悪いところはまた同業者の友达に指摘してもらいます.この訳文を転載する必要がある場合は、英語の出典:http://24ways.org/2012/css3-grid-layout、および著者に関する情報を明記する必要があります.
——著者:Rachel Andrew
——訳者:砂漠
ブラウザは多くのCSS 3のモジュールをサポートし、画像を使用することに慣れているCSS効果を解決するのに役立ちます.台頭したモバイルブラウザと応答型ウェブデザインの概念は、Webデザインを見るための新しい方法を与えてくれた.しかし、それらが来たとき、私たちのレイアウトはまだついていませんでした.長年のソース順序,コンテンツ構造,およびコンテンツとスタイルの分離について議論した.しかし、一定の視覚的レイアウトを得るためには、ソース秩序を決定しなければならないことが多い.
現在、W 3 Cはいくつかの面白い規範を作っています.これらの規範は絶えず変化しますが、彼らはいつもスタートラインで変動しています.この記事では、グリッドと配置要素を定義できるCSSのモジュールCSS 3グリッドレイアウトモジュールについて説明します.本論文では,基本的なグリッドレイアウトを実証し,より多くの適応法を持つことを考えることができる方法を検討した.
開始する前に、本明細書を作成する際に、これらの例はIE 10上でのみ実行できることに特に注意する必要があります.CSS 3グリッドレイアウトはマイクロソフトによって作成されたモジュールであり、使用時にIE 10ブラウザのプレフィックス「-ms-」を追加する必要がある.私の例では、CSS 3 Gridレイアウトモジュールが仕様草案であるだけでなく、他のブラウザで実現される効果にも不一致がある可能性があるため、他のブラウザの接頭辞を含まない「-ms-」接頭辞を使用します.今日の効果も変わる可能性が高いので、フィードバックをお願いします.
IE 10ブラウザがまだない場合は、Browserstackにアカウントを登録することができます.無料で試してみてください.関連するフェーズの例示的なスクリーンショットも文章に示した.
CSS 3 Gridレイアウトとは?
CSS 3グリッドレイアウトは、開発者にグリッドを設計し、これらのグリッド内にコンテンツを配置させることを目的としています.フローティングを使用してメッシュを作成するのではなく、実際には要素をメッシュコンテナとして宣言し、要素の内容をメッシュに配置します.最も重要なのは、ドキュメント・フローのソース・シーケンスが重要ではないことです.
メッシュの宣言
グリッドは、「display」の新しいプロパティ値「display:grid」を使用することを宣言します.ここではIE 10で実装する必要があるため、「display:-ms-grid;」という接頭辞を付ける必要があります.
グリッドを宣言すると、grid-columnsプロパティとgrid-rowsプロパティを使用して列と行を設定できます.
.wrapper { display: -ms-grid; -ms-grid-columns: 200px 20px auto 20px 200px; -ms-grid-rows: auto 1fr; } 上記の例では、「.wrapper」要素をグリッドとして宣言します.「grid-columns」プロパティを使用して、200ピクセル幅の列を作成しました.1つの20ピクセルの間隔、1つの使用可能な空間に基づいた弾性列、もう1つの20ピクセルの間隔、200ピクセルのサイドバーです.1つの柔軟なレイアウトには、2つの固定幅のサイドバーがあります.「grid-rows」プロパティを使用して、私は2つの行を作成しました.最初の行は「auto」を設定し、内容が入るかどうかにかかわらず、彼は延長して承諾します.2行目には、グリッド用の新しい単位値「1 fr」が設定されています.これは、スコア単位を意味します.この場合、スペースが存在するかどうかにかかわらず、スコア単位の空き領域が有効です.
グリッド項目の配置
今は簡単なグリッドがあります.内容を上げる必要があります.クラス「.mian」というdivがあれば、グリッドの2行目とauto値を設定した列に配置したいのですが、次のスタイルを使用できます.
.main { -ms-grid-column: 3; -ms-grid-row: 2; -ms-grid-row-span: 1; } 古い開発者であれば、CSSを使用してHTMLのようなテーブルレイアウトを作成していることに気づいたかもしれません.対応する要素を見つけたい場合は、グリッドレイアウトをテーブルの概念として使用することができます.これは最も有益な方法です.
メッシュシステムの作成
CSS 3グリッドレイアウトを始めたとき、960流体16列メッシュシステムのような柔軟なグリッドシステムをコピーできるかどうか見てみたいと思います.
まず、コンテナwrapper要素をメッシュコンテナとして定義し、スコアを使用してこのメッシュを流体メッシュにします.
.wrapper { width: 90%; margin: 0 auto 0 auto; display: -ms-grid; -ms-grid-columns: 1fr (4.25fr 1fr)[16]; -ms-grid-rows: (auto 20px)[24]; } 私が挙げた例は960メッシュシステムに似ています.グリッドの各列の前後に間隔があり、このように16回繰り返します.これは、2つの列にまたがりたい場合、グリッドレイアウトモジュールでは、実際には3つの列にまたがります.2つのセルに1つの間隔を加えます.所在はプロジェクトの位置決め時に明確に指定しなければならない.
各配置オプションのクラス名を作成しました.列、行、間隔などです.
.grid1 {-ms-grid-column: 2;} /* applying this class positions an item in the first column (the gutter is column 1) */ .grid2 {-ms-grid-column: 4;} /* 2nd column - gutter|column 1|gutter */ .grid3 {-ms-grid-column: 6;} /* 3rd column - gutter|column 1|gutter|column2|gutter */ .row1 {-ms-grid-row:1;} .row2 {-ms-grid-row:3;} .row3 {-ms-grid-row:5;} .colspan1 {-ms-grid-column-span:1;} .colspan2 {-ms-grid-column-span:3;} .colspan3 {-ms-grid-column-span:5;} 各要素に複数のクラス名を追加して、グリッド上の要素の位置を設定できます.
CSS 3メッシュレイアウトでコピーした流体メッシュを使用します.この例を正常に閲覧するには、IE 10を有効にしてください.
サンプルをオンラインで表示
仕事はできるが...
これは仕事ができるが、理想的ではない.私のテストはこの段階では表示されないと思いますが、グリッドレイアウトモジュールの動作の特徴を明確に示していると思います.これは役に立つ始まりです.しかし、これは生産においても一つの方法ではありません.まず、タグにクラス名を定義し、グリッドの位置に配置する必要があります.16列のグリッドを常に操作する場合は、あまり問題ではないかもしれません.本当に強力なグリッドレイアウトモジュールは、異なるメディアクエリーに基づいてグリッドレイアウトを使用し、自分でグリッドを再定義することができます.6列レイアウトを小さな画面で使用すると、16列のグリッド配置要素には何の意味もありません.
LESSを使用してメッシュの位置を定義するには
ご覧のように、プライマリ・カラムと間隔を使用してグリッドを定義する場合は、カラム間隔と実際のカラムを考慮する必要があります.これは、プロジェクトごとにグリッドを計算しなければならないことを意味します.上記の例では、32列ではなく16列のクラス名を各場所に作成しました.ただし、CSSプリプロセッサを使用することで、プライマリ・カラムとみなされる限り、すべてのカラムを使用することは回避できます.
私の例では、LESSを使用しています.私の簡単なグリッドフレームワークは簡単なmixinで完成しました.
/*----------------------------------------------------------------*\ * 1、 LESS mixin, .position， * 2、 @column * 3、 @row * 4、 @colspan * 5、 @rowspan \*----------------------------------------------------------------*/ .position(@column,@row,@colspan,@rowspan) { -ms-grid-column: @column*2; -ms-grid-row: @row*2-1; -ms-grid-column-span: @colspan*2-1; -ms-grid-row-span: @rowspan*2-1; } 私のmixinには、列、行、スパンの列、スパンの行の4つのパラメータが含まれています.1つの項目を列4、行3、2つの列と1行にまたがりたい場合.CSSスタイルは以下のように書くことができます.
.box {
.position(4,3,2,1);
}
mixin翻訳:
.box { -ms-grid-column: 8; -ms-grid-row: 5; -ms-grid-column-span: 3; -ms-grid-row-span: 1; } このようにして、多くの字を打つことと数学の計算を少なくします.ブラウザの接頭辞をmixinに追加することもできます.最初からブラウザ互換処理をしています.
今回、新しいグリッドが作成されたことがわかります.各要素に複数のクラスを追加するのではなく、mixinを使用して必要な場所を作成するクラスを追加します.私はずっとmixinで行をまたいでいます.私が最後にかなり複雑なグリッドレイアウトを作ったのを見ることができます.JavaScrrpt LESS解析器を使用しています.これにより、私が使用しているLESSを表示できます.なお,−msの接頭辞の使用を避けるために,LESSコードでは実際に"~"が用いられる.
素敵に見えます.テンプレートには要素ごとに多くの情報が指定されていません.grid(x)というクラス名しか使いませんが、より意味的なクラス名があるかもしれません.この例をさらに拡張することができます.これは、スクリーン幅に基づいてグリッドを再定義することです.
サンプルコード
皆さんの時間を節約するために、私はわざわざそのコードをここに引き出して、皆さんの参考にします.
HTML構造
<div class="wrapper"> <div class="box grid1">01</div> <div class="box grid2">02</div> <div class="box grid3">03</div> <div class="box grid4">04</div> <div class="box grid5">05</div> <div class="box grid6">06</div> <div class="box grid7">07</div> <div class="box grid8">08</div> <div class="box grid9">09</div> <div class="box grid10">10</div> <div class="box grid11">11</div> <div class="box grid12">12</div> <div class="box grid13">13</div> <div class="box grid14">14</div> <div class="box grid15">15</div> <div class="box grid16">16</div> <div class="box grid17">17</div> <div class="box grid18">18</div> <div class="box grid19">19</div> <div class="box grid20">20</div> <div class="box grid21">21</div> <div class="box grid22">22</div> <div class="box grid23">23</div> <div class="box grid24">24</div> <div class="box grid25">25</div> <div class="box grid26">26</div> <div class="box grid27">27</div> <div class="box grid28">28</div> <div class="box grid29">29</div> <div class="box grid30">30</div> <div class="box grid31">31</div> <div class="box grid32">32</div> <div class="box grid33">33</div> <div class="box grid34">34</div> <div class="box grid35">35</div> <div class="box grid36">36</div> <div class="box grid37">37</div> <div class="box grid38">38</div> <div class="box grid39">39</div>