リールーブログ

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

Don't be shellfish...Tweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on TumblrShare on Facebook

前回に引き続き、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スタンプの宣伝になりますので、ぜひ使ってください!!




page top