Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
MASONRY.JSについて話すよ
(#^.^#)
~今日の目次~
自己紹介
こんな人向けのお話
グリッドレイアウト
Bootstrapでやってみる
Masonryでやってみる
自己紹介
自己紹介

元々、12年間ぐらい生産管理システム、
会計システムのSE
インターネットと隔離された環境から、
2011年10月Web制作へ!
昼は、京橋の某社で
Web制作(WordPress,js,PHP,Ruby)の担当
自己紹介

Twitter:@AsbyuKobayashi
ブログ:http://iao.wktktravel.com/
ブログ書いたり、自社サービス作ったり、
制作案件したりしてます。
自己紹介

2013年 WordCamp Tokyo 制作チームにスタッフ参加

2014年もスタッフ参加します(@^^)/~~~
今日は、こんな人向けのお話
デザインに「キレ」がほしい
エンジニアでもかっこよく
経験浅いけど、「おおおっ!」と思ってほしい
グリッドレイアウト
かっこいい
グリッドレイアウト

かっこいい!!興奮する!!!
グリッドレイアウト

すっきりした感じがたまらない!!
グリッドレイアウト

見とれる!
グリッドレイアウト

やってみる!!
TWITTER BOOTSTRAP(CSS)でやってみる!
サンプル作った!できた!!
BTSP01.HTML
レスポンシブにも対応!!
Twitter Bootstrap(CSS)でやってみる!

次、これはどう!?
BTSP02.HTML
カラムやイメージのサイズが異なる。
これもでけた!・・・・???
Twitter Bootstrap(CSS)でやってみる!

なにかおかしい。
次のカラムが詰まらない。
前の要素の高さを超えれない。

CSS(FLOAT)レイアウトの限界
Twitter Bootstrap(CSS)でやってみる!

FLOATがダメならPOSITIONレイアウト
JAVASCRIPTで計算してやる
再度、みてみる。
BTSP02.HTML
Twitter Bootstrap(CSS)でやってみる!

いや、まてまてまて。
positionの計算がメンドイ。
レスポンシブでの再配置の考慮も必要

やはり、限界・・・・
ようやく、救世主 登場!

MASONRY.JS !!
Masonryでやってみる!

MASONRY.JS を使うとこうなる!
http://sakurashinmachi-potal.com/post-hear.php
Masonryでやってみる!

公式サイト
http://masonry.desandro.com/

ダウンロードして、READ!
<cittp=tx/aacit sc"i/aor/aor.i.s>/cit
srp ye"etjvsrp" r...
Masonryでやってみる!

レイアウト例とコード例

上手く配置されないときは、columWidthが原因のときが多い!
Masonryでやってみる!

IMAGESLOADED.JS が重要
完全にロードが終わってからレイアウトを再配置させる
イメージのheightを確保する。
Masonryでやってみる!

スマホ時の注意点
画面幅が狭いと、上手くレイアウトされない。
ある程度、幅が狭くなったときは、Masonry.jsを無効にする
vrmnwdh=60 / iaの縦の横幅
a i_it
0; / Pd
$"cnan...
まとめ
グリッドレイアウトは、アイテムのHIGHTが
キモ
hightが同じ場合は、CSS(float)だけでOK!
hightが異なる場合は、Masonry.jsなどで、positionを計算!
imagesloaded.jsでイメージのロー...
おわり
Prochain SlideShare
Chargement dans…5
×

グリッドレイアウトを簡単に行うJavaScript!Masonry.js

3 903 vues

Publié le

グリッドレイアウトをMasonry.jsを使って実施してみました。

高さの違うアイテムを自動的に再配置して、グリッドレイアウトしてくるJavaScriptライブラリです。

また、スマートフォンデバイス、タブレットデバイスなどにも自動でレイアウトが行われるので非常に配置がしやすいです。

BootsStrapで組み合わせると非常に早く、高機能なレイアウトが作成できます。

Masonryのどのあたりが便利なのかに重点をおいて説明してみました。

Webページでのスライドは以下になります。
http://ticklecode.com/present/140309_jscafe_Masonry/

Publié dans : Technologie
  • Login to see the comments

グリッドレイアウトを簡単に行うJavaScript!Masonry.js

  1. 1. MASONRY.JSについて話すよ (#^.^#) ~今日の目次~ 自己紹介 こんな人向けのお話 グリッドレイアウト Bootstrapでやってみる Masonryでやってみる
  2. 2. 自己紹介
  3. 3. 自己紹介 元々、12年間ぐらい生産管理システム、 会計システムのSE インターネットと隔離された環境から、 2011年10月Web制作へ! 昼は、京橋の某社で Web制作(WordPress,js,PHP,Ruby)の担当
  4. 4. 自己紹介 Twitter:@AsbyuKobayashi ブログ:http://iao.wktktravel.com/ ブログ書いたり、自社サービス作ったり、 制作案件したりしてます。
  5. 5. 自己紹介 2013年 WordCamp Tokyo 制作チームにスタッフ参加 2014年もスタッフ参加します(@^^)/~~~
  6. 6. 今日は、こんな人向けのお話 デザインに「キレ」がほしい エンジニアでもかっこよく 経験浅いけど、「おおおっ!」と思ってほしい
  7. 7. グリッドレイアウト かっこいい
  8. 8. グリッドレイアウト かっこいい!!興奮する!!!
  9. 9. グリッドレイアウト すっきりした感じがたまらない!!
  10. 10. グリッドレイアウト 見とれる!
  11. 11. グリッドレイアウト やってみる!!
  12. 12. TWITTER BOOTSTRAP(CSS)でやってみる! サンプル作った!できた!! BTSP01.HTML レスポンシブにも対応!!
  13. 13. Twitter Bootstrap(CSS)でやってみる! 次、これはどう!? BTSP02.HTML カラムやイメージのサイズが異なる。 これもでけた!・・・・???
  14. 14. Twitter Bootstrap(CSS)でやってみる! なにかおかしい。 次のカラムが詰まらない。 前の要素の高さを超えれない。 CSS(FLOAT)レイアウトの限界
  15. 15. Twitter Bootstrap(CSS)でやってみる! FLOATがダメならPOSITIONレイアウト JAVASCRIPTで計算してやる 再度、みてみる。 BTSP02.HTML
  16. 16. Twitter Bootstrap(CSS)でやってみる! いや、まてまてまて。 positionの計算がメンドイ。 レスポンシブでの再配置の考慮も必要 やはり、限界・・・・
  17. 17. ようやく、救世主 登場! MASONRY.JS !!
  18. 18. Masonryでやってみる! MASONRY.JS を使うとこうなる! http://sakurashinmachi-potal.com/post-hear.php
  19. 19. Masonryでやってみる! 公式サイト http://masonry.desandro.com/ ダウンロードして、READ! <cittp=tx/aacit sc"i/aor/aor.i.s>/cit srp ye"etjvsrp" r=lbmsnymsnymnj"<srp>
  20. 20. Masonryでやってみる! レイアウト例とコード例 上手く配置されないときは、columWidthが原因のときが多い!
  21. 21. Masonryでやってみる! IMAGESLOADED.JS が重要 完全にロードが終わってからレイアウトを再配置させる イメージのheightを確保する。
  22. 22. Masonryでやってみる! スマホ時の注意点 画面幅が狭いと、上手くレイアウトされない。 ある程度、幅が狭くなったときは、Masonry.jsを無効にする vrmnwdh=60 / iaの縦の横幅 a i_it 0; / Pd $"cnanr)iaeLae(ucin) (#otie".mgsoddfnto({ / 横幅 / i ((idw.neWdh)< mnwdh{ f $wno)inrit( = i_it) $ ( / msny / aorでのレイアウトを停止 "cnanr)msny'eto'; #otie".aor(dsry) } }; ) スマホのときは個別にCSSレイアウトで調整する。
  23. 23. まとめ グリッドレイアウトは、アイテムのHIGHTが キモ hightが同じ場合は、CSS(float)だけでOK! hightが異なる場合は、Masonry.jsなどで、positionを計算! imagesloaded.jsでイメージのロードが終わってから配置させる! Twitter Bootstrap + Masonry.js の組み合わせは最速!最強! MASONRY.JSの使い方は、以下のサイトの ソースを見てもらうとわかると思います。 http://sakurashinmachi-potal.com/post-hear.php
  24. 24. おわり

×