レスポンシブに対応したcssフレームワーク Materializeを使ってみた感想

レスポンシブに対応したcssフレームワーク Materializeを使ってみた感想

仕事で使えそうないい感じのcssフレームワークを探していました。datepickerがついてて、レスポンシブに対応したものって感じで。
今回は、Materializeっていう結構いい感じのcssフレームワークを見つけたので、ざっくりご紹介します。

Materializeの基本情報

materializecss
Materialize
・レスポンシブ対応
・Sass対応
・ライセンス MIT

僕はbootstrapを仕事でかなり使ったことがあったので、最初の印象としては簡単そうだし、シンプルかもと思いました。
実際に使ってみても簡単なページであれば何も考えずにコピペでできちゃいます。

Materializeで実際にコーディングしてみた

ヘッダー、フッターがあって、コンテンツがある簡単なレイアウトであれば以下のような感じでできちゃいます。今回はついでにformも入れることにしました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
  </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>

    <script>
      $(function(){
        $('.datepicker').pickadate();
      });
    </script>

    <nav class="grey lighten-5">
      <div class="container">
        <div class="nav-wrapper">
          <a href="#" class="brand-logo black-text">Logo</a>
          <ul id="nav-mobile" class="right side-nav">
            <li><a href="sass.html" class="black-text">Sass</a></li>
            <li><a href="components.html" class="black-text">Components</a></li>
            <li><a href="javascript.html" class="black-text">JavaScript</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="page-intro pink white-text">
        <div class="container">
            <div class="row">
                <div class="col m12 s12">
                    <h2>pagetitle</h2>
                    <h5>page description</h5>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
      <h1>Card</h1>
      <div class="row">
        <div class="col s12 m6">
          <div class="card">
            <div class="card-content black-text">
              <span class="card-title black-text">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href='#'>This is a link</a>
            </div>
          </div>
        </div>

        <div class="col s12 m6">
          <div class="card">
            <div class="card-content black-text">
              <span class="card-title black-text">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href='#'>This is a link</a>
            </div>
          </div>
        </div>

        <div class="col s12 m6">
          <div class="card">
            <div class="card-content black-text">
              <span class="card-title black-text">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href='#'>This is a link</a>
            </div>
          </div>
        </div>

        <div class="col s12 m6">
          <div class="card">
            <div class="card-content black-text">
              <span class="card-title black-text">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href='#'>This is a link</a>
            </div>
          </div>
        </div>
      </div>

      <h1>form</h1>
      <div class="row">
        <form class="col s12">
          <div class="row">
            <div class="input-field col s6">
              <input id="first_name" type="text" class="validate">
              <label for="first_name">First Name</label>
            </div>
            <div class="input-field col s6">
              <input id="last_name" type="text" class="validate">
              <label for="last_name">Last Name</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="username" type="text" class="validate">
              <label for="username">Username</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="password" type="password" class="validate">
              <label for="password">Password</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="email" type="email" class="validate">
              <label for="email">Email</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="date" type="date" class="datepicker validate">
              <label for="email">date</label>
            </div>
          </div>
        </form>
      </div>
    </div>
    <footer class="page-footer grey lighten-3">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5>Footer Content</h5>
            <p class="text-lighten-4">You can use rows and columns here to organize your footer content.</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5>Links</h5>
            <li><a class="text-lighten-3 black-text" href="#!">Link 1</a></li>
            <li><a class="text-lighten-3 black-text" href="#!">Link 2</a></li>
            <li><a class="text-lighten-3 black-text" href="#!">Link 3</a></li>
            <li><a class="text-lighten-3 black-text" href="#!">Link 4</a></li>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container black-text">
        2014 Copyright Text
        <a class="text-lighten-4 right" href="#!">More Links</a>
        </div>
      </div>
    </footer>
  </body>
</html>

Materializeで実際にコーディングしてみた感想

最初に思った通り簡単にできました。componentsにあるものだけでもそれなりのページができます。ほかにも、カラーコードも用意されていてページに統一感もつくれます。もし作るサイトで合う色が無い場合でも同じルールでcssを追記すれば問題なく使えますし、便利ですね。

さらに、使ってみたい機能

・Dropdownメニュー
・モーダル
・パララックス効果
・tabメニュー

など他にもたくさんありますがどれもチュートリアルに従えば簡単に実装できてしまうものばかりです。
showcaseではMaterialize cssを使ったサイトが紹介されていたます。それらを参考にサイト制作に活かすといいかなと思います。

Materializeを使ってみてちょっと使いにくいかなと思ったとこ

formを入力するときにoutline(青い線)がでてしまう

form入力したときの青い線
chormeでしか確認していないのですが、入力すると思ってもいない場所にでてきてしまいます。(大体、画面の真ん中くらい)とはいえ、簡単なcssで表示されなくなります。

*:focus {
  outline: none;
}

スマホサイトで見るとdatepickerがレイアウト崩れる

レイアウト崩れ
これはちょっと問題かも。
メディアクエリの指定があるので、datepicker周りのメディアクエリを消すしか方法はなさそうです。
なので、これに関してはある程度、修正、カスタマイズが必要になりそうです。

※chormeのデベロッパーツールで確認をして、実際にはコーディングして試していません。すいません。

Materializeを使ってみたまとめ

CSSフレームワークを使う上で一番のメリットってグリッドレイアウトじゃないかな思っています。というか、グリッドなしでは最近のサイト制作は無理かもとも思っています。見た目きれいに統一できますし、特にレスポンシブデザインの場合は工数もかなり削減することができますね。

とはいえ、前の記事の「WEBデザイナーが選ぶCSSフレームワーク10個紹介」にも書かせていただいたのですが、webデザイナー(コーディングも担当する人)、フロントエンドエンジニアは作るサイト、サービスに合わせてCSSフレームワークを選択する力が必要だなと改めて思います。

なので、実際にフレームワークを使ってみるとここがちょっと使いにくいなぁとかもありますし、今回のサイトにはシンプルなグリッドレイアウトさえあればいいというパターンもありますね。

今後もいろんなcssレイアウトを試していきたいと思います。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

同じカテゴリーの記事

ページの先頭へ