JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

<span>タグとCSSでボックスを動かすボタンを作る

<span>タグを使ってピンクのボックスを動かすボタンを作ってみよう!

今回のサンプル

ピンク色のボックスの下にあるグレーのボックスをクリックするとピンク色のボックスが5秒かけて右に80ピクセル動く。ピンク色のボックスを動かしているのは「jQuery」の「animate」命令である。

結果
ボックス ボタン

 

HTML

今回のサンプルを動かすために必要な <span> 要素は2つ。 

<span id="box">ボックス</span>
<span id="btn">ボタン</span>

 

JavaScriptjQuery使用)

JavaScriptの中身は jQueryで書いてあるのでいたってシンプル。簡単に説明すると「btn」というidをもった要素がクリックされると「box」というidをもった要素が5秒で80ピクセル右に動くということ。

<script type="text/javascript">
 $(function(){
  $("#btn").click(function(){
   $("#box").animate({left:80},5000);
  });
 });
</script>

 

CSS

「box」と「btn」というidをもった <span> 要素にスタイルシートでスタイルを付けている。「box」にはサイズ(高さと幅)、背景色、フォント色、ディスプレイにブロック要素を指定、文字を左右中央寄せに、位置(position)は「relative」の上から0px、左から0px。「btn」には背景色、サイズ(高さと幅)、ディスプレイにブロック要素、文字の中央寄せを指定している。 

#box {
 height: 80px;
 width: 80px;
 background-color: #F39;
 color: #FFF;
 display: block;
 text-align: center;
 left: 0px;
 top: 0px;
 position: relative;
}
#btn {
 background-color: #CCC;
 height: 30px;
 width: 80px;
 display: block;
 text-align: center;

 

positionの「relative」について

positionをrelativeにした場合、現在の位置が原点になるためLeftに0px、Rightに0pxを指定すると表示位置はまったく変わらない。Leftに10pxを指定した場合は、現在位置から右に10px動くことになる。

 

END