CSS HTML Javascript

画像の配置

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

  • 画像の配置
  • リストのスタイリング

画像の配置

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

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

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

 

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

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

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

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

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

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

・こんな感じですね

<li><img src="img/img1.jpg"></li>

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

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

    <ul>

      <li><img src="img/img1.jpg"></li>

      <li><img src="img/img2.jpg"></li>

      <li><img src="img/img3.jpg"></li>

      <li><img src="img/img4.jpg"></li>

    </ul>

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

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

リストのスタイリング

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

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

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

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

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

・こんな感じですね。

ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

 

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

-CSS, HTML, Javascript