on:2016年2月12日sponsorsレスポンシブ対応のカード型レイアウト、中央で分割されたレイアウト、動画や画像や幾何学模様を背景に配置したり、画像やコンテナのサイズをデバイスごとに最適化したりなど、ページのレイアウトに役立つスクリプトを紹介します。-GitHubデモページHTMLの実装は非常にシンプルで、divで実装した各コンテナのカラム数・幅・溝をアニメーションで変更します。レスポンシブ対応で、コンテナの増減にも対応。-GitHubデモページレスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。-GitHubデモページ最近増えてきた中央分割のレイアウト。サムネイルをクリックすると、それぞれアニメーションでコンテンツが表示されます。-GitHubデモページ水平・垂直に位置が変更可能な区切りを設定できるスクリプト。3分割や水平と垂直の組み合わせにも対応。-GitHubデモページアイテムをダイアモンド状に配置するスクリプト。レスポンシブ対応で、サイズや溝も簡単に設定できます。-GitHubデモページ縦長ページの各コンテンツを3Dに傾けて、アニメーションで表示します。-GitHubデモページ画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できます。動画をブラウザいっぱいやセクションの背景として配置できます。-GitHubデモページ背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できます。-GitHubデモページ縦長ページのセクションごとにフルスクリーンでコンテンツを表示させるスクロールページを作ります。-GitHubデモページ縦長ページでスクロールする時に、ちょうどいい位置にスナップさせます。jQueryのプラグイン・MITライセンスFocusPointデモページ画像をデスクトップではそのまま表示し、スマホやタブレットなどでは指定した箇所を中心にクロップして表示します。-GitHubデモページレスポンシブ対応で、高さの異なるパネルを揃えたり、成り行きにすることができます。-GitHubデモページ異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能です。-GitHubデモページ高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト。今年リリースされた2.0からjQuery依存ではなくなり、単独で動作します。-GitHubデモページレンガ状に並べる系の高機能なスクリプト。指定したアイテムのドラッグ、アイテムのフィルタリングなどにも対応しています。