【CSS】Materialize（マテリアライズ）を使ってみよう！
記事IT・テクノロジー
マテリアライズとはCSSフレームワークの一つで、簡単にいうとCSSのセットのことです。これを使って簡単にレイアウトしていけるというものです。
他にもBootstrap（ブートストラップ）というCSSフレームワークもありますが、今回はMaterializeを使ってみたいと思います！
私と一緒にちょこ〜っと試してみましょう〜🎵
完成見本
今回は下記のようなレスポンシブレイアウトを作ってみたいと思います。
▼幅が1201px以上の場合（.xl）…画像4個並ぶ
▼幅が993px〜1200pxの場合（.l）…画像3個並ぶ
▼幅が601px〜992pxの場合（.m）…画像2個並ぶ
▼幅が600px以下の場合（.s）…画像1個並ぶ
こんなレスポンシブなレイアウトもクラス名をちょこっとつけるだけで出来ます。
こちらの実際のコードに関しては、下記の「レスポンシブレイアウトを作ってみよう！2️⃣（.row, .col）」でご紹介しますが、まずはマテリアライズを使えるようにコードをコピペします。
Materializeにアクセス
最初にマテリアライズのサイトに行きます。
https:// materializecss.com/
htmlにMaterialize（マテリアライズ）をセットする
トップページのピンクのGET STARTEDボタン、または左ナビのGetting Startedをクリック。
HTML Setupのところにある、コードを丸っとコピーしてhtmlファイルにペーストします。
▼そしたら下記のようになりましたが、
今回は、materialize.min.cssとmaterialize.min.jsを、CDNのものを使いたいと思いますので、紫の枠のところを差し替えていきます。
▼下記linkタグをhtmlのlinkタグのところに、scriptタグをhtmlのscriptタグのところに差し替えます。
▼するとhtmlファイルはこうなりました。
以上でマテリアライズを使う準備は整いました⭐️
【参考YouTube】
Materialize CSS Crash Course [Part 1]
https:// www.youtube.com/watch?v=nqT8c5OFjEQ
レスポンシブレイアウトを作ってみよう！1️⃣（.container）
マテリアライズはあらかじめ用意されたCSSのセットなので、決められたクラス名をつけるだけでスタイルがつきます。
では早速、divタグにcontainerとtealというクラス名をつけてみます。
⭐️html
<div class="container teal">
<p>Lorem Ipsumは、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。</p>
</div>
⭐️.container…画面幅の70%以上で表示（最大幅1280px）。常に左右に余白が入る形になっています。
⭐️.teal…背景色として青緑色がつきます。
▼画面1500px幅の例。containerは70%の1050px幅になっています。
▼画面500px幅の例。containerは90%の450px幅になっています。
このように、クラス名1つつけただけで、勝手にレスポンシブ対応のスタイルがつきます。便利ですね！😊
レスポンシブレイアウトを作ってみよう！2️⃣（.row, .col）
上記、完成見本のレイアウトを作ってみたいと思います。
⭐️html
▼bodyタグ内に下記を書くだけ。CSSを書く必要はありません。😉
<div class="container">
<div class="row">
<div class="col s12">
<h3>New Item</h3>
</div>
<div class="col s12 m6 l4 xl3">
<img src="img/image01.jpg" class="responsive-img" />
<p class="red-text right">25,000円</p>
</div>
<div class="col s12 m6 l4 xl3">
<img src="img/image02.jpg" class="responsive-img" />
<p class="red-text right">15,000円</p>
</div>
<div class="col s12 m6 l4 xl3">
<img src="img/image03.jpg" class="responsive-img" />
<p class="red-text right">20,000円</p>
</div>
<div class="col s12 m6 l4 xl3">
<img src="img/image04.jpg" class="responsive-img" />
<p class="red-text right">25,000円</p>
</div>
</div>
</div>
⭐️画像はimgフォルダ内に500px x 500pxサイズのimage01.jpg〜image04.jpgを用意しています。
⭐️.responsive-img…imgタグにつけることで、max-width:100%になります。今回画像は500px幅で作成したので、501px以上にならないということです。
⭐️.s、.m、.l、xlは画面幅に応じてサイズを指定出来るクラスで、後に続く数字は12等分のうちどのくらい幅を割り当てるかということです。
↓
さらに詳しい説明は、Materializeサイトの、左ナビよりCSS→Grid→Creating Responsive Layoutsにあります。
こんな感じでCSSを書かなくても、クラス名をつけるだけでスタイルがつくというのがマテリアライズです。
他にも色々なクラス名がありますので、またブログでご紹介いたしますね。😊
今回は以上になります。お疲れ様でした🌷
