Monthly Archives: 5月 2016

Materialize #004 – Parallax

 

MaterializeでParallaxを構築するには下記のように記述します。

 

Materializeのサイト内のParallaxを確認すると、サンプルがあるのでそれを参考にParallaxの機能を実装してみます。

Materialize_004_01

 

「index.html」と「script.js」を修正します。
「stylesheet.css」と「sample.JPG」を追加します。

 

index.html

index.html
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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="./materialize/css/materialize.css" rel="stylesheet" media="screen,projection" />
    <link href="./css/stylesheet.css" rel="stylesheet" />
 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="./materialize/js/materialize.js"></script>
    <script src="./js/script.js"></script>
</head>
 
<body>
 
    <ul id="dropdownTop" class="dropdown-content">
        <li><a href="collapsible.html">JS 01</a></li>
        <li><a href="collapsible.html">JS 02</a></li>
        <li><a href="collapsible.html">JS 03</a></li>
    </ul>
 
    <nav>
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdownTop">Javascript<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
            <ul class="side-nav" id="mobile-demo">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
        </div>
    </nav>
 
    <h1>Hello, world!</h1>
 
    <div class="parallax-container">
        <div class="parallax"><img src="./img/sample.JPG"></div>
    </div>
 
</body>
 
</html>

 

stylesheet.css

stylesheet.css
CSS
1
2
3
4
5
6
7
body {
    height: 1500px;
}
 
.parallax-container {
    height: 300px;
}

 

script.js

script.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function ($) {
    $(function () {
 
        $('.button-collapse').sideNav();
 
        $('.dropdown-button').dropdown({
            constrain_width: false,
            hover: true,
            belowOrigin: true
        });
 
        $('.parallax').parallax();
 
    });
})(jQuery);

 

作成したindex.htmlを実行すると下記のように表示されます。
スクロールに応じて画像自体もスクロールされます。

Materialize_004_02

 

画像の高さ変更：

CSS
1
2
3
.parallax-container {
    height: 600px;
}

 

ちょっとしたアクセントに使えそうです。

 
 

  • 参考文献

Materialize

 

Walking #051

 

日付 曜日 歩数
2016.05.22 日 3578
2016.05.23 月 13936
2016.05.24 火 10384
2016.05.25 水 9425
2016.05.26 木 2627
2016.05.27 金 5830
2016.05.28 土 11480
合計
57260

 

Materialize #003 – ドロップダウン

 

Materializeでドロップダウンを構築するには下記のように記述します。

 

Materializeのサイト内のDropdownを確認すると、サンプルがあるのでそれを参考にドロップダウンの機能を実装してみます。

Materialize_003_01

 

前回作成した「index.html」と「script.js」を修正します。

 

index.html

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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="./materialize/css/materialize.css" rel="stylesheet" media="screen,projection" />
</head>
 
<body>
 
    <ul id="dropdownTop" class="dropdown-content">
        <li><a href="collapsible.html">JS 01</a></li>
        <li><a href="collapsible.html">JS 02</a></li>
        <li><a href="collapsible.html">JS 03</a></li>
    </ul>
 
    <nav>
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdownTop">Javascript<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
            <ul class="side-nav" id="mobile-demo">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
        </div>
    </nav>
 
    <h1>Hello, world!</h1>
 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="./materialize/js/materialize.js"></script>
    <script src="./js/script.js"></script>
</body>
 
</html>

 

script.js

script.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
(function ($) {
    $(function () {
 
        $('.button-collapse').sideNav();
 
        $('.dropdown-button').dropdown({
            constrain_width: false,
            hover: true,
            belowOrigin: true
        });
 
    });
})(jQuery);

 

作成したindex.htmlを実行すると下記のように表示されます。
メニューのJavascriptと表示されている場所にマウスをhoverするとドロップダウンが表示されます。

Materialize_003_02

 

分割線を追加：
class=”divider”を追加します。

