グリッドビューとは?
多くのWebページはグリッドビューに基づいています。つまり、ページは列に分割されています。
グリッドビューを使用すると、Webページをデザインするときに非常に役立ちます。ページに要素を配置しやすくなります。
多くの場合、レスポンシブグリッドビューには12列があり、幅の合計は100%で、ブラウザーウィンドウのサイズを変更すると縮小したり拡大したりします。
レスポンシブグリッドビューの構築
レスポンシブグリッドビューの作成を開始しましょう。
最初に、すべてのHTML要素にbox-sizingに設定されたプロパティborder-box.これにより、パディングとボーダーが要素の幅と高さの合計に含まれるようになります。
CSSに次のコードを追加します。
* {
box-sizing: border-box;
}
box-sizingプロパティの詳細については、「CSS ボックスのサイズ設定」の章を参照してください。
次の例は、2つの列を持つ単純なレスポンシブWebページを示しています。
例
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
自分で試してみる»
上記の例は、Webページに2つの列しか含まれていない場合に問題ありません。
ただし、Webページをより詳細に制御するために、12列のレスポンシブグリッドビューを使用したいと考えています。
最初に、1つの列のパーセンテージを計算する必要があります: 100% / 12 列 = 8.33%。
次に、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%;}
自分で試してみる»
これらの列はすべて左にフローティングし、パディングは15pxにする必要があります。
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
各行は<div>.行内の列の数は、常に 12 になる必要があります。
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
行内の列はすべて左に浮いているため、ページの流れから除外され、列が存在しないかのように他の要素が配置されます。これを防ぐために、フローをクリアするスタイルを追加します。
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
また、見栄えを良くするために、いくつかのスタイルと色を追加したいと考えています。
例
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;
}
自分で試してみる»
知らせブラウザウィンドウのサイズを非常に小さい幅に変更すると、この例のWebページの見栄えが悪くなります。次の章では、これを修正する方法を学習します。
