jQuery

カードレイアウトにもオススメ!Masonryプラグインの使い方


みなさんこんにちは、mayukouです。
今回は、今流行りのカードレイアウトができるMasonryというプラグインの使い方についてご説明します。
様々なブログやホームページで良く見かける、カードレイアウト。
私もいつかやりたいなと思いながら、出来ずじまいでした。
やり方は、基本的にシンプルです。
やっと、出来ましたので、方法をご紹介します。

スポンサードリンク

カードレイアウトとは?


Pinterestを始めとしたSNSサイトでもよく見かけるカードレイアウト。

カードレイアウトのメリット

タブレットでもタップしやすい

カード全体にリンクをすれば、
カード自体がボタンとなり、広い範囲をタップすることができます。

コンテンツがわかりやすい

カードには画像とテキストが入っているので、
リンク先がどんな情報なのかがわかりやすいです。

レスポンシブデザインと相性がいい

レスポンシブデザインと組み合わせれば、
画面幅に合わせて、カードの幅を変えたり、
カラム数を変えることができます。

Masonryプラグインとは?


Masonryとは、英語で石材やレンガという意味です。メイソンリーと読みます。
その名前のごとく、カードの大きさが違っても、積み木のように詰めて配置してくれます。
また、ブラウザの幅に応じて、配置した要素のレイアウトを整列してくれます。
jQueryプラグインです。
Masonry公式サイト

Masonryを使ったカードレイアウトの方法

1.Masonryプラグインをダウンロードします。

公式サイトの以下のボタンをクリックすると、jQueryのコードが出てきますので、パソコンに別名で保存しましょう。

2.jQueryプラグインをページに読み込みます。

HTML

imgは、お好きなものを設定してください。

CSS

item.x2などのクラスを振ることで、画像をお好きなサイズに設定できます。

以上となります。

デモはこちら

デモページ

参考にさせていただきました。
web design leavesさま

最後に

いかがでしたでしょうか?
Masonryの方法についてご紹介しました。
気になる方は、ぜひ、活用してみてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  2. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

  3. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

  4. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  5. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  6. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス

    こんにちは。mayukouです。最近は、wordpressのカスタマ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. マーケティング

    趣味ブログのPV(ページビュー)が1ヶ月で2倍に!私がやったSEO対策とは。
  2. デザイン

    おすすめ!かすれたロゴに最適なスタンプ風なフリーフォント
  3. jQuery

    JQueryで要素を消すスクリプト!ECサイトの注意書きにもオススメ!
  4. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpres…
  5. レポート

    kindle Paperwhite買いました。iPad miniとの違いやメリッ…
PAGE TOP