jquery.gridsterは、ドラッグアンドドロップをサポートするマルチカラムグリッドシステムを提供するjQueryプラグインです。このライブラリを使用することで、ユーザーはウェブページ内でウィジェットを自由に配置やサイズ調整が可能になります。
📄 HTML
<div class="gridster"><ul><li data-col="1" data-row="1" data-sizex="2" data-sizey="2">Item 1</li><li data-col="3" data-row="1" data-sizex="1" data-sizey="1">Item 2</li></ul></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/jquery.gridster/0.5.6/jquery.gridster.min.js" type="text/javascript"></script><script>$(function(){ $('.gridster ul').gridster({ widget_base_dimensions: [100, 100], widget_margins: [10, 10] }); });</script>
🎨 External CSS
<link href="https://cdn.jsdelivr.net/jquery.gridster/0.5.6/jquery.gridster.min.css" rel="stylesheet">
🧩 External JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
⚙️ JavaScript
$(function(){ $('.gridster ul').gridster({ widget_base_dimensions: [100, 100], widget_margins: [10, 10] }); });
Masonryはウェブページの要素をグリッドパターンで動的に配置するJavaScriptライブラリです。
2つのテキストの違いを一目で確認できます。
簡単かつ迅速にファビコンを生成します。
デザイン用のダミーテキストを生成します。
文字数と単語数をリアルタイムで確認できます。
字幕形式を簡単に変換できます。
画像内のテキストを自動で抽出します。