Hiro師匠とレゴブロック「Atari 2600」を組み立てよう！ せっかくだから任天堂のアレも持ってきたよ（「買い物Surfer」第10回）

2022/10/22 7 users レゴブロック 基点 イマジネーション 任天堂 スタッド

Hiro師匠とレゴブロック「Atari 2600」を組み立てよう！ せっかくだから任天堂のアレも持ってきたよ（「買い物Surfer」第10回） 編集部：早苗月 ハンバーグ食べ男 レゴブロックは，素晴らしい。 スタッド（凸部）を基点として自由に連結できるブリック（レンガ状の基本パーツ）は，無限のイマジネーションを励起させてく... 続きを読む

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

2022/07/06 63 users Masonryレイアウト Pinterest ウソ CSS

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

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

2020/11/05 15 users コリス Masonryレイアウト CSS Grid 朗報 順番

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

[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri | コリス

2017/12/05 44 users コリス Wall フィルタリング グリッド ソート

レンガ状のカードやリスト状のパネルをドラッグ&ドロップで移動したり、フィルタリングやソートも可能なレスポンシブ対応のグリッドを簡単に実装できるスクリプトを紹介します。通常だと複数のライブラリを組み合わせないと実装できませんが、これ一つで軽量に実装できます。 Muuriとは「壁（Wall）」を意味するフィンランド語だそうです。 Muuri Muuri -GitHub Muuriの特徴 Muuriのデ... 続きを読む

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

2017/08/18 81 users コリス jQuery Masonryレイアウト CSS 単体

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

[JS]jQueryのMasonry風レイアウトをスタイルシートで簡単に調整できるスクリプト -Salvattore | コリス

2013/09/02 72 users jQuery コリス スクリプト Masonry 間隔

高さの異なるパネルをレンガ状に一定の間隔で配置するjQueryのプラグイン「Masonry」風レイアウトを簡単に実装できるように、スタイルシートで調整できるスクリプトを紹介します。 スタイルシートベースなので、レスポンシブ対応もMedeia Queriesを利用できます。 Salvattore Salvattore -GitHub Salvattoreのデモ Salvattoreの使い方 Salv... 続きを読む

[JS]高さの異なるパネルをレンガ状に配置する機能最小限・実用性重視の超軽量スクリプト -waterfall | コリス

2013/06/25 180 users GitHub Waterfall Zepto コリス デモ

div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリ... 続きを読む

[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js | コリス

2013/06/17 86 users コリス jQuery Masonry Isot スクリプト

画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト（Masonry, Isot... 続きを読む

[JS]高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト -Wookmark | コリス

2012/03/26 476 users コリス Libs Ajax スクリプト src

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開発日誌

2009/12/09 629 users jQuery Masonry phpspot開発日誌

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以... 続きを読む