5/23に、「第５回 HTML5ビギナーズ」に行ってきたので、３回に分けて勉強会の内容を紹介します。
第５回 HTML5ビギナーズ（jQueryをやります！） : ATND
今回は普段から「jQuery」を教えてる方が登壇します！！ハードルを低めにした「基本編」とちょっと背伸びした「応用編」。そしてLTは様々なバリエーションの内容が登場します！ ...
「jQueryビギナーズ」と題して、jQueryをテーマにしたセッションが開催されました。
今回は２回目です。２つ目のセッションは、杉山彰啓さんの「jQuery応用」でした。
セッション内容
今のサイトの流行は？
- 独自で書かれているサイト
ODAIBA MOTOR FES with The 43rd TOKYO MOTOR SHOW 2013
- ヘッダを固定されているサイト
HTML5 Japan Cup 2014 by html5j
- 画像フルサイズのサイト
- videoタグを使ったサイト
デジタルハリウッド｜Web/デザイン/3DCGの通学制専門スクール（学校）
- canvas
LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic
- SVGを使用したサイト
- パララックス（視差）
- グリッドでデザインされたサイト
株式会社トリイデザイン研究所 Atelier Torii Design Institute | プロダクト・空間・情報デザインの企画・開発・広報戦略
- ウィンドウサイズを変えるとグリッドが再整列される
Webデザインのまとめサイト
Webデザインリンク集・ソーシャルブックマーク - straightline bookmark | Web Design Bookmarking
- グリッド系のデザインが多くなってきている
- スマフォとPCの両方に対応したいとき、見せやすいというメリットがある
グリッドの問題
- 作ってみると要素が縦長だったりしてきれいに見えないことがある
そこでmasonry
- グリッド系のデザインでスペースを有効活用して配置してくれる
masonry環境の指定
- jQueryを読み込む
- masonry.pkgd.min.jsを読み込む
masonry環境の指定２
- boxクラスが指定された要素にmasonryを適用する
$(function() {
$('#container').masonry({
itemSelector:'.box',
columnWidth:200
});
});
masonriyには豊富なオプションがある
注意事項
- 画像の読み込みのタイミングが遅かったりすると、レイアウトが崩れてしまう時がある
- その場合は、画像をローディングした後、masonryを実行する必要がある
imagesLoadedプラグイン
desandro/imagesloaded · GitHub
- imagesLoadedでローディングが完了した後にmasonryの処理を行う
$(function() {
$('#container').imagesLoaded(function() {
$('#container').masonry({
itrmSelector:'.box',
columnWidth:200
});
});
});
masonryを使って作ったもののデモ
- 画像で作成した文字をバラバラに分割しておく
- PCサイズだと読めない
- スマフォサイズにすると画像が整列されて文字が読めるようになる
セッション資料
関連エントリー
その１
「第５回 HTML5ビギナーズ」に行ってきた（その１「jQuery基礎」by 山崎大助さん） - プログラマーな日々
その３
「第５回 HTML5ビギナーズ」に行ってきた（その３ LT） - プログラマーな日々
レポート記事
「第5回 HTML5ビギナーズ ～jQueryビギナーズ」開催報告：レポート｜gihyo.jp … 技術評論社
