簡単!マテリアルデザイン「Materialize」でサイト作ってみた!第2回目

2015.02.05

前回に引き続き、Googleマテリアルデザインのフレームワーク「Materialize」でWEBサイトの作り方やコンポーネントを紹介します!
 
/* マテリアルデザイン「Materialize」でサイト作ってみた! */ ●第一回目-「DLからナビゲーション実装まで」第二回目-「DLからナビゲーション実装まで」第三回目-「アイコン、ボタン、シャドー設置まで」
 
掘り出しモノスタンプを見つける「DIG Stamp」 LINEスタンプ宣伝ツール「LINEスタンプPRサービス」を始めました!
 
LINEスタンプの宣伝になりますので、ぜひ使ってください!!

 

早速WEBサイトを作っていきましょ!

ボリュームがありすぎるので数回に分けて紹介します! 今回はグリッドレイアウトとパララックスの理解までです!
 
1)グリッドレイアウトを理解します!  1-1)レイアウト基本構成を理解しましょう  1-2)「offset」を理解しましょう  1-3)デバイス別レイアウトを理解しましょう 2)パララックスを理解します!
 
デモサイト デモサイト URL:http://liruu.com/demo/materialize/
 
1)グリッドレイアウトを理解します!
 
ナビゲーションから下の設置したコンテンツを作ります。 その前にBootstrapも同じですが、グリットレイアウトが準備されていますので紹介していきます。
 
「Materialize」のグリットレイアウト
 
基本的にはBootstrapと同じで、クラス名が短くなってるくらいです。 画面全体のレイアウトを12分割し、さまざまなレイアウトを展開できます。 また、スマホ・タブレット・PCとデバイスごとにも指定できます。
 
1-1)レイアウト基本構成を理解しましょう
 
画面を12分割し、幅の指定(1~12)でレイアウトを組んでいきます。 基本構成は下記の画像の通りです。
 
matrial01
 
コードはこちら ↓
/*---------*/


<div class="container">
    <div class="row">
    <div class="col s12">
            コンテンツが入ります
    </div>
   </div>
</div>


/*---------*/

 
containerやrow内にクラス名「col」を指定します。 数学の公式のように覚えましょう! クラス名「s12」の数字の部分は、上記画像のように1~12の中から任意に指定します。 指定した数字の幅が、コンテンツ領域となります。
 
また、一行に複数のコンテンツを入れる場合、 必ず合計12にする必要はありません。
 
1-2)「offset」を理解しましょう
 
その場合は「offset」を使います。
 
「offset」は「余白」のことです。 material02 コードはこちら ↓
/*---------*/


<div class="container">
 <div class="row">
      <div class="col s12">有効幅がマックスのエリア</div>
      <div class="col s6 offset-s6">有効幅が6個のエリアで、左側に6個分のブランク</div>
    </div>
</div>


/*---------*/

 
常に有効幅の左側に「余白」が入りますので、ご注意ください。 もし、有効幅を中央寄せにしたければ、以下の2種類のコードがおススメです。
 
/*---------*/

// 1個目 - 幅MAXで中身を中央寄せ(画像ファイルなどで有効)
<div class="container">
 <div class="row">
      <div class="col s12 center">有効幅がマックスで中身だけ中央寄せ</div>
    </div>
</div>

// 2個目 - 余白を2個分とって有効幅を8個分
<div class="container">
 <div class="row">
      <div class="col s8 offset-s2">有効幅が8個のエリアで、左側に2個分のブランク</div>
    </div>
</div>


/*---------*/

 
1-3)デバイス別レイアウトを理解しましょう
 
デバイス別にレイアウトを変更することもできます。
 
material03
 
コードはこちら ↓
/*---------*/


<div class="container">
 <div class="row">
      <div class="col s12 m6">有効エリア</div>
    </div>
</div>


/*---------*/

 
上記画像の例では、 スマホでは有効幅をMAXで、タブレット・PCでは有効幅6個分の85%で表示されるようになります。 基本的にスマホでは有効幅MAXの方が操作しやすいですが、パーツによって使い分けてください。 ブレイクポイントは、922pxと600pxです。
 
2)パララックスを理解しましょう
 
最近のサイトはパララックスやアニメーションは当たり前の時代になってきました。 「Materialize」でもパララックスが準備されています。
 
「Materialize」のパララックスDEMO
 
ちょっと分かりにくいですが、DEMOサイトの画像の箇所がパララックスになっています。 自身で作ったサイトも同様にパララックスを使っていますので、ゆっくりスクロールしてみてください。
 
デモサイト デモサイト URL:http://liruu.com/demo/materialize/
 
2-1)パララックスを設置しましょう
 
まず、パララックスしたい画像を準備します。 HTML、JS、CSSを任意に追記します。
 
HTMLコードはこちら ↓
/*---------*/


<div class="parallax-container">
 <div class="parallax"><img src="パララックス用画像" alt="" /></div>
</div>



/*---------*/

 
JSコードはこちら ↓
/*---------*/


$('.parallax').parallax();


/*---------*/

 
CSSコードはこちら ↓
/*---------*/


.parallax-container {
      height: "高さを指定します";
 }



/*---------*/

 
自身が作ったパララックスには画像上にテキストが入っています。 HTMLのコードはこちら↓
/*---------*/


<div class="parallax-container valign-wrapper">
    <div class="section no-pad-bot">
        <div class="container">
            <div class="row center"><h1 class="col s12 light white-text">いろいろ充実!</h1></div>
        </div>
    </div>
    <div class="parallax"><img src="パララックス用画像"  alt="" /></div>
</div>


/*---------*/

 
CSSのコードはこちら↓
/*---------*/


.parallax-container .section {
 width: 100%;
}
.parallax-container {
 height: auto;
 min-height: 高さ指定;
}
@media only screen and (max-width : 992px) {
 .parallax-container .section {
  position: absolute;
  top: 任意の数値;
  }
}


/*---------*/

 
h1タグの部分は、もちろんテキスト以外の要素も入れられますので、 使い方次第でいかようにも展開できます。
 
次回はアイコンやシャドー、ボタンを使ってコンテンツ作りを紹介します!
 
/* マテリアルデザイン「Materialize」でサイト作ってみた! */ ●第一回目-「DLからナビゲーション実装まで」第二回目-「DLからナビゲーション実装まで」第三回目-「アイコン、ボタン、シャドー設置まで」
 
掘り出しモノスタンプを見つける「DIG Stamp」 LINEスタンプ宣伝ツール「LINEスタンプPRサービス」を始めました!
 
LINEスタンプの宣伝になりますので、ぜひ使ってください!!
Webサイトテンプレート
WEBサイトホームページ制作
Webサイトテンプレート

Contact

About us

ご要望に沿いながら、効果を最大限に引き出すデザインや柔軟な企画アイディアを創造することをモットーに、東京を拠点として活動を広げています。

About us

Contact

WEBサイト制作などのご質問やご依頼は、メールフォームにて承っております。
ご送付いただいてから、7営業日以内に返信いたします。
 
サイトリニューアルやキャラクター制作などをお考えでしたら、ぜひお問合せください。

Contact