…タイトルに「動かして楽しい」とか付けてしまったが、まだ今回は大きな動きはない。
次回以降で見た目に動きをつけていくので、それまでの準備だと思ってほしい。
というわけで、今回はjQuery講座だ。
内容について、前回の告知通りcssメソッドをメインに扱っていく。
これを通して、jQueryの書き方そのものに慣れることが目的だ。
これから色々動かすために、必要な知識を蓄えていこう。
前回の復習
前回は、そもそもjQueryとは何ぞやという部分と、基本的な書き方を解説した。
今回の主な目的は、冒頭にも書いた通り、この基本的な書き方に慣れるところだ。
自分で色々変更しながら試していこう。
cssメソッド
さあ、早速cssメソッドを解説していこう。
メソッド説明
まず、cssメソッドの書き方と何ができるかを見ていく。書き方は単純で、以下の通り。
$(セレクタ).css(プロパティ, 値);セレクタの部分は前回解説した通りだ。どのHTML要素に対してこのメソッドを実行するか。
で、このcssメソッドは、取得したHTML要素に対して、引数に渡したCSSパラメータを設定する。
イメージは、CSSの設定を一時的に上書きするような感じだろう。
ちょっと注意だが、値は単なる数字であれば何も囲まずに数値リテラルとして、単位が入っていたり、文字列で指定したりする場合はダブルクォーテーションで囲む必要がある。
使用例
使い方だけではなかなか想像しづらいと思うので、具体例を見ていこう。
前回と同様に、サンプルページを見ながら進めてもらいたい。
まずは、普通に変えてみる。前回出した例がそうだ。というわけで、第1回の使用例を見直してみよう。
jQueryのソースコードは、以下の通りだった。
$(function(){
$("#sample01").css("background-color", "yellow");
});まず、セレクタの部分で#sample01と書かれているので、このIDが付けられたタグを持ってくる。
その後ろ、cssメソッドを見ると、プロパティがbackground-color、値がyellowになっている。
これで、CSSのbackground-colorプロパティ…つまり背景色に黄色をセットしている。
表示例の部分は以下のようなHTMLになっている。
<div id="sample01">
<p>Hello World!</p>
</div>これで、divの部分を持ってきて、そこの背景色を黄色にしているのだ。表示例も、そこの部分が黄色になっている。
では、もう一つ例を出そう。ここから、今回のサンプルに入る。
ここでは、ボタンを押すことでCSSを変えてみようと思う。JavaScriptの入力と組み合わせるのだ。
まず、関数として以下2つを定義しておく。
function changeBackgroundWhite(){
$("#sample02").css("background-color", "white");
}
function changeBackgroundYellow(){
$("#sample02").css("background-color", "yellow");
}これらの内容はもう大丈夫だと思う。それぞれ、実行されたらID名sample02のタグの背景色が、その色に変わる。
で、これを呼び出すHTML側を見ていこう。
<div id="sample02">
<p>一段落目です。</p>
<p>二段落目です。<br>二段落目内の改行です。</p>
</div>
<input class="btn btn-empty btn-light" type="submit" onclick="changeBackgroundWhite()" value="背景を白色にする">
<input class="btn btn-empty btn-warning" type="submit" onclick="changeBackgroundYellow()" value="背景を黄色にする">一つ、div要素にsample02というIDをつけた。その中に段落を二つ入れてある。
で、その下にボタンを二つ用意した。背景を白く、あるいは黄色にするためのボタンだ。
クラス名が入っているが、これは以前ちょっと解説したskyblue.cssのスタイルを使用するためのもの。処理自体には関係ない。
ここからは復習だ。それぞれのボタンを押すと、onclickオプションに記載された関数が実行される。
というわけで、ボタンを押すと背景がそれぞれの色に変わる、というわけだ。
さて、一つ気になったことはないだろうか。
jQueryの部分だ。前回、ふつうは先頭と末尾になんかつける、と説明した。
が、今回はついていない。なぜだろうか。
この前回つけていた$(function(){は、ページの読み込みが終わるまで待つものだった。
つけていた理由は、それより前に中身が読み込まれ、まだ読み込んでいないタグを参照しようとしたときにエラーが発生するから、だった。
今回は、関数が呼ばれて初めてそこを読み込みに行くので、別に待つ必要がない。だから、これを書いていないのだ。
複数同時に変更
さて、これまでは一つのスタイルを変更していた。しかし、例えば5つのスタイルを同時に変更したいとなった場合、これを5つ書かなければいけないのだろうか…
もちろん、そんなことはない。実は、このcssメソッドにはもう一つ使い方がある。
これは、引数をオブジェクトとして渡す方法だ。
$(セレクタ).css(
{
プロパティ: 値,
プロパティ: 値,
...
プロパティ: 値
}
);このように、一つのオブジェクトとしてプロパティ、値の組を複数渡すことができる。
ちょっと注意だが、通常のCSSと異なり各行末がコンマであるということと、最後の組だけコンマがないことに気を付けよう。
なお、プロパティは通常ダブルクォーテーションで囲むが、ちょっと書き方を変えると囲まなくてもよくなる。
ハイフンが入っているプロパティの場合、そのハイフンを消し、直後の1文字を大文字にする。そして、ダブルクォーテーションを外す。これで問題ない。
もちろん、元々ハイフンが入っていない場合はそのまま外すだけでOKだ。
これも具体例を見てみよう。まずはHTML側から。
<div id="sample03">
<p>cssめそっどさんぷる！！！</p>
</div>
<input class="btn btn-empty btn-light" type="submit" onclick="resetStyle()" value="元に戻す">
<input class="btn btn-empty btn-warning" type="submit" onclick="changeStyle()" value="変更する">さっきとほぼ同じだ。今度はID名をsample03にしてある。
で、ボタンを押された際に呼び出されるjQueryは以下の通り。
function changeStyle(){
$("#sample03").css(
{
"background-color": "black",
"color": "white"
}
);
}
function resetStyle(){
$("#sample03").css(
{
backgroundColor: "white",
color: "black"
}
);
}今回は、背景色だけでなく、文字の色も変更してみた。
また、中の書き方も、一つ目はダブルクォーテーションで囲む形、二つ目は囲まない形にした。
結果は、サンプルの通りだ。ボタンを押すことでスタイルが変わってくれていると思う。
おわりに
今回は、jQueryに慣れることを目的として、cssメソッドの使い方を詳しく見てきた。
一応、ユーザーからの入力で見た目が変わってはいるが…まだ物足りないだろう。
というわけで、次回からアニメーションを入れていこうと思う。
これができるとだいぶそれっぽくなる。一番楽しいところだ。
更新情報はTwitterでも垂れ流している。よかったらページ下部のTwitterアイコンから覗いていってほしい。
それでは。
コメント