タグ レンガ状
人気順 5 users 50 users 100 users 500 users 1000 usersウソみたいに簡単! Tailwind CSSのみを使用してMasonryレイアウトを実装する方法
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。 以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみ... 続きを読む
Web制作者に朗報!たった3行のシンプルなCSS Gridで、Masonryレイアウトを簡単に実装できるようになります | コリス
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pintererstなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで...記事の続きを読む 続きを読む
[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri | コリス
レンガ状のカードやリスト状のパネルをドラッグ&ドロップで移動したり、フィルタリングやソートも可能なレスポンシブ対応のグリッドを簡単に実装できるスクリプトを紹介します。通常だと複数のライブラリを組み合わせないと実装できませんが、これ一つで軽量に実装できます。 Muuriとは「壁(Wall)」を意味するフィンランド語だそうです。 Muuri Muuri -GitHub Muuriの特徴 Muuriのデ... 続きを読む
[JS]これなら簡単!シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js | コリス
画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb)スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他の... 続きを読む
[JS]jQueryのMasonry風レイアウトをスタイルシートで簡単に調整できるスクリプト -Salvattore | コリス
高さの異なるパネルをレンガ状に一定の間隔で配置するjQueryのプラグイン「Masonry」風レイアウトを簡単に実装できるように、スタイルシートで調整できるスクリプトを紹介します。 スタイルシートベースなので、レスポンシブ対応もMedeia Queriesを利用できます。 Salvattore Salvattore -GitHub Salvattoreのデモ Salvattoreの使い方 Salv... 続きを読む
[JS]高さの異なるパネルをレンガ状に配置する機能最小限・実用性重視の超軽量スクリプト -waterfall | コリス
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリ... 続きを読む
[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js | コリス
画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト(Masonry, Isot... 続きを読む
[JS]高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト -Wookmark | コリス
Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wook... 続きを読む
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以... 続きを読む