ギャラリー

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ギャラリー

今回は画像やコンテンツの一覧を俯瞰して見せるギャラリーを作りました。

カメラマンや写真を撮るのが好きな人に実装してあげるとよろこばれるかもしれません。

おさえておきたいところ

ギャラリーを使う目的と使いどころはこんな感じです。

       目的：画像やコンテンツの一覧を俯瞰して見せる
使いどころ：画面の読み込み中 / スクロール / クリック

複数の画像を一覧で見せる

カテゴリ別に画像を並び替える

複合検索でカテゴリ別に画像を並び替える

サムネイルをクリックすると、メイン画像が切り替わる1

サムネイルをクリックすると、メイン画像が切り替わる2

サムネイルをクリックするとグループ化された画像一覧を表示する

次回の予定

掲載内容の説明を簡易化させ、印象づける動画を作ってみようと思います＼＼\\٩( ‘ω’ )و //／／