Materialize & Sass でマテリアルデザインのウェブサイトを作ってみる

Home > PC / スマホ > Materialize & Sass でマテリアルデザインのウェブサイトを作ってみる
すき 0
うんこ 0

フレームワーク選びはこちらのページが参考になりました!

SASSのインストール

RubyGemsをアップデートする

ここは省略可能だそうです。

Sass のインストール

※ OS X 10.11 (El Capitan)  だと、「sudo gem install sass」では下記のエラーが出ました。

Sassがインストールされたことを確認

Materialize のDL

Getting Started – Materialize

こちらから、「Sass」の方をDLします。

DLしたディレクトリに移動します

sass ディレクトリを監視して自動コンパイルさせる

下記のcssファイルが作成されます。

  • css/materialize.css
  • css/materialize.css.mapcss

これで準備は完了!

HTML の作成

あとは、htmlファイルの作成です!
showcase をDLしてみたり、materializeのサイトを調べたり…パーツを当て込んで見たり…

テスト作成したページはこちらです。

導入も簡単でデザインも綺麗だし良い感じです。

ちょっと苦労したところ

※ 説明が少ない? (探しきれてないだけ?)のでコードを見てやり方を探したりした。
※ パーツを貼り付けても完全にレスポンシブ対応じゃなかったりするので微調整の必要は出てきそうです。

参考にさせて頂きました

 

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください