ギャラリー
WEB先案内
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
ギャラリー
今回は画像やコンテンツの一覧を俯瞰して見せるギャラリーを作りました。 カメラマンや写真を撮るのが好きな人に実装してあげるとよろこばれるかもしれません。
おさえておきたいところ
ギャラリーを使う目的と使いどころはこんな感じです。
目的：画像やコンテンツの一覧を俯瞰して見せる
使いどころ：画面の読み込み中 / スクロール / クリック
複数の画像を一覧で見せる
See the Pen 複数の画像を一覧で見せる by Web Navigator (@web-navigator) on CodePen.
カテゴリ別に画像を並び替える
See the Pen カテゴリ別に画像を並び替える by Web Navigator (@web-navigator) on CodePen.
複合検索でカテゴリ別に画像を並び替える
See the Pen 複合検索でカテゴリ別に画像を並び替える by Web Navigator (@web-navigator) on CodePen.
サムネイルをクリックすると、メイン画像が切り替わる1
See the Pen サムネイルをクリックすると、メイン画像が切り替わる1 by Web Navigator (@web-navigator) on CodePen.
サムネイルをクリックすると、メイン画像が切り替わる2
See the Pen サムネイルをクリックすると、メイン画像が切り替わる2 by Web Navigator (@web-navigator) on CodePen.
サムネイルをクリックするとグループ化された画像一覧を表示する
See the Pen サムネイルをクリックするとグループ化された画像一覧を表示する by Web Navigator (@web-navigator) on CodePen.
次回の予定
掲載内容の説明を簡易化させ、印象づける動画を作ってみようと思います＼＼\\٩( ‘ω’ )و //／／
合わせて読みたい
ギャラリー
ABOUT ME
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？
WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。