はじめてのCSS（HTMLでボールを動かす）

はじめに

今回はHTMLからCSSとJavaScriptを外部から読み込み、図形を動かす方法について学んでいきます。CSSは何度か使ってきましたががっつり勉強する意味で「はじめてのCSS」にさせていただきました。また、文字に色を付けたりサイズを変更したりがCSSの基本になると思いますが、いきなり図形の表示からはじめます。

動作環境

Windows10
メモ帳（テキストエディタです）
Google Chrome（ブラウザです）

作業フォルダ/
├─ test.html
├─ test2.css
└─ test3.js

f:id:Start_python:20200127224055g:plain

HTMLの解説

test.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="test2.css">
  <script src="test3.js"></script>
  <title>ボールの移動</title>
</head>
<body>
  <div id="anime_circle">
  </div>
  <div class="anime_btn" onclick="clickTest();">
    ボタン
  </div>
</body>
</html>

それでは新しく出てきた部分を解説していきます。

<link rel="stylesheet" type="text/css" href="test2.css">

CSSファイルを呼び出します。「test2.css」の部分にファイル名が入ります。

ちなみに、rel属性の値には外部CSSはスタイルシートと呼ぶので「stylesheet」を与えます。type属性の値にはtext/cssを指定します。href属性の値にはリンクする外部リソースのURL（ファイル名）が入ります。

<script src="test3.js"></script>

JavaScriptファイルを呼び出します。「test3.js」の部分にファイル名が入ります。

<div class="anime_btn" onclick="clickTest();">
  ボタン
</div>

クラス名を「anime_btn」にします。「ボタン」と表示します。

onclick="clickTest();"

クリックされたときにJavaScriptファイルにある「clickTest()」関数を呼び出します。

CSSの解説

test2.css

#anime_circle{
    height: 100px;
    width: 100px;
    background-color: #FF0000;
    border-radius: 50px;
    position: absolute;
    left: 100px;
    top: 0;
    transition: 2.5s;
}
#anime_circle.active {
    background-color: #0000FF;
    left: calc(100% - 100px);
    top: calc(100% - 100px);
}

.anime_btn {
    margin-top:  10px;
    display:  inline-block;
    padding:  5px 10px;
    border: solid 1px;
    cursor:  pointer;
}

CSSでは、id「anime_circle」とclass「anime_btn」についての設定をしています。

#anime_circle{

}

id名の前には「#」を付けます。id「anime_circle」の状態を設定します。

height: 高さ（単位はピクセル）
width: 幅（単位はピクセル）
background-color: 背景色
border-radius: 角丸の半径（単位はピクセル）省略すると四角形
position: 絶対位置（relativeの場合は相対位置）
left: 左の位置（単位はピクセル）
top: 上の位置（単位はピクセル）
transition: 変化が始まって終わるまでの時間（単位は秒）

#anime_circle.active {

}

id名の前には「#」を付けます。id「anime_circle」に「.active」という疑似classがついたときに状態（背景色と位置）が変化します。

.anime_btn {

}

class名の前には「.」を付けます。class「anime_btn」の設定をします。

margin-top: 上の余白（単位はピクセル）
display: 横並び表示で大きさや余白の設定が可能な区画（ブロック）
padding: 文字から外枠までの余白（上下と左右）（単位はピクセル）
border: ボーダースタイル（１本線）と線の太さ（単位はピクセル）
cursor: マウスカーソルの形状（指の形）

JavaScriptの解説

test3.js

function clickTest() {
    target = document.getElementById("anime_circle");
    target.classList.toggle("active")
  }

clickTest()関数を作成します。class「anime_btn」がクリックされたときの処理です。

id「anime_circle」のドキュメントを変数「target」に代入します。

変数「target」に疑似クラスがない場合は、疑似クラス「active」を付けます。それ以外の場合は、疑似クラスはなしにします。

ボタンをクリックするたびにid（anime_circle　←→　anime_circle.active）が切り替わります。

まとめ

今回のポイントはCSSの「transition」ではないでしょうか。idが切り替わったときに瞬時に変化するのではなく、色や位置が徐々に変わっていくのはすごいです。
こちらのサイトにtransitionが詳しく説明されていてわかりやすかったです。

qiita.com

CSSとJavaScriptのファイル名の付け方にも今後工夫が必要になりそうです。よく使われる名前は、CSSは「style.css」JavaScriptでは「script.js」みたいですが、タグ名と似ているとあとで編集するときに混乱しそうな気もします。

↓よかったらポチッとしていってください。

にほんブログ村

ふたり暮らし

アラフィフ夫婦のフリーランスプラン