コース: Bootstrap 4 基本講座
今すぐコースを受講しましょう
今すぐ登録して、23,500件以上登録されている、業界エキスパート指導のコースを受講しましょう。
画像にカルーセルを使う
このレッスンでは画像に carousel を使って 自動的にスライドさせます。今この ドキュメント、ページには 写真が三つありますけれども 画面いっぱいに 3つの写真を広げることにしましょう。 ということで img の要素が3つあるんですけれども carousel を使うためにすでに div 要素が三重に入れ子になっています。 ここに後で class を設定するんですが その前に img の方、広げておきます。 class で ディスプレイの設定ですね。 class で d-block と。その上で 幅を 100%。w-100 という風にすると 画像がウィンドウいっぱいに広がります。 この同じ class を後二つに ペーストしましょう。コピーして ペースト。もう一つペーストと ではブラウザーで確認しときましょっか。 ファイルを保存します。 画像がウィンドウ一杯に広がりました。 ちょっと大きくしすぎると ぼけた感じになりますけれども とりあえずウィンドウ一杯のサイズで 画像が3つ配置されています。 これを carousel にします。 入れ子の div 要素を3つに 順に class を加えます。まず一番 外側ですね。これに class の carousel そして スライドさせますので、もう一つ class slide という class を設定します。 そしてアニメーションさせるために 必要なんですけれども data 属性で ride 、ここに carousel ですね という値を設定します。 次に2番目の div 要素ですね class で carousel- inner と。 carousel の内側ということですね。 次に3つ目。これは各 img 要素を 包んでいる div 要素なんですが これが carousel する項目になりますので class で carousel-item ということで これはそれでは あと2つコピーしましょう。 コピーして2つめにペースト そして3つ目にペーストですね。 あとどれか一つ、スタートの写真を アクティブにします。 ということで、通常は 一番最初でしょうね。 ここに carousel-item の後に active という class を指定します。 これで保存しましょう。 まず最初の写真ですね。…
目次
-
-
-
-
-
-
-
-
-
-
(ロック済み)
ツールチップを加える8分8秒
-
(ロック済み)
ポップオーバーを表示する5分13秒
-
(ロック済み)
警告のスタイルを使う4分40秒
-
(ロック済み)
ドロップダウンを使う8分7秒
-
(ロック済み)
項目を開け閉めする3分37秒
-
(ロック済み)
アコーディオンをつくる6分50秒
-
(ロック済み)
モーダルを開く5分25秒
-
(ロック済み)
モーブルにボタンを加える5分39秒
-
(ロック済み)
画像にカルーセルを使う4分30秒
-
(ロック済み)
カルーセルにコントロールを加える8分54秒
-
(ロック済み)
カルーセルにキャプションを入れる5分37秒
-
(ロック済み)
スクロールスパイを使う8分12秒
-
(ロック済み)