レスポンシブ Web デザイン -グリッドビュー

グリッドビューとは？

多くのWebページはグリッドベースでデザインされています。つまり、Webページは列単位でレイアウトされることを意味します。

グリッドビューを使用すると、Webページのデザインが容易になります。これにより、Webページに要素を追加するのがより簡単になります。

レスポンシブグリッドビューは通常12列で、幅は100%であり、ブラウザウィンドウのサイズが変更されると自動的に伸縮します。

レスポンシブグリッドビューの作成

それでは、レスポンシブグリッドビューを作成しましょう。

まず、すべてのHTML要素が次のプロパティを持っていることを確認してください。box-sizingプロパティを次のように設定します。border-box。

マージンとボーダーが要素の幅と高さに含まれることを確認してください。

次のコードを追加します：

* {
    box-sizing: border-box;
}

box-sizing の詳細はこちらをクリック：CSS3 box-sizing プロパティ。

次の例は、2列を含むシンプルなレスポンシブWebページを示しています。

上記の例は2列で構成されています。

12列のグリッドシステムを使用すると、レスポンシブWebページをより適切に制御できます。

まず、各列のパーセンテージを計算できます：100% / 12列 = 8.33%。

各列にclassを指定します。class="col-"これは、各列がいくつのspanを持つかを定義するために使用します。

すべての列を左にフロートさせ、間隔（padding）を15pxにします：

各行は <div> でラップします。すべての列数を合計すると12になる必要があります：

列の中の行は左にフロートさせ、フロートのクリアも追加します：

スタイルと色を追加して、より見栄えを良くすることができます：