【CSS】Materialize（マテリアライズ）を使ってみよう！2️⃣
記事IT・テクノロジー
今回はマテリアライズというCSSフレームワークを使って、ヘッダーナビと、カード型のリンクを作ってみたいと思います。基本コピペでOK！今回も画像たっぷりでお届けします！
完成見本
レスポンシブレイアウトなのでそれぞれの幅の見栄えをご覧ください🎵
⭐️ピンクのナビのところは上に固定してみました。スクロールしても常に上に表示されているのでいつでもアクセスできる形になっています。
▼1500px幅（画像が3つ並びになっています）
▼1000px幅（画像が2つ並びになっています）
▼970px幅（右のナビメニューが消えて左にハンバーガーメニューが出ています）
▼600px幅（画像が縦一列並びになっています）
▼600px幅（ハンバーガーメニューをクリックすると左からナビが出てきます）
マテリアライズのパーツ色々
https:// materializecss.com/
▼マテリアライズのサイトのCSSやComponentsのところにコピペで使える見本があります。
今回はこれらをいくつか組み合わせて作成してみたものになります。
1️⃣マテリアライズのCSSとJavaScriptをhtmlにセットする！
早速作っていきます。
▼まずは前回の記事を参考に、MaterializeのCSSとJavaScriptを設定しておいてくださいね🌈
2️⃣jQueryを使えるようセットする！
今回ハンバーガーメニューをクリックしてサイドナビが出るところでjQueryを使いたいので、使えるように設定しておきます。
▼下記サイトにアクセス
https:// cdnjs.com/libraries/jquery
▼</>のマークをクリックするとタグごとコピー出来ます。
これをhtmlの</body>（body閉じタグ）の上の、materialize.min.jsの上にペーストします。
▼htmlはこんな感じになりました
3️⃣bodyタグ内にhtmlコピペ！
▼<body> と <script 〜 の間に下記コードをコピペして入れてください。
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="rakuten.co.jp">Men</a></li>
<li><a href="rakuten.co.jp">Women</a></li>
<li><a href="rakuten.co.jp">Kids</a></li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav" id="mobile-demo">
<li><a href="rakuten.co.jp">Men</a></li>
<li><a href="rakuten.co.jp">Women</a></li>
<li><a href="rakuten.co.jp">Kids</a></li>
</ul>
<div class="container">
<div class="row">
<div class="col s12">
<h4>Featured!</h4>
</div>
<div class="col s12 m6 xl4">
<div class="card">
<div class="card-image">
<img src="img/image01.jpg" />
<span class="card-title indigo-text text-lighten-1">ビジネスシューズ</span>
</div>
<div class="card-content">
<p>スーツスタイルがワンランクアップ間違いなしのビジネスシューズを厳選してご紹介！</p>
</div>
<div class="card-action">
<a href="#">特設ページはこちら！<i class="material-icons right">keyboard_arrow_right</i></a>
</div>
</div>
</div>
<div class="col s12 m6 xl4">
<div class="card">
<div class="card-image">
<img src="img/image02.jpg" />
<span class="card-title purple-text text-lighten-1">ハイヒール</span>
</div>
<div class="card-content">
<p>特別な日からリゾートにぴったりなものまでテンションが上がるハイヒールをピックアップしてお届け！</p>
</div>
<div class="card-action">
<a href="#">特設ページはこちら！<i class="material-icons right">keyboard_arrow_right</i></a>
</div>
</div>
</div>
<div class="col s12 m6 xl4">
<div class="card">
<div class="card-image">
<img src="img/image03.jpg" />
<span class="card-title green-text text-lighten-1">スニーカー</span>
</div>
<div class="card-content">
<p>ビジネスシーンやスカートなどにも合わせやすいクールなスニーカーを集めてみました！</p>
</div>
<div class="card-action">
<a href="#">特設ページはこちら！<i class="material-icons right">keyboard_arrow_right</i></a>
</div>
</div>
</div>
</div>
</div>
⭐️画像はimgフォルダを作りその中に、image01.jpg, image02.jp, image03.jpgを入れました。
⭐️クリックしたら飛びたいページはaタグの中のhrefのところにURLを入れてください。
4️⃣jQueryコードコピペ！
ハンバーガーメニューをクリックしてサイドナビが出るようにするため、以下をコピーして…
<script>
$(document).ready(function () {
$('.sidenav').sidenav()
})
</script>
jquery.min.jsより下にペーストします。
▼最終的なhtmlはこのようになりました
以上で、上記完成見本のレイアウトの完成です！ブラウザで確認してみてくださいね⭐️
これからもWeb制作にちょこっと役立つ豆知識をお届けして参りますので、また見に来ていただけると嬉しいです。😊
今回は以上となります。お疲れ様でした⭐️
