無料レスポンシブデザインCSS+HTMLテンプレート Materialize



コリス様のサイト「Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize」で紹介されていたMaterializeのCSSデザインがとても気に入ったので、さっそく使ってみました。

これから作るサイト、全部これ使おうかな。。

ダウンロード

Materializeのサイトに行き、「GET STARTED」をクリックします。

MaterializeとSASSのダウンロードボタンがありますが、Materializeの方だけで大丈夫です。
(SASSがわかる人はSASSの方を選ぶと良いと思います。)

MaterializeをDLして解凍すると、cssフォルダ、fontフォルダ、jsフォルダがあります。
.DS_Storeファイルも生成されていますが、これは消去して大丈夫です。

HTML作成

そこにindex.htmlを作っていきます。

HTMLの例文がMaterializeのサイトにも記載されていますが、本当に最低限しか書いていないので、とりあえずのテストサイトを作りたいという方は下記のHTMLをお使い下さい。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="description" content="サイトの説明文を入力してください" />
    <meta name="keywords" content="サイトのキーワードを入力してください" />

    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <title>サイトのタイトルを入力してください</title>

  </head>

  <body>
    <!-- Navbar goes here -->
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">TITLE</a>
        <ul id="nav-mobile" class="right side-nav">
          <li><a href="menu1.html">Menu1</a></li>
          <li><a href="menu2.html">Menu2</a></li>
          <li><a href="menu3.html">Menu3</a></li>
        </ul>
        <!-- Include this line below -->
        <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
        <!-- End -->
      </div>
    </nav>

    <!-- Page Layout here -->
    <div class="row">

      <div class="col s12 m4 l3">
        <div class="collection">
          <a href="#content1" class="collection-item">コンテンツ1</a>
          <a href="#content2" class="collection-item">コンテンツ2</a>
          <a href="#content3" class="collection-item">コンテンツ3</a>
          <a href="#content4" class="collection-item">コンテンツ4</a>
        </div>
      </div>

      <div class="col s12 m8 l9">
        <h4 id="content1">コンテンツ1</h4>
        <p>
          テキスト1<br/>
          テキスト1<br/>
          テキスト1<br/>
          テキスト1<br/>
          テキスト1<br/>
          テキスト1<br/>
          テキスト1<br/>
          テキスト1<br/>
        </p>
        <h4 id="content2">コンテンツ2</h4>
        <p>
          テキスト2<br/>
          テキスト2<br/>
          テキスト2<br/>
          テキスト2<br/>
          テキスト2<br/>
          テキスト2<br/>
          テキスト2<br/>
          テキスト2<br/>
        </p>
        <h4 id="content3">コンテンツ3</h4>
        <p>
          テキスト3<br/>
          テキスト3<br/>
          テキスト3<br/>
          テキスト3<br/>
          テキスト3<br/>
          テキスト3<br/>
          テキスト3<br/>
          テキスト3<br/>
        </p>
        <h4 id="content4">コンテンツ4</h4>
        <p>
          テキスト4<br/>
          テキスト4<br/>
          テキスト4<br/>
          テキスト4<br/>
          テキスト4<br/>
          テキスト4<br/>
          テキスト4<br/>
          テキスト4<br/>
        </p>
      </div>

    </div>
    
    <footer>
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Footer Content</h5>
            <p class="grey-text 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 class="white-text">Links</h5>
            <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
          ? 2014 Copyright Text
          <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
        </div>
      </div>
    </footer>
    
    <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 type="text/javascript" src="js/init.js"></script>
    
  </body>
</html>

文字コードはUTF-8で保存して下さい。

なお、このHTMLを使用する際には、「init.js」をjsフォルダに入れておく必要があります。
Materialize専用init.jsはこちら

表示するとこんな感じになります。

materialize用HTMLを表示した様子、Windowが大きい場合 materialize用HTMLを表示した様子、Windowが小さい場合
大きいウィンドウで表示した場合 小さいウィンドウで表示した場合

ナビゲーションの色を変更

ナビゲーションの色を変えないと、もろに「Materialize」なので、せめてここを変更。

cssフォルダ内の「materialize.min.css」をいじります。
「#ee6e73」がデフォルトカラーなので、ここを任意のカラーコードにするだけでOKです。

あとは自分のサイトに合わせて好きに組み合わせる。

Materializeのサイトに載っているアイコン等も駆使して、自分好みのサイトにしていきます。

かなり簡単な作業で、今風のお洒落サイトがちゃちゃちゃっと作れてしまいました。
materializeを利用して作成したサイト、トップページ materializeを利用して作成したサイト、コンテンツページ

Materializeに感謝です!

補足

Materializeにはまだ、「Topに戻る」系が実装されていません。
WEBOPIXEL様の「jQueryでスクロールすると表示する系いろいろ」あたりを参考にすると良さそうです。

この記事を書いている間にもMaterializeのサイトに新しい機能が続々と追加されています。
そのうち「Topに戻る」も実装されそうですね。

これからの発展に期待したいテンプレートです。

シェアする

  • このエントリーをはてなブックマークに追加

関連記事

  1. 国内ソーシャルアイコンセット
  2. googleanalytics設定画面
  3. fotorで年賀状、テキスト入力
  4. ブログ収益報告_見積もり収益額グラフ

コメントをお待ちしております

Rippoutai管理人


モノづくり起業を応援するRippoutai管理人、電気女子の顔写真です


電気女子(はまこ)

ワーキングマザーをしながら、サイドビジネスで小型電子モジュールの製造・販売をしています。
クラウドファンディングで1000%支援達成の実績あり。

モノづくり副業応援!
山梨起業応援!

アーカイブ