Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jQuery応用
2014/05/23
自己紹介
名前 杉山 彰啓(スギヤマ アキヒロ)
経歴 ・独立系企業就職しロボットの研究
・デジハリ生となり、在学期間に退職
・UI/UXを専門のデザイン会社へ就職
・デジハリの講師のオファーを受け会社を退職
  デジタルハリウッド ソーシャル...
応用!!
masonry
masonryのお話をする前に
今のサイトの流行というのは
どういったサイトがあるのか?
独自で書かれているサイト
http://fes.tokyo-motorshow.com/
ヘッダーを固定されているサイト
https://5jcup.org/
画像フルサイズのサイト
http://vertdegris.jp/
videoタグを使用したサイト
http://school.dhw.co.jp/
canvasを使用したサイト
http://panasonic.jp/shaver/lamdash/dna/index.html
SVGを使用したサイト
http://dentetsu.hankyu.co.jp/jinji/employment/
パララックスを使用したサイト
http://sumikiri.jp/
グリットでデザインされたサイト
http://torideken.com/
グリットでデザインされたサイトに注目
http://bm.straightline.jp/
作ってみると要素が縦長だたりして
キレイに見えなかったりします
masonry
masonry環境の準備
ライブラリーのダウンロード
jQuery:ライブラリー
masonry:ライブラリー
2つを用意します
http://masonry.desandro.com/
http://jquery.com/
masonry環境の準備
ライブラリーのダウンロード
jQuery:ライブラリー
masonry:ライブラリー
2つを用意します
http://masonry.desandro.com/
http://jquery.com/
masonry環境の指定
ライブラリーのパスを指定
<script src="js/masonry.pkgd.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1...
masonry環境の指定2
masonryの動作指定
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 200
});
});
itemSele...
masonry環境の指定3
masonryのオプション
・一列の幅サイズ:columnWidth: 数値
・スムースアニメーション設定:isAnimated: false又true
・親要素の幅サイズがピッタリ:isFitWidth: fals...
masonry注意事項
masonryを使用して画像ギャラリーつくった場合
画像の読込みのタイミング遅かったりするとレイ
アウトが崩れてしまう時があります
画像をローディングしてあと実行してくるスクリ
プトを実行する必要がでてきます
masonry注意事項
imagesloaded
https://github.com/desandro/imagesloaded
masonry環境の指定復習
masonryの動作を以下のように指定をしていました
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 200
}...
masonry環境の指定プラスα
masonryの動作指定
$(function(){
$('#container').imagesLoaded(function(){
$('#container').masonry({
itemSelecto...
今回のおさらい
・最近の流行について
・masonryについて
最後にちょっとしたものを作ってみました
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Jquery 140522

1,385 views

Published on

第5回 HTML5ビギナーズでの登壇資料となります

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Jquery 140522

  1. 1. jQuery応用 2014/05/23
  2. 2. 自己紹介 名前 杉山 彰啓(スギヤマ アキヒロ) 経歴 ・独立系企業就職しロボットの研究 ・デジハリ生となり、在学期間に退職 ・UI/UXを専門のデザイン会社へ就職 ・デジハリの講師のオファーを受け会社を退職   デジタルハリウッド ソーシャルアプリクリエイター専攻 ・フリーランスとなる ・inopを立ち上げる ・inopを辞める ・もう一度フリーランスの道へ
  3. 3. 応用!!
  4. 4. masonry
  5. 5. masonryのお話をする前に
  6. 6. 今のサイトの流行というのは どういったサイトがあるのか?
  7. 7. 独自で書かれているサイト http://fes.tokyo-motorshow.com/
  8. 8. ヘッダーを固定されているサイト https://5jcup.org/
  9. 9. 画像フルサイズのサイト http://vertdegris.jp/
  10. 10. videoタグを使用したサイト http://school.dhw.co.jp/
  11. 11. canvasを使用したサイト http://panasonic.jp/shaver/lamdash/dna/index.html
  12. 12. SVGを使用したサイト http://dentetsu.hankyu.co.jp/jinji/employment/
  13. 13. パララックスを使用したサイト http://sumikiri.jp/
  14. 14. グリットでデザインされたサイト http://torideken.com/
  15. 15. グリットでデザインされたサイトに注目 http://bm.straightline.jp/
  16. 16. 作ってみると要素が縦長だたりして キレイに見えなかったりします
  17. 17. masonry
  18. 18. masonry環境の準備 ライブラリーのダウンロード jQuery:ライブラリー masonry:ライブラリー 2つを用意します http://masonry.desandro.com/ http://jquery.com/
  19. 19. masonry環境の準備 ライブラリーのダウンロード jQuery:ライブラリー masonry:ライブラリー 2つを用意します http://masonry.desandro.com/ http://jquery.com/
  20. 20. masonry環境の指定 ライブラリーのパスを指定 <script src="js/masonry.pkgd.min.js"></script> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  21. 21. masonry環境の指定2 masonryの動作指定 $(function(){ $('#container').masonry({ itemSelector: '.box', columnWidth: 200 }); }); itemSelector: masonryを使いたいclass名を指定します columnWidth: 一列の幅を指定
  22. 22. masonry環境の指定3 masonryのオプション ・一列の幅サイズ:columnWidth: 数値 ・スムースアニメーション設定:isAnimated: false又true ・親要素の幅サイズがピッタリ:isFitWidth: false又true ・整理される要素の左右逆になる:isOriginLeft: false又true ・整理される要素の上下が逆になる:isOriginTop: false又true ・整理される要素間の溝の幅を指定 :gutter: 数値 ・親要素にスタイルを追加できる: containerStyle: { スタイル } ・ウィンドウサイズが変更された時に並び替え:isResizable: false又true
  23. 23. masonry注意事項 masonryを使用して画像ギャラリーつくった場合 画像の読込みのタイミング遅かったりするとレイ アウトが崩れてしまう時があります 画像をローディングしてあと実行してくるスクリ プトを実行する必要がでてきます
  24. 24. masonry注意事項 imagesloaded https://github.com/desandro/imagesloaded
  25. 25. masonry環境の指定復習 masonryの動作を以下のように指定をしていました $(function(){ $('#container').masonry({ itemSelector: '.box', columnWidth: 200 }); });
  26. 26. masonry環境の指定プラスα masonryの動作指定 $(function(){ $('#container').imagesLoaded(function(){ $('#container').masonry({ itemSelector: '.box', columnWidth: 200 }); }); }); imagesLoadedでローディングが完了した後に masonryを指定させてあげます
  27. 27. 今回のおさらい ・最近の流行について ・masonryについて
  28. 28. 最後にちょっとしたものを作ってみました
  29. 29. ご清聴ありがとうございました

×