［み］jQuery Masonryの超基本的な使い方

ボックス要素をレンガのように敷き詰めてレイアウトしてくれるjQuery Masonryの基本的な使い方です。当然、Masonryの配布サイトには使い方が説明してありますが、いかんせん英語なんで…　なので、超基本的な使い方として紹介します。

jQuery Masonryをダウンロード

jQuery Masonryは公式サイトからダウンロードしてください。
jQuery Masonry

あとは、適当なところにアップロードしてください。

jQuery本体とともに、jQuery Masonryを読み込みます。
[cc lang=”html”]

[/cc]

[cc lang=”html”]

[/cc] id名、class名はなんでも大丈夫です。

[cc lang=”JavaScript”]
[/cc] columnWidthはpaddingやmarginを含めたitemの横幅を指定します。isAnimatedはアニメーションさせたいときにtrue、別にいいよっていうときはfalseを指定します。

以上で、超基本的な使い方はおしまいです。英語がわかるようになりたいです…

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない…　そんな方はきっとたくさんいますよねｗ　でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない…　ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします！

西畑一馬 KADOKAWA/アスキー・メディアワークス 2013-03-07

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ！という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。