Web制作で実績を作ろうパート②[Materialize]

2016年1月19日

今回は、Materialize.cssを使用してページを製作してみました。

実績なし
学生さんがweb業界に就職する際には、ポートフォリオが重要になってくると思います。
そんな方に役立てたらと思います。

前回、実績なしのWeb屋が個人実績を準備するで「0」からどのように準備したかを記事にしました。合わせてご参考になれば、ご覧ください。

今回は、実績作りのために「CSSフレームワークのMaterialize」を使ってサイトを作成しました。

導入方法から、ページ完成までを簡単に共有致します!!

スポンサーリンク

Materialize?

materialize
Google が発表した「マテリアルデザイン」をベースとしたフレームワークになります。

特徴

・Bootstrap利用者でも活用しやすいGrid等がありました。

・サイトのナビもひとしきりのフォーマットが充実。

・知識がない人でもドキュメントやサンプルコードがあり、参入しやすい。

・Sassも使える。

導入してみよう

なにはともあれ、まずは使ってみましょう。

materialize公式サイト

GetStartからcss/js等を取得してください。

マークアップもサンプルがあるので、コピペするだけです。
サイトから引用しております。

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

あとは、body以下にナビゲーションやヘッダ画像・コンテンツのブロックを作成して、フッターまで作成するイメージとなります。

ちょっと楽したい人

material-lite
マテリアルデザインで、ブログ形式・企業向け・ダッシュボード系等のテンプレートが「Material Design Lite」」で、ダウンロードできちゃいます。

マテリアルサンプル画像
↓こん感じのページテンプレート。
ブログ系サイトテンプレート

ある程度、中を見てからやりたい人やカスタマイズしてみたい人にはオススメです。

公式サイト

僕は、勉強も兼ねていたので、真っ白から始めました。

作ってみよう

ここからは、実際に1ページ作成を簡単にご説明します。

STEP1:ナビから実装してみよう!

素晴らしい事に、「Materialize」では、サンプルコードもちゃんとあります。

ナビ実装
ナビやロゴの置き方も何ケースかあったので、必要に応じて使って見てください。

STEP2:各コンテンツ実装しよう!

公式サイトのCSS→Gridから記述例があるので、それを一読する。

grid

    <body>
      <div class="container">
        <!-- Page Content goes here -->
      </div>
    </body>

基本は、Bootstrapと同じく12分割の構造です。

    <div class="row">
      <div class="col s12 m4 l3">
      </div>
    </div>

size-type
各幅に応じて、s/m/lで数を設定するだけで、分割できちゃいます
細かくメディアクエリでサイズ調整する手間も吸収してくれるようです。

rowとcolで分割して、ヘッド画像・会社ならばサービス内容・お知らせ・フッター等を大枠だけhtmlでくんでしまいましょう。

STEP3:フッター

公式サイトのComponets→footerからサンプルコードを取得。
footer
これだけで形が出来上がっちゃいます。

STEP4:各種ブラシュアップ

STEP3までで、大枠が出来上がり、ある程度レイアウトがみえてくると思います。

各rowで分けた単位で、画像やテキスト等細かい調整をしましょう。
僕の場合は、style.cssを空っぽで作成して、そのファイルにブラシュアップするコードを書きました。
materialize.min.css/materialize.cssを読み込んだ後にstyle.cssを読み込んでスタイルを後から上書きするようなイメージです。

ライブラリのcssは極力触りたくなかった(バージョンアップ時等に困るので)ので、上書きする手法としてます。

1ページ出来上がったら、あとは子ページを同じような形式で作成していきましょう。
ヘッダー・フッター出来上がってるので、メインコンテンツを作成していくだけですね。

まとめ

Bootstrapを使った事がある方は、わりとすんなりと使えると思います。

Grid等のレスポンシブサイトで使えるものも豊富にあるので、コーディングもゼロベースに比べて早くできると思います。

デザインが苦手でも、アイコンも内包されていてサイトに取り込めば、いい感じのデザインが仕上がると思いました。