画像の配置

2021-12-16

リストのタグを使ってカルーセルで使う画像を配置していきます。

・前回までで領域を作っていきました。

: 画像を表示する領域

カルーセルで画像を表示するための領域を作り、スタイリングをしていきます。雛形コード表示領域の作成 style.cssの作成雛形コード・前回まででHTMLのファイルの作成と必要な画像ファイルの作 ...

・今回はその作った領域に画像を配置していきたいと思います。まずは画像の確認をしていきましょう。

・以前に作ったフォルダにimgフォルダがあるのでそのフォルダの中に画像があることを確認していきます。

: カルーセルの作り方

JavaScriptでWEBサイトでよく見る横に画像などをスライドさせるカルーセルの作り方完成版の確認開発環境の確認ファイルの作成完成版の確認・今回からはJavaScriptを使ってのカルー ...

・簡単に言うとその画像ファイルの名前をHTMLの中で指定することによって画像を配置することができます。

・では順を追って解説していきます。

・まずは画像を4つ並べていくのでリストを使っていきます。

・リストはulタグの中にliタグを入れることで作ることができます。そしてその中に画像をひとつづつ配置していきましょう。

・imgタグを使って画像を配置していきます。

・src属性で画像を選択していくので今回はimgフォルダの中のimg1.jpgという画像ファイルを指定するように書いていきます。

・こんな感じですね

・そしてこれを準備した画像の数だけ指定していきます。

・全体だとこんな感じですね

<ul>

</ul>

・この時画像ファイルはその画像の名前をつけるようにしましょう。

・予め画像の名前を指定しやすい名前に変えておいてもいいでしょう。

・次にリストのスタイリングをしておきましょう。

・今回は先頭の黒点をなくしたいのと余白をなくしていこうと思います。

・セレクタはulにして上げましょう。

・黒点をなくしたい場合はlist-styleをnoneにすればいいですね。

・余白をなくすためにはmarginとpaddingを0にしてあげましょう。

・こんな感じですね。

ul {

list-style: none;

margin: 0;

padding: 0;

}

・ただこのままだと画像が元のサイズのままなのではみ出てしまいます次回はこれを直していきましょう。