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. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

  2. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  3. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

  4. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  5. CSSフレームワーク

    サイト制作が早くなる!Bootstrapの特徴

    サイト制作のスピードを上げたい、そんな方に。6、7年くらい前にこのB…

  6. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Photoshop

    Photoshopでかすれたスタンプ風表現をする方法 その2
  2. Mac

    アプリケーションをすぐに起動できる!Alfredの使い方
  3. illustration

    インスタ映えな挿絵が描ける!ステキな水彩画イラストの描き方本に出会いました。
  4. Photoshop

    表現の幅が広がる!photoshopのパスでラインを引く方法
  5. デザイン

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