Home Made Garbage

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

ホーム
電子工作
Raspberry Pi
WordPress
IOT

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

CSSフレームワーク30選!デザイン含めて一括総まとめ
CSSフレームワークを使うことで作業時間は減り、品質も上がる。CSSのフレームワークを30個まとめてみた。デザインも載せてあるので、フレームワーク選択に役立つだろう。

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のサイトを調べたり…パーツを当て込んで見たり…

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

Home Made Garbage
ホームメイドガービッジ 家族4人の手作りおもしろブログ。電子工作、Raspberry Pi、Arduino、Web、音楽など。

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

ちょっと苦労したところ

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

参考にさせて頂きました

 

コメントを残す

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

TOP