スライドショー
WEB先案内
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
スライドショー
今回は複数の画像やコンテンツをまとめて見せるスライドショーを作りました。 ヘッダー画像で使うと第一印象をガラッと変えられます。
おさえておきたいところ
スライドショーを使う目的と使いどころはこんな感じです。
目的：複数の画像やコンテンツをまとめて見せる
使いどころ：画面の読み込み中 / クリック
横移動させて全画面で見せる
See the Pen 横移動させて全画面で見せる by Web Navigator (@web-navigator) on CodePen.
CSSだけで画像をトリミング 「object-fit」
画像の縦横比を維持したまま埋めたい時は、object-fit: cover; を使います。 画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、はみ出した部分はトリミングされます。 ※もっと詳しく知りたい場合は上の「object-fit」リンクからMDNにアクセスしてください
画像を任意の位置でトリミング「object-position」
object-fit: cover; で画像の縦横比を保持したまま画像の中央でトリミングして表示できるようになりましたが、毎回画像の中央にフォーカスしたいとは限りませんね。 中央以外の位置でトリミングしたい時は object-position プロパティーを設定しましょう。 左上を基準にして、object-position: 横の位置 縦の位置; を記述すればOK。 ※もっと詳しく知りたい場合は上の「object-position」リンクからMDNにアクセスしてください
フェードイン・アウトさせて全画面で見せる
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.
複数画像を並列に見せる
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.
2つの画像の動きを対比させて見せる
See the Pen 2つの画像の動きを対比させて見せる by Web Navigator (@web-navigator) on CodePen.
次回の予定
画像やコンテンツの一覧を俯瞰して見せるギャラリーを作ってみようと思います＼＼\\٩( ‘ω’ )و //／／
合わせて読みたい
スライドショー
ABOUT ME
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？
WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。