グリッドビューとは何ですか？
多くのウェブページは、ページが列に分割されることを意味し、グリッド・ビューに基づいています。
Webページを設計する際に、グリッドビューを使用すると、非常に便利です。 それは、それが簡単にページの要素を配置することができます。
応答グリッドビューは、多くの場合、12列があり、100％の合計幅を有し、ブラウザのウィンドウのサイズを変更しても縮小し、拡大していきます。
応答グリッドビューの構築
応答グリッドビューの作成を開始します。
まず、すべてのHTML要素を持っていることを確認してくださいbox-sizingに設定されたプロパティborder-box 。 これは、パディングとボーダーが要素の合計幅と高さに含まれていることを確認します。
あなたのCSSに次のコードを追加します。
* {
box-sizing: border-box;
}
もっと読むbox-sizing 、当社の不動産CSS3ボックスサイジングの章を。
次の例では、2つのカラムを持つ、シンプルな応答ウェブページを示しています。
Webページには2つの列だけが含まれている場合は、上記の例では問題ありません。
しかし、我々は、Webページをより詳細に制御を持っているために、12列と応答グリッドビューを使用します。
100％/ 12列= 8.33パーセント：まず、1列にパーセンテージを計算しなければなりません。
その後、我々は12列ごとに1つのクラスを作り、 class="col-"とセクションがまたがる列の数を定義する数：
CSS：
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;} »それを自分で試してみてください これらのすべての列は左に浮遊し、15ピクセルのパディングを持ってする必要があります。
CSS：
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} 各行は、に包まれるべきである<div> 行の内部の列の数は常に12まで追加する必要があります。
HTML：
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>列の内側の列は、すべての左に浮遊しているため、ページの流れから取り出され、列が存在しないかのように他の要素が配置されます。 これを防ぐために、我々は流れをクリアスタイルを追加します：
CSS：
.row::after {
content: "";
clear: both;
display: block;
}我々はまた、それがよく見えるようにするためにいくつかのスタイルや色を追加したいです：
例
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
} »それを自分で試してみてください あなたは非常に小さい幅にブラウザウィンドウのサイズを変更する際の例では、ウェブページが良い見ていないことに注意してください。 次の章では、これを修正する方法を学習します。