グリッド - Materialize

標準の12列の流動的なレスポンシブグリッドシステムを使用しています。グリッドは、ページを秩序正しく簡単にレイアウトするのに役立ちます。

コンテナクラスは厳密にはグリッドの一部ではありませんが、コンテンツのレイアウトにおいて重要です。ページコンテンツを中央に配置できます。containerクラスはウィンドウ幅の約70％に設定されています。ページコンテンツを中央に配置して含めるのに役立ちます。コンテナを使用して、本文の内容を含めます。

デモ

下のボタンをクリックして、コンテナがない場合のページの外観を確認してください。

コンテナをオフにする

コンテナを追加するには、コンテンツをcontainerクラスを持つ<div>タグ内に配置するだけです。ページの設定方法の例を次に示します。


    <body>
      <div class="container">
        <!-- Page Content goes here -->
      </div>
    </body>

このセクションをご覧になって、グリッドの仕組みをすぐに理解してください！

12列

標準グリッドには12列あります。ブラウザのサイズに関係なく、これらの各列の幅は常に等しくなります。

グリッドがHTMLでどのように使用されるかを知るには、以下のコードをご覧ください。上記のコードと同様の結果が得られます。


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

注：今のところ、s1はsmall-1の略で、平易な英語では「小さな画面で1列」を意味することを知っておいてください。

列は行の中に存在する

レイアウトを作成するときは、すべての列が行の中に含まれている必要があること、および内部divにcolクラスを追加して列にする必要があることを忘れないでください。

このdivは、すべての画面サイズで12列幅です。

6列（半分）


    <div class="row">
      <div class="col s12">This div is 12-columns wide on all screen sizes</div>
      <div class="col s6">6-columns (one-half)</div>
      <div class="col s6">6-columns (one-half)</div>
    </div>

オフセットするには、クラスにoffset-s2を追加するだけです。ここで、sは画面クラスのプレフィックス（s =小、m =中、l =大）を表し、その後の数字はオフセットする列の数です。

このdivは、すべての画面サイズで12列幅です。

6列（6でオフセット）


    <div class="row">
      <div class="col s12"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
      <div class="col s6 offset-s6"><span class="flow-text">6-columns (offset-by-6)</span></div>
    </div>

プッシュとプルを使用して、列の順序を簡単に変更できます。push-s2またはpull-s2をクラスに追加するだけです。ここで、sは画面クラスのプレフィックス（s =小、m =中、l =大）を表し、その後の数字はプッシュまたはプルする列の数です。

このdivは7列幅で、5列右にプッシュされています。

5列幅で、7列左にプルされています。


    <div class="row">
      <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
    </div>

ここでは、グリッドシステムを使用して一般的に使用されるレイアウトを作成する方法を示します。うまくいけば、これらによって要素のレイアウトがより快適になります。これらのデモをシンプルにするために、ここでのデモはレスポンシブではありません。

セクション

セクションクラスは、単純な上下のパディングに使用されます。大きなコンテンツブロックを含むdivにsectionクラスを追加するだけです。

仕切り

仕切りは、コンテンツを分割するのに役立つ1ピクセルの線です。コンテンツの間にdivにdividerを追加するだけです。

セクションと仕切りの例

セクション1

内容

セクション2

内容

セクション3

内容


  <div class="divider"></div>
  <div class="section">
    <h5>Section 1</h5>
    <p>Stuff</p>
  </div>
  <div class="divider"></div>
  <div class="section">
    <h5>Section 2</h5>
    <p>Stuff</p>
  </div>
  <div class="divider"></div>
  <div class="section">
    <h5>Section 3</h5>
    <p>Stuff</p>
  </div>

プロモーションテーブルの例

同じサイズの3つのdivが必要な場合は、4 + 4 + 4が12になるため、divの幅を4列として定義します。これらのdiv内にコンテンツを配置できます。たとえば、フロントページのコンテンツを取り上げます。この例のために少し変更しました。


    <div class="row">

      <div class="col s4">
        <!-- Promo Content 1 goes here -->
      </div>
      <div class="col s4">
        <!-- Promo Content 2 goes here -->
      </div>
      <div class="col s4">
        <!-- Promo Content 3 goes here -->
      </div>

    </div>

サイドナビゲーションレイアウトの例

グリッドシステムを使用してレイアウトを作成するのがいかに簡単かがわかります。均等なレイアウトにするために、列番号の合計が12になるようにしてください。


    <!-- Navbar goes here -->

    <!-- Page Layout here -->
    <div class="row">

      <div class="col s3">
        <!-- Grey navigation panel -->
      </div>

      <div class="col s9">
        <!-- Teal page content  -->
      </div>

    </div>

上記では、グリッドシステムを使用して要素をレイアウトする方法を示しました。ここでは、すべての画面サイズで見栄えが良くなるようにレイアウトを設計する方法を説明します。

画面サイズ

	モバイルデバイス <= 600px	タブレットデバイス > 600px	デスクトップデバイス > 992px	大型デスクトップデバイス > 1200px
クラスプレフィックス	`.s`	`.m`	`.l`	`.xl`
コンテナ幅	90%	85%	70%	70%
列数	12	12	12	12

レスポンシブ性の追加

前の例では、"col s12"を使用して小さな画面のサイズのみを定義しました。ルールが上位に伝播されるため、固定レイアウトが必要な場合はこれで問題ありません。s12と言うだけで、本質的に"col s12 m12 l12"と言っています。しかし、サイズを明示的に定義することで、Webサイトのレスポンシブ性を高めることができます。

私は常に全幅です（col s12）

モバイルでは全幅です（col s12 m6）


    <div class="row">
      <div class="grid-example col s12"><span class="flow-text">I am always full-width (col s12)</span></div>
      <div class="grid-example col s12 m6"><span class="flow-text">I am full-width on mobile (col s12 m6)</span></div>
    </div>

レスポンシブサイドナビゲーションレイアウト

以下の例では、上記と同じレイアウトを使用しますが、divが各画面サイズで占める列数を定義することで、レスポンシブにします。ブラウザのサイズを変更して、以下のレイアウトの変更を確認してください。


    <!-- Navbar goes here -->

    <!-- Page Layout here -->
    <div class="row">

      <div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
        <!-- Grey navigation panel

              This content will be:
          3-columns-wide on large screens,
          4-columns-wide on medium screens,
          12-columns-wide on small screens  -->

      </div>

      <div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
        <!-- Teal page content

              This content will be:
          9-columns-wide on large screens,
          8-columns-wide on medium screens,
          12-columns-wide on small screens  -->

      </div>

    </div>

よりレスポンシブなグリッドの例

s12
s12 m4 l2
s12 m4 l8
s12 m4 l2
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3


  <div class="row">
    <div class="col s12"><p>s12</p></div>
    <div class="col s12 m4 l2"><p>s12 m4</p></div>
    <div class="col s12 m4 l8"><p>s12 m4</p></div>
    <div class="col s12 m4 l2"><p>s12 m4</p></div>
  </div>
  <div class="row">
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
  </div>