マテリアライズ-グリッド

Materializeは、12列の流体応答グリッドを提供します。

行と列のスタイルクラスを使用して、それぞれ行と列を定義します。

Sr.No.

Class Name & Description

1

row

レスポンシブ列に使用するパディングなしのコンテナーを指定します。このクラスは、レスポンシブクラスが完全にレスポンシブであるために必須です。

2

col

サブクラスを持つ列を指定します。

*col* には、さまざまな種類の画面を対象としたいくつかのサブクラスがあります。

小画面デバイス用の列

以下は、小さな画面デバイス、通常はスマートフォンの列レベルのスタイルのリストです。

シニア

クラス名と説明

1

s1

幅が08.33％の12列のうち1列を定義します。

2

s2

16.66％の幅で12列のうち2列を定義します。

3

s3

幅が25.00％の12列のうち3列を定義します。

4

s4

33.33％の幅で12列のうち4列を定義します。

*s5-s11*

12

*s12*

12列のうち12列を幅100％で定義します。スモールスクリーンフォンのデフォルトクラス。

中画面デバイス用の列

以下は、中程度の画面のデバイス（通常はタブレット）の列レベルのスタイルのリストです。

シニア

クラス名と説明

1

m1

幅が08.33％の12列のうち1列を定義します

2

m2

16.66％の幅で12列のうち2列を定義します。

3

m3

幅が25.00％の12列のうち3列を定義します。

4

m4

33.33％の幅で12列のうち4列を定義します。

*m5-m11*

12

*m12*

12列のうち12列を幅100％で定義します。中型の携帯電話のデフォルトクラス。

大画面デバイス用の列

以下は、大画面デバイス（通常はラップトップ）の列レベルのスタイルのリストです。

シニア

クラス名と説明

1

l1

幅が08.33％の12列のうち1列を定義します。

2

l2

16.66％の幅で12列のうち2列を定義します。

3

l3

幅が25.00％の12列のうち3列を定義します。

4

l4

33.33％の幅で12列のうち4列を定義します。

*l5-l11*

12

*l12*

12列のうち12列を幅100％で定義します。大画面デバイスのデフォルトクラス。

使用法

各サブクラスは、デバイスのタイプに基づいて、使用するグリッドの列数を決定します。次のHTMLスニペットを考えてください。

<div class = "row">
   <div class = "col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
      a large screen.</p>
   </div>
</div>

HTML要素のclass属性でサブクラスが指定されていない場合、デバイスで使用されるデフォルトの列は12です。

例

materialize_grids

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Grids Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body>
      <div class = "teal">
         <h2>Mobile First Design Demo</h2>
         <p>Resize the window to see the effect!</p>
      </div>

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

      <div class = "row">
         <div class = "col m4 l3 yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
               and 3 on a large screen (l3).</p>
         </div>

         <div class = "col s4 m8 l9 grey">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
               (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

Materialize-grids

マテリアライズ-グリッド

小画面デバイス用の列

中画面デバイス用の列

大画面デバイス用の列

使用法

例

materialize_grids

結果

目次