はてブログ

はてなブックマーク新着エントリーの過去ログサイトです。



タグ レンガ状

新着順 人気順 5 users 10 users 50 users 100 users 500 users 1000 users
 
(1 - 9 / 9件)
 

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

2022/07/06 このエントリーをはてなブックマークに追加 63 users Instapaper Pocket Tweet Facebook Share Evernote Clip Masonryレイアウト Pinterest ウソ CSS

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

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

2020/11/05 このエントリーをはてなブックマークに追加 15 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス Masonryレイアウト CSS Grid 朗報 順番

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

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

2017/12/05 このエントリーをはてなブックマークに追加 44 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス Wall フィルタリング グリッド ソート

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

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

2017/08/18 このエントリーをはてなブックマークに追加 81 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス 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 Instapaper Pocket Tweet Facebook Share Evernote Clip jQuery コリス スクリプト Masonry 間隔

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

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

2013/06/25 このエントリーをはてなブックマークに追加 180 users Instapaper Pocket Tweet Facebook Share Evernote Clip GitHub Waterfall Zepto コリス デモ

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

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

2013/06/17 このエントリーをはてなブックマークに追加 86 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス 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 Instapaper Pocket Tweet Facebook Share Evernote Clip コリス 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 Instapaper Pocket Tweet Facebook Share Evernote Clip jQuery Masonry phpspot開発日誌

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

 
(1 - 9 / 9件)