お疲れ様です。
ライフマップ開発チームの大城です。
本日は、Bootstrapを使ってサイトのトップに画像スライダーを追加したいと思います。
前回の記事はこちら!
https://tech-lifemap.blogspot.com/2022/04/bootstrap-2.html
# Webサイト改修
## 画像スライダー
早速サイトのトップに画像スライダーを追加していきましょう。
マニュアルだとこちらになります。
https://getbootstrap.jp/docs/5.0/components/carousel/
まずは36行目のHello World!!を消しましょう。
<h1>Hello, world!</h1>
削除した行に画像スライドを入れます。
マニュアルにあるSlide onlyのサンプルコードをそのまま貼り付けてください。
https://getbootstrap.jp/docs/5.0/components/carousel/#slides-only
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
[クラス名の説明]
- carousel slide: Bootstrapのカルーセル機能を使用するには必須のクラス名です。
- carousel-inner: カルーセルの中身をこのクラス名で囲みます。
- carousel-item: スライドさせる要素1つ1つに付けるクラス名です。
- active: 1番初めに表示させる要素に付けるクラス名です。
- data-bs-ride="carousel": ページ読み込み時にカルーセルをスライドさせる為に必要な設定です。
サンプルコードのままだと画像が表示されないです。
なぜかというと、imgタグのsrc属性の値が「...」だからです。
画像ファイルを用意するのは手間なので、簡単に作成できるSVGを使ってみましょう!
svgタグは次のように作成します。
<svg class="d-block w-100" width="800" height="400">
<rect width="100%" height="100%" fill="#777"/>
<text x="50%" y="50%" fill="#555">First slide</text>
</svg>
[クラスの説明]
- d-block: display: block;
- w-100: width: 100%;
[SVGの属性と子要素の説明]
- width: 幅の指定
- height: 高さの指定
- <rect ... />: SVGの画像パーツ
- width: 幅の指定
- height: 高さの指定
- fill: 背景色の指定
- <text>...</text>: SVGのテキストパーツ
- width: 幅の指定
- height: 高さの指定
- fill: 背景色の指定
- ...: テキスト内容
作成したsvgタグをimgタグに上書きしましょう。
2個目、3個目のテキストはSecond、Thirdに書き換えてくださいね。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="d-block w-100" width="800" height="400">
<rect width="100%" height="100%" fill="#777"/>
<text x="50%" y="50%" fill="#555">First slide</text>
</svg>
</div>
<div class="carousel-item">
<svg class="d-block w-100" width="800" height="400">
<rect width="100%" height="100%" fill="#777"/>
<text x="50%" y="50%" fill="#555">Second slide</text>
</svg>
</div>
<div class="carousel-item">
<svg class="d-block w-100" width="800" height="400">
<rect width="100%" height="100%" fill="#777"/>
<text x="50%" y="50%" fill="#555">Third slide</text>
</svg>
</div>
</div>
</div>
## 確認
ここまで改修したら、一旦表示内容を確認してみましょう。
いい感じに画像スライダーが表示されていると思います!
簡単に色々な機能を追加できるのが、Bootstrapのいいところですよね。
今回はここまでとします。
次回もどうぞよろしくお願いいたします。
大城でした!
0 件のコメント:
コメントを投稿