HOME > コラム > jQuery/JS Chips > カラムを自動で揃えてくれるjQueryプラグイン「Masonry」の使い方

カラムを自動で揃えてくれるjQueryプラグイン「Masonry」の使い方

コラム

最近あまり見なくなりましたが、リキッドレイアウトのようにした時にカラムを揃えてくれるjQueryプラグインを紹介したいと思います。
厳密には、リキッドレイアウトでなくてもカラムを揃えてくれます。
ブラウザサイズでレスポンシブ対応を採用しているサイトでは活躍する機会がある機能を持っています。
本家サイトでは上手く実装しているようですので、本家サイトがデモサイトのような感じです。
今回のコラムでは、横幅を100%で取って一部リキッドレイアウト化して紹介したいと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

カラムを自動で揃えてくれるjQueryプラグイン「Masonry」の使い方

Masonryサイトイメージ
Masonryとは?
カラムを自動で横詰めしてくれる優れモノ

Masonryは、カラムを自動で横詰めしてくれるjQueryプラグインです。
本家サイトには「リキッドレイアウトのためのレイアウトライブラリ」として記載されています。

リキッドレイアウトを厳密に言うと、横幅を100%で表示した時のことを指すかと思いますが、Masonryは別に横幅を100%にしてなくても大丈夫です。
1000pxの横幅なら、その中で自動的に並べてくれるという感じですので、何かと便利に使えそうな感じがしています。

ということで、今回も先にサンプルを見てみて下さい。
コンテンツの幅を100%の大枠の中に95%(中央寄せ)で取っていますので、参考になること請け合いです(笑)

組み込みサンプル

「Masonry」を組み込んだページのサンプルです。

本家サイトとGit Hub

以下が本家サイトとGit Hubです。

ダウンロード
Masonry組み込み済みファイルのダウンロード
phptemp_msr_160401.zip
元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

組み込み手順

凡そ、流れ的には以下のような順番です。

  1. jQuery設定ファイルを読み込み、設定記述をする。
  2. アップロードしましょう!

前回のプラグインでもそうですが、今回も記述を追記しただけですので、非常に簡単に組み込めてしまう特徴があります。
既存コンテンツをそのままで使うことが出来るのは嬉しいところですよね。

jQuery設定ファイルを読み込み、設定記述をする。

サンプルで配布しているファイルでは index.php のみ組み込んでいますので、 index.php のみ見てもらえればと思います。 ヘッダに以下の記述を追記しています。

<script type="text/javascript" src="/js/masonry.pkgd.js"></script>
<script type="text/javascript">
$(function() {
$('#jq_liquid-txt').masonry({
	itemSelector: '.column_big_box',
	columnWidth: 180
});
});
</script>
<link href="/css/column.css" type="text/css" rel="stylesheet" />

一番下で読み込ませているCSSは、追加コンテンツ用のCSSを記述しています。
横詰めするカラムの装飾です。

リキッドレイアウトにしていますので、レスポンシブは考慮していません。
どのデバイスにでも対応してくれています。

本家サイトにはオプションの設定などもあります。
当サイトで配布している内容では最低限のセッティングしか記述していません。

サンプル記述内の「 #jq_liquid-txt 」は親ボックス、「 .column_big_box 」は子ボックスになり、この二つを指定して子ボックスをコントロールするという流れです。

後はアップロードだけ!

ということで、後はアップロードして下さい。
終了です。

本家のダウロードファイルにオプションがありますので・・・

Git Hubでダウンロードしたファイル中には、テストファイルが用意されています。
「masonry-master」の中にある「 /sandbox/~ 」と「 /test/~ 」です。
厳密にチェックはしていませんが、オプションタイプ毎にファイルが用意されているようですので、気になる方やバリエーションをお求めの場合は、そちらも要チェックです。

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

いかがでしたでしょうか?
前回のカラムの高さを揃えるjQueryプラグイン、今回のカラムの位置を自動で調整するプラグイン、これらのような補助的な要素が強いjQueryプラグインが手軽に扱えるのは嬉しいところですよね。
少々強引にコンテンツを組んでも解決出来てしまいそうです。

ただ、先のプラグインもそうですが、サイズのバランスや調整などを度外視してしまうと、後々面倒なことになりそうな気がします。
サイズを無視すると、揃うものも揃いません。
この辺りは、フロントエンジニアさんの仕事だと思いますが、きっちりコーディングをしないと、思ったようなインターフェイスにならないので要注意です。

しかし、何年も前に見たこの手のjQueryプラグインかJavaScriptはもっと完成度が低かったイメージがありました。
ですので、私の中では、この手のコンテンツはいろんな意味でしんどいイメージがありましたが、今回のjQueryプラグインでちょっとイメージが変わった気がします。

過去のニッチなjQueryプラグインを改めて見直すのも、何かヒントを得るきっかけになるかもしれません、そんなことを思います。

執筆 : 清水 隼斗

カラムを自動で揃えてくれるjQueryプラグイン「Masonry」の使い方のAMPページ

Facebookコメント

株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP