[JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ：スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
レスポンシブ・ウェブを実装する際の画面幅のサイズ一覧とテスト
※先日読んだ「Responsive Web Design」という本では、Media Queriesを設定する際にレイアウト調整の起点となるサイズを「Breakpoint」と読んでいたので、ここでもその名称をそのまま使います。 各サイズでのブラウザテスト 各画面サイズでのブラウザテストはFirefoxやChromeの「Web Developer」拡張機能などを使って行うのが便利です。Chrome版「Web Developer」では、画面サイズの追加機能はありませんが、先日紹介した方法でサイズが追加可能です。 ブレイクポイント間のテスト 上記一覧はあくまでテストの目安でしかありません。たとえば、1280pxのスクリーンを利用しているユーザが必ずしもウィンドウをフルサイズにして使っているとは限りません。ウィンドウサイズをドラッグしてリサイズして、各ブレイクポイント間でも大きなレイアウトの崩れがな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/
