CSS HTML Javascript

ボタンの配置

画像をスライドさせるためのボタンを配置していきます。

  • ボタンの配置
  • ボタン位置の設定

ボタンの配置

・前回までで画像の配置が終わったと思います。

・今回は画像をスライドさせるためのボタンを配置していきたいと思います。

・まずHTMLの方でボタンを作っていきます。

・画像の下でcontainerのdivの中に戻るボタンと進むボタンの2種類を作っていきます。

・まずボタンはbuttonタグで作っていきます。操作しやすいようにid属性を付けておき、名前をそれぞれ”prev”と"next"の2種類のボタンを用意しましょう。

・後は矢印を表示させたいので文字実体参照を使って戻るの方には«と書き、進むの方には»と書いていきましょう。

・ちなみに矢印の読み方は「レフトアングルクオーツ」「ライトアングルクオーツ」といいます。

・HTMLの方はこんな感じですね。

    <button id="prev">&laquo;</button>

    <button id="next">&raquo;</button>

ボタン位置の設定

・後はボタンの位置をCSSで絶対配置していけばいいですね。

・今回は画像の右端と左端に配置していきます。

・まず親要素であるcontainerに対してposition: relative;を設定して絶対配置していきましょう。

・後は子要素にposition: absolute;を指定していけばいいので#prevと#nextに対してしていきます。

・親要素と子要素はこんな感じです。

.container {

  position: relative;

}

#prev,

#next {

  position: absolute;

}

・後は上下左右の配置場所を決めていきたいので今回は上から100pxのところで#prevは画像の左端、#nextは画像の右端に配置していきます。

・上から100pxの配置はtop: 100px;と書いていけばいいので#prev,#nextと書いたセレクタのところに書いていきましょう。

・次に戻るは左端に配置したいので#prevに対してleft: 0;と指定して行き、進むは右端に指定していきたいので#nextに対してright: 0;としていきましょう。

・こんな感じですね。

#prev,

#next {

  position: absolute;

  top: 100px;

}

#prev {

  left: 0;

}

#next {

  right: 0;

}

-CSS, HTML, Javascript