JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

【jQueryの基本】jQuery と CSS で要素を移動させてみよう

f:id:vw-dsg:20200601063533p:plain

jQueryCSS で要素を移動させる

今回は jQuery を利用して <span> 要素を移動させる方法を説明します。

今回のサンプル

ピンク色のボックスの下にあるグレーのボタン領域をクリックすると、ピンク色のボックスが5秒かけてゆっくりと右方向に80ピクセル動きます。このピンク色のボックスを動かしているのは「jQuery」の「animate」命令になります。

結果
ボックス ボタン

HTML

用意するのは <span> 要素2つです。今回はそのうちの <span id="box"> 要素を移動させますが、動かすことができる要素は <span> だけではありませんので、いろいろと試してみてください。 

<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

id="box" の <span> 要素にはサイズ(高さと幅)、背景色、フォント色、ディスプレイにブロック要素を指定し、文字を左右中央寄せにして、位置(position)は「relative」の上から0px、左から0pxに。

id="btn" の <span> 要素には背景色、サイズ(高さと幅)、ディスプレイにブロック要素、文字の中央寄せ、マウスポインターが乗った時の変更を指定しています。 

#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;
 cursor: pointer;

~ positionの「relative」について ~

position を relative にした場合、原点は「現在の位置」になるため Left に 0px、Right に 0px を指定しても表示位置はそのまま変わりません。top や Left に 1px 以上を設定した場合は「現在の位置」から設定した分だけ動くことになります。

END