読者です 読者をやめる 読者になる 読者になる

MDLのgridを使ったレスポンシブサイト作成法(sass,hamlの場合)

MDLグリッドとは

MDLのグリッドを使うとレスポンシブサイトが簡単に作れる

MDLグリッドの構造

ブラウザの画面を横のサイズによって3つのグリットパターンで表示する。

pc=12col  ◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎

tab=8col   ◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎

sp=4col        ◼︎◼︎◼︎◼︎

各col数分だけ一度に並べて表示ができる。

綺麗に表示するためにはpcの場合tabの場合spの場合をクラスで設定してやる必要がある。

 

作成例1
・pcでは4列、tabでは2列、spでは1列で表示する場合

=========================

1.
head内でmaterial.min.cssを読み込む

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.css", 'data-turbolinks-track' => true

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

2.親要素にクラス(.mdl-grid)を追加
※.mainというdivを親とする

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

    .main.mdl-grid

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

3.子要素を追加しpcようのレイアウトをclassで指定(12÷4=3colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--3-col
      hoge

    .mdl-cell.mdl-cell--3-col
      hoga
    .mdl-cell.mdl-cell--3-col
      hogo
    .mdl-cell.mdl-cell--3-col
      hogu

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


3.
子要素(.mdl-cell)を追加しpc用のレイアウトをclassで追加(.mdl-cell--3-col
※(12col÷4列=3colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--3-col
      hoge

    .mdl-cell.mdl-cell--3-col
      hoga
    .mdl-cell.mdl-cell--3-col
      hogo
    .mdl-cell.mdl-cell--3-col
      hogu

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 


4
.tab用のレイアウトをclassで追加.mdl-cell--4-col-tablet
※(8col÷2列=4colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
      hoge

    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
      hoga
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
      hogo
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
      hogu

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

5.sp用のレイアウトをclassで追加.mdl-cell--4-col-phone
※(4col÷1列=4colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hoge

    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hoga
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hogo
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hogu

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

 

作成例2
・pcでは5列、tabでは2列、spでは1列で表示する場合

※pcのグリッド数が12colで5列で割ることができないので最初と最後の1colを非表示にする形で対応する

=========================

1.
head内でmaterial.min.cssを読み込む

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.css", 'data-turbolinks-track' => true

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

2.親要素にクラス(.mdl-grid)を追加
※.mainというdivを親とする。最初と最後の1colを表示しないので親要素のmax-widthを作成例1よりも大きくしておく。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

    .main.mdl-grid

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

3.子要素を追加しpcようのレイアウトをclassで指定(1col,2col,2col,2col,2col,2col,1col,
pc以外では最初と最後の1colを非表示にする(.displaynone)を追加

※.displaynoneは任意のstyle.sassに書き込むwidthが840px以内の時にdisplay:noneにする。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--1-col.displaynone

    .mdl-cell.mdl-cell--2-col
      hoge
    .mdl-cell.mdl-cell--2-col

      hoga
    .mdl-cell.mdl-cell--2-col
      hogo
    .mdl-cell.mdl-cell--2-col
      hogu
    .mdl-cell.mdl-cell--2-col
      hogi
   .mdl-cell.mdl-cell--1-col.displaynone

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


4.
tab用のレイアウトをclassで追加(.mdl-cell--4-col-tablet
※(8col÷2列=4colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--1-col.displaynone

    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hoge
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet

      hoga
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hogo
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hogu
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hogi
   .mdl-cell.mdl-cell--1-col.displaynone

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

5.sp用のレイアウトをclassで追加.mdl-cell--4-col-phone
※(4col÷1列=4colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--1-col.displaynone

    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hoge
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone

      hoga
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hogo
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hogu
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hogi
   .mdl-cell.mdl-cell--1-col.displaynone

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

6.任意のstyle.sassに.displaynoneを書き込む

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

@media screen and (max-width: 840px)
  .displaynone
    display: none

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

参考画像

 

f:id:kojiokano:20170302152655p:plain

f:id:kojiokano:20170302152710p:plain

f:id:kojiokano:20170302152720p:plain




///////////////////////////////////////////////////////////////////////

参考サイト

getmdl.io

///////////////////////////////////////////////////////////////////////