Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

「第5回 HTML5ビギナーズ」に行ってきた(その2「jQuery応用」by 杉山彰啓さん)

f:id:JHashimoto:20140409044240j:plain

5/23に、「第5回 HTML5ビギナーズ」に行ってきたので、3回に分けて勉強会の内容を紹介します。

第5回 HTML5ビギナーズ(jQueryをやります!) : ATND
今回は普段から「jQuery」を教えてる方が登壇します!!ハードルを低めにした「基本編」とちょっと背伸びした「応用編」。そしてLTは様々なバリエーションの内容が登場します! ...

 

「jQueryビギナーズ」と題して、jQueryをテーマにしたセッションが開催されました。

今回は2回目です。2つ目のセッションは、杉山彰啓さんの「jQuery応用」でした。

セッション内容

今のサイトの流行は?

  • 独自で書かれているサイト

ODAIBA MOTOR FES with The 43rd TOKYO MOTOR SHOW 2013

 
  • ヘッダを固定されているサイト

HTML5 Japan Cup 2014 by html5j

 
  • 画像フルサイズのサイト

VERT DE GRIS ヴェール デ グリ

 
  • videoタグを使ったサイト

デジタルハリウッド|Web/デザイン/3DCGの通学制専門スクール(学校)

 
  • canvas

LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic

 
  • SVGを使用したサイト

阪急電鉄株式会社 | 採用情報2015

 
  • パララックス(視差)

キリン 澄みきり | キリン

 
  • グリッドでデザインされたサイト

株式会社トリイデザイン研究所  Atelier Torii Design Institute | プロダクト・空間・情報デザインの企画・開発・広報戦略

 
  • ウィンドウサイズを変えるとグリッドが再整列される

Webデザインのまとめサイト

Webデザインリンク集・ソーシャルブックマーク - straightline bookmark | Web Design Bookmarking

 
  • グリッド系のデザインが多くなってきている
  • スマフォとPCの両方に対応したいとき、見せやすいというメリットがある

グリッドの問題

  • 作ってみると要素が縦長だったりしてきれいに見えないことがある

そこでmasonry

  • グリッド系のデザインでスペースを有効活用して配置してくれる

masonry環境の指定

  • jQueryを読み込む
  • masonry.pkgd.min.jsを読み込む

masonry環境の指定2

  • 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サイズだと読めない
    • スマフォサイズにすると画像が整列されて文字が読めるようになる

セッション資料

Jquery 140522

関連エントリー

その1

「第5回 HTML5ビギナーズ」に行ってきた(その1「jQuery基礎」by 山崎大助さん) - プログラマーな日々

その3

「第5回 HTML5ビギナーズ」に行ってきた(その3 LT) - プログラマーな日々

レポート記事

「第5回 HTML5ビギナーズ ~jQueryビギナーズ」開催報告:レポート|gihyo.jp … 技術評論社