レスポンシブウェブデザイン-グリッドビュー
グリッドビューとは何ですか?
多くの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ページの見栄えが悪くなることに注意してください。次の章では、それを修正する方法を学びます。