## 3カラムレイアウト 3 column layout

#### タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

#### タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

#### タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

#### タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

#### タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

#### タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

## 「3カラムレイアウト」ブロックについて

    <!--▼▼▼▼▼ここから「3カラムレイアウト」-->
    <section class="bg1">

    <h2 class="c no-line"><span class="main-text">3カラムレイアウト</span><span class="sub-text">3 column layout</span></h2>

    <div class="list-grid1">

    <div class="list blur">
    <figure><a href="#"><img src="images/1.jpg" alt=""></a></figure>
    <div class="text">
    <h4>タイトル</h4>
    <p>商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
    </div>
    </div>

    ・・・（省略）

    </div>
    <!--/.list-grid1-->

    </section>
    <!--▲▲▲▲▲ここまで「3カラムレイアウト」-->

### 主なスタイルは

cssフォルダのstyle.cssから「list-grid1」でテキスト検索してみて下さい。詳しい解説もあります。
カラムレイアウトにしたいlistブロックを全てこの中に入れておいて下さい。

### class="bg1"

背景色の指定です。色を変更したい場合は、style.cssからテキストで「bg1」を検索して下さい。

### class="list blur"

カラム内のブロック１個あたりです。
この中の「figure」内にimg要素を、「text」ブロック内に見出しと説明文を入れます。
「blur」は、ぼやけながら出現するスタイル効果です。汎用的にどこにでも使えます。

### 3カラムのカラム数変更は

style.cssから「list-grid1」でテキスト検索して下さい。
以下の3が３カラムの指定箇所です。4にすれば4カラムになります。

    grid-template-columns: repeat(3, 1fr);

800px未満の画面幅だと1カラムになります。
このブレイクポイントを変更したい場合は、

    @media screen and (min-width:800px) {

の800pxを変更して下さい。