第6回の目標：CSSの基本とjavascriptでCSSを操作する処理を理解する。
CSS(Cascading Style Sheets)はwebページの見た目を設定するための言語である。HTMLで文章の構造を決め、CSSで文章の見た目を決めるという役割分担がある。
例:HTML
～省略～
<head>
<link rel="stylesheet" href="hungry.css">
</head>
～省略～
<p id="ID1240">
I want something eat.
</p>
～省略～
例:css(hungry.css)
#ID1240{
position : relative;
top : 20px;
left : 30px;
color : red;
}
上の例では、HTMLの4行目でCSSファイルを読み込んでいる。この書き方だと、htmlファイルと同じフォルダにhungry.cssが存在しなければならない。HTMLの9行目のp要素にはidとしてID1240が設定されている。
CSSの1行目はidの値がID1240である要素に対する設定を記述するという意味である。先頭の#はidによる指定で要素を特定しようとしていることを表す。
CSSの2行目から4行目は要素の表示位置を設定している。HTMLの要素は特別な指定をしなければ、ブラウザによって自動的に配置されるが、position:relativeは、この自動的に決まる位置を基準とし位置を指定するという意味である。
3行目は縦方向の位置の指定である。自動的に決まる位置から、20px下に表示することを表す。
4行目は横方向の位置の指定である。自動的に決まる位置から、30px右に表示することを表す。
5行目は文字色の設定で、文字色をredに指定している。
javascriptで動的にHTMLを変更できたように、javascriptでCSSも動的に変更できる。
例:HTML
～省略～
<head>
<link rel="stylesheet" href="hungry.css">
<script src="hungry.js"></script>
</head>
～省略～
<p id="ID1241" onclick="changeColor()">
I want something eat.
</p>
～省略～
例:css(hungry.css)
#ID1241{
position : relative;
top : 20px;
left : 30px;
color : red;
}
例:javascript(hungry.js)
function changeColor() {
let element = document.getElementById("ID1241");
element.style.color = "blue";
}
一つ前の例とほぼ同じだが、HTMLの5行目でjavascriptファイルを読み込んでいる。また、10行目でp要素をクリックしたときに呼ばれる関数を設定している。
javascriptの3行目でcssの設定を変更しており、cssのcolorをblueへ変更している。これによりp要素をクリックすると文字色が青くなる。以下のように動く。
I want something eat.
例題1 下にidが"ID1242"であるp要素がある。また、確認するボタンを押すとテキストエリア内の処理が行われる。適切な処理を書いてI like green.の文字色をgreenにせよ。
I like green.
例題2 下にidが"ID1243"であるp要素がある。また、確認するボタンを押すとテキストエリア内の処理が行われる。適切な処理を書いて、ボタンを押す度にblink!の色をred, blueで切り替えよ。
blink!
例:HTML
～省略～
<head>
<link rel="stylesheet" href="move.css">
<script src="move.js"></script>
</head>
～省略～
<p id="ID1244">
right and left.
</p>
～省略～
例:css(move.css)
#ID1244{
position : relative;
top : 10px;
left : 10px;
}
例:javascript(move.js)
window.onload = function () {
let myTimer;
let myPosition = 10;
let myDirection = "right";
function myMove(){
let element = document.getElementById("ID1244");
// 右へ動いているとき
if (myDirection == "right") {
myPosition = myPosition + 5;
if (myPosition == 100) {
myDirection = "left";
}
// 左へ動いているとき
} else {
myPosition = myPosition - 5;
if (myPosition == 0) {
myDirection = "right";
}
}
element.style.left = String(myPosition) + "px";
}
myTimer = setInterval(myMove, 100);
}
上のコードはこのように動く。
right and left.
javascriptの25行目でmyMove関数が100ミリ秒ごとに呼ばれるように登録している。
myMove関数では、idがID1244の要素の表示位置(スタイルシートのleft)を5ずつ増やしたり、減らしたりして表示位置を変更しており、これにより文言が動いているように見える。
javascriptの1行目はHTMLの読み込みが完了したときにブラウザから呼ばれる関数の登録である。getElementById等はHTMLの読み込み完了後にしかできないためこのようにしている。
例題3 下にidが"ID1245"であるp要素があり、CSSでpositionはrelativeに設定されている。また、確認するボタンを押すとテキストエリア内の処理が行われる。適切な処理を書いて、more right.を右へ動かし、200px進んだら止まるようにせよ。ヒント：人間がボタンを押すようなときには、HTMLの読み込みは完了しているのでwindow.onloadは気にしなくてよい。
more right.