書かれているものがあると思います。これらは幾つの列幅を使うかの指定です。(これらをスクリーン・クラス・プレフィックスといいます)は閲覧者のメディアの画面サイズです。パソコンという捉え方で構いません。「m4」と指定した場合、タブレット閲覧時には4列の幅で表示するという意味になり、「l3」と指定した場合はパソコン閲覧時には3列の幅で表示するという意味になります。省略時(未記載時)は暗黙で12列幅を使うという事になります。プッシュとプル次にカラムを入れ替えるプッシュとプルです。サンプルソースを下に示します。amber">第二カラム</div></div>上の行はノーマル状態、下の行にはプッシュとプルを設定しました。すると下の行では第二カラムが左側に来たことが分かると思います。プッシュとプルでカラムの順番を入れ替えることができます。オフセットオフセットのサンプルソースを下に示します。頭に付けて指定します。サンプルは上下両行とも6カラム幅のサイズです。オフセット指定をしました。4カラム分の空白が左側にセットされているのがわかります。セクションと区切り線セクションはコンテンツをまとめブロック単位にしたものです。区切り線はコンテンツを分けるために用います。以下にサンプルソースを示します。class="divider"></div>サンプルではセクションの上下に区切り線を設置したものです。区切り線は1ピクセルの線として表示されています。セクションは、1コンテンツ=1セクションという形で用います。セクションの応用それでは、セクションについてもう一歩理解を深めてみましょう。以下サンプルを示します。class="divider"></div>1行に3つのセクションを横並びさせてみました。12分割を3で割り、それぞれのセクション幅は4カラムで均等にしています。先程のサンプルと同様に上下に区切り線を入れています。中央のセクションBには青の背景色を指定しました。このようにセクションを横並びさせることもできます。すれば中央セクションのみを広い幅にする事もできます。レスポンシブレイアウト次にレスポンシブの動きの理解に進みましょう。Materializeでは、自動的にレスポンシブデザインに対応しています。s,m,l,xl)です。どの画面サイズの場合にどのようなレイアウトになるかを知っておく必要があります。以下にレイアウト表を示します。デバイスで表示する際に有効となります。これらグリッドシステムを活用して、デバイス毎に最適なレイアウトを組むことが可能となります。それでは上記レスポンシブレイアウトを応用したサンプルを示します。l3</p></div></div>このソースを組んだ場合、幅993px以上のデバイス(ノートPCなど=l)で表示すると下図のように表示されます。効いていることが分かります。m)は下図のように表示されます。四段目に配置されました。次にスマートフォンなどの場合(幅600px以下=s)は下図のように表示されます。指定したので縦並びになりました。横幅の狭いスマートフォンには最適な表示になります。このようにMaterializeを使うことで、マテリアルデザインかつレスポンシブデザインを簡単に実装することが出来ました。色指定のしかた(背景色)背景色や文字色を指定する方法ですが、これも簡単でクラスを指定することで実現できます。以下サンプルを示します。accent-2」(シアン色の一種)という色を指定したものです。materializeで指定可能な色の名称は下の通りです。文字が小さいですがこういう感じということだけ覚えて戴ければ良いと思います。色指定のしかた(文字色)次にmaterializeで文字の色を指定する方法は、下記のサンプルコードのようにクラスに色の名称を記載することで可能です。”text-“を付加しなくてはなりません。text-darken-1」という感じでハイフン+textの文字が必要です。ここらへん、ちょっと面倒ですね。以上、materializeでの色指定のやりかたでした。マテリアルデザイン、意外とかんたんに導入できるんだなと思って戴ければ幸いです。入門者向けの解説、まだまだ続きます。