前回の第11講ではイベント処理について学習しました。
ボタンのクリックや文字入力など、ユーザーの操作に反応してJavaScriptを実行できるようになりました。
また、第10講ではDOM操作を学習し、HTML要素の内容を書き換える方法も身につけました。
今回はさらに一歩進んで、JavaScriptからWebページの見た目を変更する方法を学習します。
実際のWebサイトでは、
- ボタンを押したら色が変わる
- エラー時に文字が赤くなる
- メニューが開閉する
- 要素が表示されたり消えたりする
といった処理が頻繁に行われています。
これらはJavaScriptからCSSを操作することで実現されています。
HTML・CSS・JavaScriptの役割を復習しよう
Webページは主に次の3つの技術で構成されています。
| 技術 | 役割 |
|---|---|
| HTML | 構造を作る |
| CSS | 見た目を整える |
| JavaScript | 動きを付ける |
HTMLがページの構造を作り、CSSが見た目を整え、JavaScriptが動きを担当します。
JavaScriptからCSSを変更できる
例えば次のHTMLを考えてみましょう。
<p id="message">
こんにちは
</p>
CSSで文字色を指定すると次のようになります。
#message {
color: blue;
}
しかしJavaScriptでCSSを変更すると、表示中の見た目を動的に変更できます。
const message =
document.getElementById("message");
message.style.color =
"red";
このコードを実行すると文字色が赤に変わります。
つまり、
- CSSが見た目を決める
- JavaScriptがCSSを変更する
という関係になります。
styleとは？
JavaScriptから見た目を変更する場合はstyleを使用します。
基本構文は次の通りです。
要素.style.プロパティ名 =
"値";
styleを使うことで文字色や背景色、文字サイズなどを変更できます。
文字色を変更する（color）
message.style.color =
"red";
colorは文字色を変更するためのプロパティです。
背景色を変更する（backgroundColor）
message.style.backgroundColor =
"yellow";
backgroundColorを使うと背景色を変更できます。
CSSとJavaScriptの書き方の違い
CSSでは次のように記述します。
background-color
しかしJavaScriptでは次のように記述します。
backgroundColor
同様に、
font-size
はJavaScriptでは次のようになります。
fontSize
JavaScriptではハイフンを使わず、後ろの単語の先頭を大文字にします。
文字サイズを変更する（fontSize）
message.style.fontSize =
"30px";
fontSizeを使うと文字サイズを変更できます。
単位に注意しよう
サイズを指定する場合は単位が必要です。
message.style.fontSize =
"30px";
pxを付け忘れないようにしましょう。
イベント処理と組み合わせる
第11講で学習したイベント処理と組み合わせることで、ユーザー操作に応じて見た目を変更できます。
ボタンをクリックして文字色を変更する
<p id="message">
こんにちは
</p>
<button id="btn">
変更
</button>
const message =
document.getElementById("message");
const btn =
document.getElementById("btn");
btn.addEventListener(
"click",
function () {
message.style.color =
"red";
}
);
ボタンをクリックすると文字色が赤に変わります。
表示・非表示を切り替える（display）
実際のWebサイトで非常によく使われるのがdisplayです。
message.style.display =
"none";
displayにnoneを指定すると要素が非表示になります。
message.style.display =
"block";
blockを指定すると再び表示されます。
displayが使われる場面
- ハンバーガーメニュー
- FAQの開閉
- アコーディオンメニュー
- モーダルウィンドウ
- ポップアップ画面
displayはWebサイトやWebアプリで頻繁に利用されています。
inputイベントと組み合わせる
<input id="name">
<p id="result">
文字を入力してください
</p>
const name =
document.getElementById("name");
const result =
document.getElementById("result");
name.addEventListener(
"input",
function () {
result.style.color =
"blue";
}
);
入力を始めると文字色が変化します。
イベント処理とstyleを組み合わせることで、動きのある画面を作成できます。
発展知識：classListとは？
実際のWeb開発ではstyleを直接変更する代わりに、CSSクラスを付け外しする方法もよく利用されます。
element.classList.add(
"active"
);
クラスを追加する場合はaddを使用します。
element.classList.remove(
"active"
);
クラスを削除する場合はremoveを使用します。
まずはstyleを使った操作に慣れ、その後classListも活用できるようになりましょう。
まとめ
- CSSは見た目を担当する
- JavaScriptはCSSを変更できる
- styleを使うと見た目を変更できる
- colorで文字色を変更できる
- backgroundColorで背景色を変更できる
- fontSizeで文字サイズを変更できる
- displayで表示・非表示を切り替えられる
- イベント処理と組み合わせると動的な画面を作れる
今回学習した内容は実際のWebサイトやWebアプリでも頻繁に利用されています。
特にdisplayによる表示切り替えは今後のミニアプリ制作でも重要になるため、しっかり身につけておきましょう。
コメント