dayjournal memo

Total 967 articles!!

Materialize #001 - 構築準備

Yasunori Kirimoto's avatar

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

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


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

Materialize_001_01


Materialize_001_07


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

Materialize_001_04


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

Materialize_001_03


Materialize_001_05


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_001_06


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



book

Q&A