【HTML/CSS講座】 第4回 グリッドシステムの適用

/* グリッドシステム */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.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%;
}

グリッドシステムとは、予めCSSでカラムの幅を決めておくシステムです。

デザインレイアウトをする上でグリッドシステムは、素早くレイアウトを配置できるため、3column、2column、フッターだけ3分割等が 簡単に可能です。

上記のCSSコードは、グリッドシステムを採用したCSSの例です。(ステータスは独自の数値)

col12以上の数値を入れることもできますが、グリッドシステムの配分は正確な横幅数値を基本軸とするので、慣れや感覚が大事になってきます。

CSSフレームワークの半分以上にグリッドシステムが付いています。

1から12までが良いでしょう。細かく細分化しすぎると、使用者が戸惑います。

グリッドシステムは、CSSの中でも大事なものになってきます。

従来の発想では、【3column】を表現するのに、３つのCSSクラスを並べる必要がありました。

【グリッドシステム】という概念の登場によって、

自サイトや社内の規則に沿ってデザインレイアウトをしましょう。

3columnにするには、３つグリッドシステムを並べればいいのです。

グリッドシステムの数値が登場するまでは、クラスやIDで3columnを表現する必要がありましたが、

グリッドシステムの登場は、サイトの量産化に貢献しているようです。

CSSフレームワークの肝であるグリッドシステム。

7500円もするグリッドシステム専用の本がある程です。

グリッドシステムは奥が深く、またグリッドシステムによるホームページは増幅する一方です。

グリッドシステムの幅には個性があります。

    <div class="container">
        <div class="row">
<div class="col-1">Col1</div> 
<div class="col-2">Col 2</div>
<div class="col-3">Col 3</div>
<div class="col-4">Col 4</div>
<div class="col-5">Col 5</div>
 <div class="col-6">Col 6</div>
 <div class="col-7">Col 7</div>
 <div class="col-8">Col 8</div>
 <div class="col-9">Col 9</div>
 <div class="col-10">Col 10</div>
 <div class="col-11">Col 11</div>
 <div class="col-12">Col 12</div>
        </div>
    </div>