1
2
3
4
5
6
7
    <ul id="dropdownTop" class="dropdown-content">
        <li><a href="collapsible.html">JS 01</a></li>
        <li class="divider"></li>
        <li><a href="collapsible.html">JS 02</a></li>
        <li class="divider"></li>
        <li><a href="collapsible.html">JS 03</a></li>
    </ul>

 

クリックでドロップダウン表示：
hoverの記述を変更します。

JavaScript
1
2
3
4
5
        $('.dropdown-button').dropdown({
            constrain_width: false,
            hover: false,
            belowOrigin: true
        });

 

メニュー上にドロップダウン表示：
belowOriginの記述を変更します。

JavaScript
1
2
3
4
5
        $('.dropdown-button').dropdown({
            constrain_width: false,
            hover: true,
            belowOrigin: false
        });

 

ナビゲーションバーと組み合わせてドロップダウンも実装することが可能です。オプションで簡単なカスタマイズも出来るので使いやすいです。

 
 

  • 参考文献

Materialize

 

Walking #050

 

日付 曜日 歩数
2016.05.15 日 1648
2016.05.16 月 7104
2016.05.17 火 10743
2016.05.18 水 2437
2016.05.19 木 6435
2016.05.20 金 10173
2016.05.21 土 1243
合計
39783

 

Materialize #002 – ナビゲーションバー

 

Materializeでナビゲーションバーを構築するには下記のように記述します。

 

Materializeのサイト内のNavbarを確認すると色々なサンプルがあります。
今回は、「Mobile Collapse Button」を実装してみます。

Materialize_002_01

 

前回作成した「index.html」の修正と、新規で「script.js」を作成してjQueryを少し記述します。

 

index.html

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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="./materialize/css/materialize.css" rel="stylesheet" media="screen,projection" />
</head>
 
<body>
 
    <nav>
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
            <ul class="side-nav" id="mobile-demo">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
        </div>
    </nav>
 
    <h1>Hello, world!</h1>
 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="./materialize/js/materialize.js"></script>
    <script src="./js/script.js"></script>
</body>
 
</html>

 

script.js

script.js
JavaScript
1
2
3
4
5
6
7
(function ($) {
    $(function () {
 
        $('.button-collapse').sideNav();
 
    });
})(jQuery);

 

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

Materialize_002_02

 

デフォルトでレスポンシブ対応もされています。

Materialize_002_03

 

Materialize_002_04

 

バーの色を変更：
navの記述を変更します。

1
<nav class="light-blue darken-1">

 

文字を内側にオフセット：
div class=”nav-wrapper”の記述を変更します。

1
<div class="nav-wrapper container">

 

色々な種類のナビゲーションバーを手軽に実装できます。細かいカスタマイズは別としてCSSとjsを意識しないで実装可能です。

 
 

  • 参考文献

Materialize

 

Materialize #001 – 構築準備

 

今回はCSSフレームワークの１つである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

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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を利用して各部品を組み合わせて構築していきます。

 
 

  • 参考文献

Materialize

 

Walking #050

 

日付 曜日 歩数
2016.05.08 日 3947
2016.05.09 月 5493
2016.05.10 火 8476
2016.05.11 水 2769
2016.05.12 木 2154
2016.05.13 金 3231
2016.05.14 土 13684
合計
39754

 

Walking #049

 

日付 曜日 歩数
2016.05.01 日 4693
2016.05.02 月 8467
2016.05.03 火 4958
2016.05.04 水 6239
2016.05.05 木 4972
2016.05.06 金 9943
2016.05.07 土 6835
合計
46107

 

Walking #048

 

日付 曜日 歩数
2016.04.24 日 7464
2016.04.25 月 5367
2016.04.26 火 4326
2016.04.27 水 6547
2016.04.28 木 5238
2016.04.29 金 5987
2016.04.30 土 4537
合計
39466