すべてのカテゴリ

マテリアライズとは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のものを使い

今回はマテリアライズという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▼</>のマークをクリックす