Chapter2

Chapter1での概要を踏まえて、実際に作成しましょう。 【作成物リンク】

ノーマライズCSS("normalize.css"の部分)は、クロスブラウザ対応のためのCSS。
"main.js"にjQueryを記述していきます。

$('セレクター').css('プロパティ', '値');
セレクター記述(例)

• Class名指定⇒.test
• id指定⇒#test
• タグ名⇒li

が入る。プロパティ、値はCSSを指定するようなものをシングルコーテーション内に入れる。
※太文字はjQueryメソッドです

[.]は、繋げる役割があります
[;]は、終了を意味します

---

使用例

$('li').css('width', '200px').animate('height', '100px');

使用例

$(function(){
　　$('#typo').css({
　　　　　　font-size, '50px',
　　　　　　background-color, '#ae5e9b',
　　　　　　color, '#ebc000'
　　　　});
});

---

※[,]で繋ぐことを忘れずに

cssメソッド

実例

• 最初の要素が持つstyle属性から指定スタイルの値を返します。
• リファレンスサイト参照

onメソッド

イベントタイプ	該当するタイミング
mouseover	要素にマウスが乗った
mouseout	要素からマウスが離れた
mousedown	要素上でクリックボタンが押下された
mouseup	要素上でクリックボタンが離れた
mousemove	要素上でマウスカーソルが動いている
click	要素がクリックされた
dblclick	要素がダブルクリックされた
keydown	要素にフォーカスした状態で、キーボードのキーが押された
keyup	要素にフォーカスした状態で、キーボードのキーが離された
foucs	要素にフォーカスが当たった(フォーカスできる要素のみ)
blur	要素からフォーカスが外れた(フォーカスできる要素のみ)
change	入力内容が変更された(textarea要素、input要素、select要素など)
resize	要素がリサイズされた
scroll	要素がスクロールされた

animeメソッド

.animate({[CSSメソッドと同じ指定方法],[アニメーション時間の値] ,[イージングの種類],function(){ /アニメーション終了時に実行する処理/ }})

stopメソッド

.stop( true | false )

---

※[,]で繋ぐことを忘れずに

構文

$('セレクタ').メソッドA().メソッドB().メソッドC()・・・

---

メリットは、1文で書くことができるのでシンプルなコードになるから