[み]jQuery Masonryの超基本的な使い方

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

jQuery Masonryをダウンロード

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

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

jQuery Masonryの使い方

まず、jQueryを読み込む

jQuery本体とともに、jQuery Masonryを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/jquery.masonry.min.js"></script>

HTML

<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

id名、class名はなんでも大丈夫です。

JavaScript

<script>
  $(function(){
    $('#container').masonry({
      itemSelector: '.item',
      columnWidth: 200,
      isAnimated: true
    });
  });
</script>

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

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

jQueryを勉強しましょう

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

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

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

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

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup