ウソみたいに簡単！ Tailwind CSSのみを使用してMasonryレイアウトを実装する方法

2022/07/06 63 users Pinterest ウソ Tailwind CSS CSS

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。 以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみ... 続きを読む

Web制作者に朗報！たった3行のシンプルなCSS Gridで、Masonryレイアウトを簡単に実装できるようになります | コリス

2020/11/05 15 users コリス CSS Grid 朗報 レンガ状 順番

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pintererstなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで...記事の続きを読む 続きを読む

[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js | コリス

2017/08/18 81 users コリス jQuery CSS ライブラリ スクリプト

画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb）スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他の... 続きを読む

CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する | Webクリエイターボックス

2017/04/13 706 users CSSグリッドレイアウト Grid display タイル状

大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ 1. どんなレイアウトに... 続きを読む