dayjournal | Materialize #001

今回はCSSフレームワークの１つであるMaterializeの使い方について紹介します。

Materializeとは、Googleが提唱するマテリアルデザインを取り入れたフレームワークです。通常は全てのスタイルを自分で作成する必要がありますが、Materializeはよく使われるスタイルがあらかじめ定義してあるので、それを利用することにより整ったデザインのページが作成可能です。もちろんレスポンシブにも対応しています。Bootstrapと似ているのでどちらを利用するかは好みによると思います。

Materializeを利用するには、Materializeのサイトからファイル一式をダウンロードします。 Materialize

ダウンロードしたファイルを解凍すると下記のようなファイル構成になります。

次に、サイト内のHTML Setupをコピーしてindex.htmlを作成します。パスやタグなど必要なコードを追加して実行します。

index.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
    <title>Materialize_sample</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="./css/materialize.css" rel="stylesheet" media="screen,projection" />
</head>

<body>

    <h1>Hello, world!</h1>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="./js/materialize.js"></script>
</body>

</html>

作成したindex.htmlを実行すると下記のように表示されます。

これでMaterializeで構築する準備ができます。あとはHTML・CSS・JavaScriptを利用して各部品を組み合わせて構築していきます。

参考文献
Materialize

dayjournal memo

Materialize #001 - 構築準備

Yasunori Kirimoto 2016/5/16

index.html