『transition』と『animation』

以前CSS3プロパティでも書きましたが、CSS3のアニメーションプロパティには『transitional』と『animation』があります。
『animation』はキーフレームを使って指定ができますので、回転、移動、ループ、要素の変化のアニメーションができるのが特徴です。
が、現在2011年4月末日の段階でIE(IE9は未確認)とFireFox、Operaにはこの『animation』は未対応らしいです(未確認)。
確か記憶ではFireFoxは3.6のときに将来的にはサポートすると言うようなことを聞いたのですが。。。
webkit対応のSafari、Chromeは対応していますからスマートフォンには対応できます。（XPERIA、iPhone4で確認）

なので今回は『transitional』を使ってアニメーションさせていきます。
『transitional』はFireFox、Opera、Safari、Chromeではサポートしているのでブラウズさせるのには問題がないと思います。
とりあえず『IE』はおいておきます。とりあえずです。
しかし、『gradient』を使うとFireFoxとOperaはグラデーションのアニメーションをしてくれません。

CSSの指定

まず最初にCSS3でグラデーションを使ったボタンを作ります。前回作ったボタンの簡易版です。

a.css3btn {
margin-bottom: 12px;
margin-top: 12px;
padding: 7px;
width:150px;
display: block;
color: #FFF;
font-weight:bold;
text-decoration: none;
text-align: center;
border:1px solid #00ADEF;
background:#00ADEF;
background-image: -webkit-gradient(linear, left top, left bottom,from(#00ADEF), color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.5, rgba(255, 255, 255, 0)),to(#00ADEF));
background-image: -moz-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(0, 171, 239) 50%);
background-image: -o-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(0, 171, 239) 50%);
background-image: linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(0, 171, 239) 50%);
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 5px 5px 3px rgba(5, 100, 136, 0.8);
}

前回でOperaの指定方法を書き忘れていたので、ここで改めてご紹介します。（すみません）

background-image: -o-linear-gradient(top,任意);/*グラデーションの指定*/

Operaの指定方法はmozと同じで、拡張子を『moz』から『o』に変更するだけです。

次にマウスオーバー時の指定です。

a:hover.css3btn{
background-color:#039ed9;
background-image: -webkit-gradient(linear, left top, left bottom,from(#00ADEF), color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.5, rgba(255, 255, 255, 0)),to(#00ADEF));
background-image: -moz-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(3, 158, 217) 50%);
background-image: -o-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(3, 158, 217) 50%);
background-image: linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(3, 158, 217) 50%);
}

ここまでは前回のおさらいに近いです。

transitionalの指定

それではつぎにアニメーションの指定をします。
指定は元の要素に追加指定します。今回は『a.css3btn』です。

transition: 変化させる時間s イージング;
-webkit-transition: 変化させる時間s イージング;
-moz-transition:変化させる時間s イージング;
-o-transition:変化させる時間s イージング;

以上です。
簡単ですよねw

そうなんです。たったこれだけなんです。
これで通常時とマウスオーバー時をアニメーションしてくれます。
といいましても、CSS3がまだまだ完全にサポートされていないので、ブラウザによってはアニメーションできないプロパティもあります。
今回は『gradient』がそれにあたります。
ということは、『gradient』を指定しなければ色の変化もきちんとアニメーションします。
『gradient』がアニメーションするのは現在確認できたのが、『webkit』をサポートしているSafari、Chromeです。こちらで『gradient』もアニメーションしてくれました。
指定の仕方の例です

transition: 1.5s ease-in-out;
-webkit-transition: 1.5s ease-in-out;
-moz-transition:1.5s ease-in-out;
-o-transition:1.5s ease-in-out;

数字は『秒数』です。今回のしていだと『1.5秒』で変化させています。
イージングの指定は以下のようになります。

『gradient』がないときの指定は以下のとおりです。

a.css3btn2 {
margin-bottom: 12px;
margin-top: 12px;
padding: 7px;
width:150px;
display: block;
color: #FFF;
font-weight:bold;
text-decoration: none;
text-align: center;
border:1px solid #00ADEF;
background:#00ADEF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 5px 5px 3px rgba(5, 100, 136, 0.8);
transition: 1.5s ease-in-out;
-webkit-transition: 1.5s ease-in-out;
-moz-transition:1.5s ease-in-out;
-o-transition:1.5s ease-in-out;
}

a:hover.css3btn2{
background:red;
}

この指定ですと色の変化にアニメーションをつける事ができます。
色の変化だけだといまいちわかりにくい（赤くしたのは分かりやすくする為です）のでボタンの大きさも変えるといっそう分かりやすくなります。

デモ

動作環境は、Firefox4、Safari5とGoogleChrome11、Opera11です。スマートフォンはiPhone4、Android2.1で確認しています。

ダウンロードはユーザー様の責任で行ってください。
なにか問題が発生した場合でも、当サイトでは責任を負いかねますので、予めご了承ください。

上記をご承知の方のみ、以下よりダウンロードしてください。

ダウンロードはこちら

なにか間違いがありましたらご連絡頂けますと幸いです。

CSS3のgradientの指定はwebkitとmozでは違います。
また、グラデーションは線形グラデーションと円形グラデーションを指定できます。
今回は線形グラデーションの指定『linear-gradient』をご紹介します。
ちなみに円形グラデーションは『radial-gradient()』で指定します。円形グラデーションはまたの機会にご紹介します。

CSS

まずボタン本体の設定をします。

position: relative;
margin-bottom: 任意;
margin-top: 任意;
padding: 任意;
width: 任意;
display: block;
color: 任意;
font-weight:任意;/*指定しなくても構いません*/
text-decoration: 任意;/*指定しなくても構いません*/
text-align: 任意;/*指定しなくても構いません*/
text-shadow: 任意;/*サンプルです*/
z-index: 1;/*後述のベースより上に来るように指定*/

これはいわゆるa要素の指定です。
positionをrelativeで指定しているのは、後述しますボタンのベースを内包するためです。

ここでちょっとアクセントをつけるためにtext-shadowを使います。
text-shadowは以下のように指定します。
text-shadow

text-shadow：横方向のずれ 下方向のずれ ぼかし 影の色・透明度;

rgbaは読んで字のごとくrgbとアルファ値を指定します。rgbの説明は割愛します。
アルファ値の指定は1.0〜0で指定します。0に近いほど透明度が高くなります。

次にベースとなる背景色を指定します。
それからグラデーションの指定をします。
gradientを指定するときは『background』『background-image』に指定します。

任意:after{
content: "";
position: absolute;
left: -3px;/*サンプルです*/
top: -3px;/*サンプルです*/
width: 100%;
height: 100%;
padding: 2px;
border:任意;
-webkit-border-radius: 任意;/*角丸の指定*/
-moz-border-radius: 任意;/*角丸の指定*/
background-color:任意;/*この色がボタンの基本色になります*/
background-image: -webkit-gradient(linear,任意);/*グラデーションの指定*/
background-image: -moz-linear-gradient(top,任意);/*グラデーションの指定*/
background-image: linear-gradient(top,任意);/*グラデーションの指定*/
-webkit-box-shadow: 任意;
-moz-box-shadow: 任意;
box-shadow: 任意;
z-index: -1;/*本体より下に来るように指定*/
}

a要素に任意のclassをつけ、after疑似要素でプロパティを指定します。
グラデーションの指定方法は以下のとおりです。
webkit

gradient(グラデーションの指定, 角度, 開始色, （途中色）, 終了色)

moz

グラデーションの指定-gradient(角度, 開始色, （途中色）, 終了色)

前述したようにwebkitとmozとの指定方法が違うのがわかると思います。
これを手動でやると結構面倒ですw
また、途中色を指定するときは以下のとおり。
webkit

color-stop(位置, rgba(色指定, 透明度)),

moz

位置, rgba(色指定, 透明度)

次ぎにボタンに影をつけます。
box-shadowの指定は以下のとおり。
box-shadow

box-shadow：横方向のずれ 下方向のずれ ぼかし 影の色・透明度;

insetを使うと内側に影をつけられます。

box-shadow：inset 横方向のずれ 下方向のずれ ぼかし 影の色・透明度;

これはベースの『background-color』を変える事で簡単にボタンの色を変更することができます。が、FireFoxは『gradient』の値を変えないといけません。しかし、スマートフォンサイトでしたら変更できるので、スマートフォンサイトで有効かもしれませんね。
今回はできればSafariかChromeで確認して頂くとわかりやすいと思います。

jQeryの設定

まずはじめにjQueryをダウンロードします。基本的にjQueryを使用する際には『圧縮版』を使用します。これは、変数名を短くし、コメントや空白、改行とを削除したもので、『Minfied』と呼ばれる方法を採用しています。これはファイルサイズを軽くすることで、読み込みを早くするためだからです。したがって、jQueryをダウンロードする際は、圧縮版を利用します。

現在のjQueryのバージョンは『1.5.2』です。

コードの記述

次にコードを記述していきます。
まずプラグインとなるjavascriptを記述します。

var id2 = "";

$(function(){
	$("#index1").hide();
	$("#index2").hide();
	$("#index3").hide();
	$("#index4").hide();
	$("#index5").hide();
	$("#index6").hide();
	$("#index7").hide();
	$("#index8").hide();
	id2 = "index0";
	tab = getUrlVars()["tab"];
	if (tab){
		chenge(tab);
	}

})

function chenge(id){
	$("#" + id).fadeIn("slow");
	$("#index0").hide();
	id2 = id;
}

function closetab(id){
	$("#" + id).hide();
	$("#index0").fadeIn("slow");
	id2 = "index0";
}

function getUrlVars()
{
	var vars = [], hash;
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i <hashes.length; i++)
    {
		hash = hashes[i].split('=');
		vars[hash[0]] = hash[1];
	}
	return vars;
}

各コンテンツのリンクをリストにて実装します。
併せてjQueryのプラグインの読み込みも設定します。

contents_top
contents01
contents02
contents03
contents04
contents05
contents06
contents07
contents08

このとき複数のリンク設定をするときは、以下のscriptを追加してください。
3つになる場合はchange3、と追記してください。

function chenge2(id){
	$("#" + id).fadeIn("slow");
	$("#" + id2).hide();
	id2 = id;
}

次にコンテンツを作っていきます。
はじめに、最初に表示されるコンテンツを作成します。
これは『index0』とします。

contents_top
contents01
contents02
contents03
contents04
contents05
contents06
contents07
contents08

次に非表示のコンテンツを作成します。
コンテンツjavascriptを設定したときにしていした、"index1"、"index2"と表示させるコンテンツにidを指定していきます。

close_bt
Index1

sampleTitle

<p>sampleText samoleText</p>



close_bt
Index2

sampleTitle

<p>sampleText samoleText</p>

また、『close_bt』は、表示されているコンテンツを非表示にし、初期状態に戻す指定です。
以上で準備は完了です。

デモ

動作環境は、IE７、IE８、FireFox4、Safari5、GoogleChrom10、Opera10.51で動作を確認しています。IE6でも動くと思いますが、確認はしていません。

ダウンロードはユーザー様の責任で行ってください。
なにか問題が発生した場合でも、当サイトでは責任を負いかねますので、予めご了承ください。

上記をご承知の方のみ、以下よりダウンロードしてください。

ダウンロードはこちら

もう少しjavascriptの部分をうまく書く方法があると思いますが。。。
なにか間違いがございましたら、ご指摘頂ければ幸いです。
宜しくお願い致します。

ほぼ１年ぶりの更新になってしまいまいました。
せめて２週間に１度更新できるようにがんばってみます。

anpiレポートとは

東日本大震災、 twitterのハッシュタグ「#anpi」でのtweetの安否情報をまとめて利用しやすくすることを目的としています。

使用方法

安否情報を確認したい方

サイト上部にある『検索ボックス』に安否の確認したい『お名前』または『被災地名』を入力し検索してください。

安否情報の登録

登録方法はこちらよりご確認ください。
東北地方太平洋沖地震による被災者の方の安否確認情報-anpiレポート登録手順管理者：DAC

プレスリリース

抜粋

報道関係者各位
プレスリリース
2010年3月18日
anpiレポートプロジェクト

ソーシャルネットでつなぐ 東日本大震災 安否確認プロジェクト
「anpiレポート」が情報公開中
～ハッシュタグ「#anpi」でつぶやかれた情報をフォーマット化＆シェア～

　今回発生した東北地方太平洋沖地震において、被災地へ救助に行く方や、安否情報を持っている方へ「誰が行方不明なのか？」を伝えることを目的に、株式会社ワディットの代表取締役である和田 裕介( @yusukebe )の呼びかけのもと、Facebook内で有志が集まり、東北地方太平洋沖地震における安否確認プロジェクト「anpiレポート」がスタート致しました。

◇東北地方太平洋沖地震 安否確認プロジェクト「anpiレポート」

http://anpi.tv/

■「anpiレポート」について
　「anpiレポート」は、目視にてTwitter上で確認した安否確認をサイト上にて入力し、情報を共有するサービスです。Twitterのハッシュタグ「#anpi」でつぶやかれている情報を整理することを目的として、2011年3月14日夜に @yusukebe がサイトを構築、twitterや Facebook上で有志が情報交換を行いサイトに機能を追加しながら運営を行っています。また、「anpiレポート」のサイト上では、行方不明者や発見された人がどこにいるかを地図上にマッピングするサービスも、そのAPIを利用して提供しています。
現在では、Twitterのハッシュタグ「#anpi」の情報に加え、各自治体が発行している避難者リストなどの情報も追加し17日の段階で4500件以上の安否確認情報が登録されており、随時情報が追加されています。

■ 「anpiレポート」でできること
・ 安否情報の検索
・ 安否情報の入力
・ 新着レポートの閲覧
・ 地名からの確認
・ Google Person Finderとの連動
・ Twitter検索機能との連動
・ CSVファイルのダウンロード
・ APIの提供
・ 携帯用サイトからの閲覧
（携帯サイトからは安否確認がとれた情報についてメールにてURLを送信できるようになりました）
・ スマートフォン用サイトからの閲覧（予定）

■みなさまへお願いしたいこと
・安否の確認が取れている人を見つけた場合、その人のTwitterアカウントに向かってその情報を
　伝えてください。
・レポートの追加作業にご協力いただける有志を募集しています。
・無事情報も「#anpi」でつぶやいてください。情報の収集が早く行えます。
・古い情報が未だに多くRTされています。本サイトの確認情報を元に、RTの拡散をストップして
　ください。

■今後の展開について
　すでに「anpiレポートプロジェクト」を通して安否確認ができたというツイートも流れてきています。より多くの方にこのサイトの存在を知っていただき、より迅速かつ多くの情報の収集と安否確認ができるよう、ご協力頂きたく思います。
http://twitter.com/#!/onshitsumikan/status/47587822605053952

■関連サイト
anpiレポートプロジェクト
http://anpi.tv/

anpiレポートプロジェクト 携帯サイト
http://anpi.tv/k

anpiレポートプロジェクト tumblr
http://anpitv.tumblr.com/

anpiレポートプロジェクト参加方法【適宜覚書-Fragmentsより】
http://f.daccot.com/2011/03/15/6992/

Facebook内公開グループ“anpiレポートプロジェクト”
http://www.facebook.com/home.php?sk=group_191295860908744&notif_t=group_activity

【本件に関するお問い合わせ先】
anpiレポートプロジェクト
担当：和田裕介
Teitter：http://twitter.com/#!/yusukebe
Facebook：http://www.facebook.com/yusuke.wada

テキスト

HTMLで使用される『テキスト』をjQueryで制御するには『text()』を使用します。

変更

『text()』うを使用してテキストを変更するには『text()』の括弧の中に変更後のテキストを記述します。

Javascript

$("p#first").text("テキスト変更後");

デモ

取得

『text()』の括弧内に何も記述しなければ指定したセレクターのテキストを取得できます。

$("p#first").text();

HTML

HTMLのタグを含むテキストの変更、取得は『html()』を使用します。

変更

HTMLのタグを含むテキストの変更は『html()』の括弧の中に変更後のテキストを記述します。

$("p#first").html("テキスト変更後");

デモ

取得

HTMLのタグを含むテキストの取得は『text()』と同様に括弧内に何も記述しません。

$("p#first").html();

挿入

『html()』を使用しますと要素がすべて書き換えられます。内容を残したまま追加したい場合は以下の関数を使用します。

prepned() //指定した要素の先頭に挿入
append() //指定した要素の最後に挿入
before() //指定した要素の前に挿入
after() //指定した要素の後に挿入

指定した要素の先頭に挿入

$("p#first").prepend("テキストの先頭");

指定した要素の最後に挿入

$("p#first").append("最後に挿入");

指定した要素の前に挿入

$("p#first").before("<h3>要素の前に挿入</h3>");

指定した要素の後に挿入

$("p#first").after("<p>要素の後に挿入</p>");

デモ

HTMLの移動

HTMLの要素に追加するのではなく、移動させます。

prependTo(); //指定した要素の前に移動
appendTo() //指定した要素の最後に移動
insertBefore() //指定した要素の前に移動
insertAfter() //指定した要素の後に移動

HTML要素内の先頭に移動

$("strong").prependTo("p");

デモ

HTML要素内の最後に移動

$("strong").appendTo("p");

デモ

HTML要素の前に移動

$("h3").insertBefore("p");

デモ

HTML要素の後に移動

$("h3").insertAfter("p");

デモ

要素で囲む

指定した要素で囲みます。

wrap(); //要素を指定した要素で囲む
rapAll() //全ての要素を指定した要素で囲む
wrapeinner() //指定した要素の子要素を囲む

要素を指定した要素で囲む

$("span").wrap("<h3></h3>");

デモ

要素を要素で囲む

$("span").wrapAll("<h3></h3>");

デモ

指定した要素の子要素を囲む

$("p").wrapInner("<strong></strong>");

デモ

要素を置き換える

指定した要素を別の要素に置き換えます。置き換えるには『replaceWith()』を使用します。

$("p").replaceWith("<h2></h2>");

デモ

要素を削除する

指定した要素を削除します。咲くよするには『remove()』を使用します。

$("p strong").remove();

デモ

属性の変更と削除

指定した属性や値を変更、取得、削除することもできます。

attr() //属性の変更、取得
removeAttr() //属性の削除

属性の変更

$("a").attr("href","http://www.google.co.jp/");

デモ

属性の取得

$("a").text($("a").attr("href"));

デモ

属性の削除

$("a").removeAttr("target");

デモ

CSS

class属性の追加、削除

class属性はスペース区切りで複数の値を設定できるので、専用の命令が用意されています。

addClass() //class属性の追加
removeClass() //class属性の削除

class属性の追加

$("p").addClass("red");

デモ

class属性の削除

$("p").removeClass("red");

デモ

CSSの制御

jQueryはCSSのプロパティの値を設定したり、取得したりできます。CSSを制御するには『css()』を使用します。

CSSの設定

$("p").css("color","red");

デモ

複数のCSSプロパティを設定したい場合は、『css()』の括弧内に以下のような書式で設定します。

$("p").css({
color : "red",
backgroundColor : "black",
padding : "15px"
});

デモ

CSSの値の取得

$("p").text($("p").css("color"));;

※ブラウザによって取得した値の表示が異なる場合があります。

デモ

HTML、CSSを操作するjQueryの一覧

jQuery ready関数

ready関数

WebブラウザはHTMLをファイルの先頭から1行ずつ読み込んで実行します。したがってJavascriptが読み込まれた時点で命令を実行します。
jQueryはJavascriptを実行するタイミングを制御する『ready関数』というのがあります。この『ready関数』はHTMLを読み込んだ後に実行する関数です。
書式は以下のようになります。

$(document).ready(function(){
ｊQuery処理内容
});

また、以下のように省略もできます。

$(function(){
jQUery処理内容
});

jQueryでscriptを記述するときはほとんどこの『ready関数』を使いますので覚えてしまいましょう。

セレクターの書き方

それではjQueryのを使用したscriptの記述方法を見ていきます。

$("セレクター").jQuery処理内容;

まず、どのHTML要素を操作するかをセレクターで指定してjQUeryの操作する処理を記述します。jQueryではほとんどがこのような記述方法をします。まずこの書式を覚えることから始めましょう。

CSSのセレクター

jQueryではCSSで使用する要素セレクター、classセレクター、idセレクター、子孫セレクターなど様々なセレクターが使用できます。

CSSセレクター

要素セレクター

HTML要素に対しての処理には『要素セレクター』を使用します。

$(function(){
$("p").css("color"."red");
});

これはHTML要素の『p』タグのテキストを赤文字に変更しています。『p』タグ以外はデフォルトのままです。

デモ

idセレクター

idを対象にしたセレクターの利用方法です。指定の方法はCSSと同様に『＃（ハッシュ）』を指定します。

$(function(){
$("#first").css("color","red");
});

デモ

classセレクター

classを対象にしたセレクターの利用方法です。指定の方法はCSSと同様に『.（ドット）』を指定します。

$(function(){
$(".second").css("color","red");
});

デモ

子孫セレクター

複数のセレクターをスペースで区切って指定することにより、特定の要素の内側のある要素を絞り込みができます。

$(function(){
$(".first span").css("color","red");
});

デモ

ユニバーサルセレクター

すべての要素に対して指定します。『*（アスタリスク）』で指定します。

$(function(){
$("p *").css("color","red");
});

デモ

グループセレクター

複数のセレクタをまとめて指定できます。『,（カンマ）』で指定します。

$(function(){
$("#first , #third").css("color","red");
});

デモ

CSS2のセレクター

jQueryはIE6等ではサポートしていない『CSS2』『CSS3』にも対応しています。

子セレクター

ある特定の要素の直下にある要素に対しての指定をします。親要素と子要素を『＞（大なり）』で繋げます。

$(function(){
$("p > strong").css("color","red");
});

デモ

隣接セレクター

ある特定の要素の次にくる要素に対して指定をします。隣接する要素を『+（プラス）』で指定します。

$(function(){
$("#third + p").css("color","red");
});

デモ

first-child疑似クラス

ある特定のセレクターで最初に出る要素に対して指定します。特定の要素の後に『:first-child』で指定します。

$(function(){
$("div p:first:child").css("color","red");
});

デモ

CSS3セレクター

間接セレクター

ある特定のセレクター以降に出てくる要素を指定します。セレクターと要素を『~（チルダ）』で繋げます。

$(function(){
$("#second ~ p").css("color","red");
});

デモ

否定疑似クラス

あるセレクターの要素で特定条件以外の要素に対して指定します。指定する要素の後に『:not()』を記述し、『()』内に除外条件を記述します。

$(function(){
$("div p:not(:first-child)").css("color","red");
});

デモ

nth-chilid疑似クラス

セレクターの要素から任意の順番にの要素に対して指定します。セレクターの後ろに『:nth-child(番号)』で指定します。また、番号だけでなく、奇数、偶数や倍数なども指定できます。奇数は『:nth-child(odd)』、偶数は『:nth-child(even)』、倍数は『:nth-child(xn)』、xは倍数を指定します。5倍なら『:nth-child(5n)』と指定します。

//任意の順番
$(function(){
$("div p:nth-child(2)").css("color","red");
});
//奇数
$(function(){
$("p:nth-child(odd)").css("color","red");
});
//偶数
$(function(){
$("div p:nth-child(even)").css("color","red");
});
//倍数
$(function(){
$("div p:nth-child(5n)").css("color","red");
});

デモ

last-child疑似クラス

ある特定のセレクターの中で最後の要素を指定します。セレクターの後ろに『:last-child』と指定します。

$(function(){
$("div p:lastchild").css("color","red");
});

デモ

only-child疑似クラス

セレクターに特定の要素が1つだけ含まれる場合に指定できます。セレクターの後ろに『:only-child』と指定します。

$(function(){
$("p span:only-child").css("color","red");
});

デモ

CSSの属性セレクター

要素の属性、属性値を条件に対象を絞り込む『属性セレクター』にも対応しています。

attribute

ある特定の属性をもつ要素を指定できます。

$(function(){
$("[id]").css("color","red");
});

デモ

[attribute='value']

ある特定の属性が特定の値をもつ要素を指定できます。

$(function(){
$("[title='second']").css("color","red");
});

デモ

[attribute!='value']

ある特定の属性で、特定の値を持たない要素を指定できます。

$(function(){
$("p [title!='second']").css("color","red");
});

デモ

[attribute^='value']

ある特定の属性値が特定の文字で始まっている要素を指定できます。

$(function(){
$("[title^='f']").css("color","red");
});

デモ

[attribute$='value']

ある特定の属性値が特定の文字で終わっている要素を指定できます。

$(function(){
$("[title$='f']").css("color","red");
});

デモ

[attribute*='value']

ある特定の属性値が特定の文字を含めている要素を指定できます。

$(function(){
$("[title*='ir']").css("color","red");
});

デモ

jQuery独自のフィルター

ｊQueryはCSSセレクター以外でも独自のセレクターを持っています。それらを利用することも可能です。

firstフィルター／lastフィルター

セレクターの最初の要素と、最後の要素を指定します。

$(function(){
$("div p:first").css("color","red");
$("div p:last").css("color","blue");
});

デモ

evenフィルター／oddフィルター

セレクターの偶数番目と奇数番目を指定します。

$(function(){
$("div p:even").css("color","red");
$("div p:odd").css("color","blue");
});

デモ

eqフィルター／gtフィルター／ltフィルター

セレクターの特定の順番の要素を『eq（equal）フィルター』で、特定の要素の前の要素を『lt（less than）フィルター』で、後の要素を『gt（greater than）フィルター』で指定します。要素は順番を指定します。ポイントはJavascriptは『0』から数値を取るため、1番目は『0』、2番目は『1』といった数値になります。

$(function(){
$("div p:lt(2)").css("color","red");
$("div p:eq(2)").css("color","blue");
$("div p:gt(2)").css("color","green");
});

デモ

headerフィルター

見出し要素のh1～h6までをまとめて指定できます。

$(function(){
$(":header").css("color","red");
});

デモ

containsフィルター／hasフィルター

containsフィルターは特定の文字列が含まれている要素を、hasフィルターは特定の要素が含まれているものを指定できます。

$(function(){
$("p:contains('タイトル')").css("color","red");
$("p:has(span)").css("color","blue");
});

デモ

jQueryセレクター一覧

まとめ

基本的にready関数の書式さえ覚えてしまえば、ほとんどCSSの記述方法と同じなのでそんなに難しくないと思います。
jQueryセレクター一覧は簡単なリファレンスとして参考にして頂ければと思います。

なにか間違いがございましたら、ご指摘頂ければ幸いです。
宜しくお願い致します。

jQeryの設定

まずはじめにjQueryをダウンロードします。基本的にjQueryを使用する際には『圧縮版』を使用します。これは、変数名を短くし、コメントや空白、改行とを削除したもので、『Minfied』と呼ばれる方法を採用しています。これはファイルサイズを軽くすることで、読み込みを早くするためだからです。したがって、jQueryをダウンロードする際は、圧縮版を利用します。

jQuery読み込み指定

現在のjQueryのバージョンは『1.4.2』です。

コードの記述

次に『script要素』の中にjQueryの命令コードを記述します。今回は定義リストを使用してアコーディオンパネルを実装してみます。HTMLの記述は以下のようなものを用意します。

サンプルタイトル1

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

サンプルタイトル2

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

サンプルタイトル3

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

定義リストの『dd』タグを非表示にし、『dt』タグをクリックしたときに、『dd』タグを表示します。

$(function(){
$("dd").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$(this).siblings("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});

また、最初の『dd』タグを表示しておきたい場合は、以下のように記述します。

$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$(this).siblings("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});

ポイントは『(“dd:not(:first)”)』のところで、これは最初の『dd』以外という意味で、後に続く『”display”,”none”』と記述していることから分かるように、最初（first）not（以外）を非表示（”display”,”none”）にしなさい、というふうになります。

コードを見ると、指定の仕方が非常にCSSの書き方と似ているのがよくわかると思います。命令文は今後少しずつ紹介していきますが、サンプルでいろいろ試してみるのもいいかもしれません。

デモ

全て非表示

デモ

動作環境は、IE７、IE８、FireFox3.6.2、Safari4.0.5（win）、GoogleChrom4.1、Opera10.51で動作を確認しています。IE6でも動くと思いますが、確認はしていません。

ダウンロードはユーザー様の責任で行ってください。
なにか問題が発生した場合でも、当サイトでは責任を負いかねますので、予めご了承ください。

上記をご承知の方のみ、以下よりダウンロードしてください。

ダウンロードはこちら

なにか間違いがございましたら、ご指摘頂ければ幸いです。
宜しくお願い致します。

減速しながらコンテンツを動かす

今回のポイントは、滑らかな動きを表現することで、コンテンツの拡大縮小をアニメーションのように表現することです。

まず、移動後の位置を変数『myTarget』に格納し、移動スピードを変数『speed』に格納します。

var myTarget = 750;
var speed = 36;

次に、関数『bMove』で『box1』の現在地を調べます。

var boxPos = eval(document.getElementById('box1').style.left.replace("px", ""));

コンテンツ『box1』の現在地と移動後の位置を差を調べ、変数『speed』で割った位置に向けてどれだけ移動したかを表す数値になります。これに、現在地の座標を足したものが『box1』の位置になります。移動後の目的地に近づくにつれ減速されて滑らかな動きを表現しています。

『setTimeout』で一定の間隔で処理を繰り返し、指定した位置に近づけます。

setTimeout("bMove()", 10);

デモ

コンテンツを動かすポイントを分ける

9つのコンテンツを配置します。位置座標の『top』、『left』はHTMLの『style』に記述します。各コンテンツboxの動きがわかるように、CSSで背景色をつけると動きがわかりやすくなると思います。今回はCSSでいコンテンツboxに背景色を指定しています。

デモ

9つのコンテンツboxは左の列のX座標、上の行のY座標は動きません。動かすのは。、横方向中央と横方向右の2つと、縦方向中央と縦方向下の2つのポイントだけなので、この4つのポイントを動かします。これらの変数を以下のように指定します。

var targetC; //横方向中央列
var targetR; //横方向右列
var targetM; //縦方向中央行
var targetB; //縦方向下行

コンテンツを動かす

各コンテンツboxを動かす関数を作成します。横方向中央で制御するのは『box2』『box5』『box8』です。横方向右列を制御するのは『box3』『box6』『box9』、縦方向中央は『box4』『box5』『box6』、縦方向下行は『box7』『box8』『box9』で、それぞれtopとleftを書き換えます。

function boxCmove() {
	var boxPos = eval(document.getElementById('box2').style.left.replace("px", ""));
	boxPos += (targetC-boxPos)/speed;
	document.getElementById('box2').style.left = boxPos+"px";
	document.getElementById('box5').style.left = boxPos+"px";
	document.getElementById('box8').style.left = boxPos+"px";
	setTimeout("boxCmove()", 10);
}

function boxRmove() {
	var boxPos = eval(document.getElementById('box3').style.left.replace("px", ""));
	boxPos += (targetR-boxPos)/speed;
	document.getElementById('box3').style.left = boxPos+"px";
	document.getElementById('box6').style.left = boxPos+"px";
	document.getElementById('box9').style.left = boxPos+"px";
	setTimeout("boxRmove()",10);
}

function boxMmove() {
	var boxPos = eval(document.getElementById('box4').style.top.replace("px", ""));
	boxPos += (targetM-boxPos)/speed;
	document.getElementById('box4').style.top = boxPos+"px";
	document.getElementById('box5').style.top = boxPos+"px";
	document.getElementById('box6').style.top = boxPos+"px";
	setTimeout("boxMmove()",10);
}

function boxBmove() {
	var boxPos = eval(document.getElementById('box7').style.top.replace("px", ""));
	boxPos += (targetB-boxPos)/speed;
	document.getElementById('box7').style.top = boxPos+"px";
	document.getElementById('box8').style.top = boxPos+"px";
	document.getElementById('box9').style.top = boxPos+"px";
	setTimeout("boxBmove()",10);
}

次にコンテンツboxがどのように動くかを決めていきます。
まず、ウィンドウの幅と高さを指定します。

var contWidth;
var contHeight;

次いで各コンテンツboxがマウスオーバーした際の状態を記述します。

function setTarget1() {
	targetC = contWidth-100;
	targetR = contWidth-50;
	targetM = contHeight-100;
	targetB = contHeight-50;
}

function setTarget2() {
	targetC = 50;
	targetR = contWidth-50;
	targetM = contHeight-100;
	targetB = contHeight-50;
}

function setTarget3() {
	targetC = 50;
	targetR = 100;
	targetM = contHeight-100;
	targetB = contHeight-50;
}

function setTarget4() {
	targetC = contWidth-100;
	targetR = contWidth-50;
	targetM = 50;
	targetB = contHeight-50;
}

function setTarget5() {
	targetC = 50;
	targetR = contWidth-50;
	targetM = 50;
	targetB = contHeight-50;
}

function setTarget6() {
	targetC = 50;
	targetR = 100;
	targetM = 50;
	targetB = contHeight-50
}

function setTarget7() {
	targetC = contWidth-100;
	targetR = contWidth-50;
	targetM = 50;
	targetB = 100;
}

function setTarget8() {
	targetC = 50;
	targetR = contWidth-50;
	targetM = 50;
	targetB = 100;
}

function setTarget9() {
	targetC = 50;
	targetR = 100;
	targetM = 50;
	targetB = 100;
}

次に初期設定のconfig関数の設定です。すでに宣言してある『contWidth』と『contHeight』変数に幅と高さを挿入してコンテンツboxのそれぞれの位置を表す『targetC』『targetR』『targetM』『targetB』の初期値を決めます。この際に均等に表示されるようにします。3行X3列なので、それぞれスペースを3等分にし、中列・中段の幅高さを3分の1にし、右列・下段は3分の2の位置に指定します。

	targetC = contWidth/3;
	targetR = contWidth/3*2;
	targetM = contHeight/3;
	targetB = contHeight/3*2;

また、それぞれ各コンテンツboxの幅と高さも指定します。

	document.getElementById('box1').style.width = (contWidth-100)+"px";
	document.getElementById('box1').style.height = (contHeight-100)+"px";

最後に各コンテンツboxにマウスオーバーの関数を呼び出す設定をし、『body』のonloadで初期値となる『config()』と各ポイントを動かす『boxCmove』『boxRmove』『boxMmove』『boxBmove』を呼び出します。

デモ

まとめ

今回ご紹介しました『目的地に動かす』手法は、いろいろな動きに応用できます。
ポイントとしましては3つあります。

・次第に減速していく動き
・getElementById()でコンテンツの位置を移動
・setTimeoutで同じ関数を呼び出す

これを抑えておくといろいろ応用ができると思いますので、ぜひ試してみてください。

動作環境は、IE７、IE８、FireFox3.6.2、Safari4.0.5（win）、GoogleChrom4.1、Opera10.51で動作を確認しています。

ダウンロードはユーザー様の責任で行ってください。
なにか問題が発生した場合でも、当サイトでは責任を負いかねますので、予めご了承ください。

上記をご承知の方のみ、以下よりダウンロードしてください。

ダウンロードはこちら

なにか間違いがございましたら、ご指摘頂ければ幸いです。
宜しくお願い致します。

DOM

DOMとは

DOMは『Document Object Model』の略で、HTML、XMLといったマークアップ言語の構成要素に対し、動的にアクセスするための方法を規定した仕様で、Javascriptで『a要素』の『href属性』を書き換えて動的にリンクを変更する操作はDOMで可能となります。

Javascriptで動きのあるコンテンツを制作するとき、HTML要素に対して何らかの処理を行っています。DOMはJavascriptの仕様にはHTMLへアクセスするためのインターフェースがなく、DOMを使用することでHTMLのあらゆる要素へアクセスすることが可能になります。
DOMはCSSにもアクセスできますので、要素を書き換えて見た目を動的に変化させることができるようになります。

node

nodeとは

DOMは『document』を頂点にしたツリー構造をもっていまして、ツリーを構成する『要素（element）』や、『属性（attribute）』を『node（ノード）』といいます。
Javascriptではdocumentオブジェクトのメソッドを利用して、nodeの集まりをオブジェクトとして取得して操作することができるようになります。

nodeへのアクセス方法

nodeにはdocumentオブジェクトが持つ３つのメソッドを利用してアクセスします。
『id属性』、『name属性』、『HTML要素名』をもとにオブジェクトを取得できます。

id属性名をもつ要素の取得

document.getElementById(id属性名);

name属性をもつ要素の取得

document.getElementsByName(name属性名);

HTML要素名をもとに要素を取得

document.getElementsByTagName(要素名);

getElementById()メソッドは、HTML文書の中に同じIDが存在しないので、1つのオブジェクトを返します。
name属性や、HTML要素名はIDと違って複数あるため、getElementsByName()と、getElementsByTagName()メソッドは『Elements』と複数形になっています。このことから、複数のオブジェクトを返すため配列と同様にインデックス番号を使用してアクセスします。

var myImg1 = document.getElementById("myImg1");
var myImg2 = document.getElementsByName("myImg2")[0];
var myImg3 = document.geElementsByTagName("myImg3")[1];

CSSへのアクセス方法

JavascriptからCSSにアクセスして、プロパティを変更するときもDOMを利用してHTML要素のstyle属性や、外部ファイルのCSSにアクセスして変更します。ただし、プロパティに『-（ハイフン）』が含まれているものは、『-（ハイフン）』を削除して、『-（ハイフン）』に続く文字を大文字にするというルールがありますので注意が必要です。

font-size　>> fontSize
border-top >> borderTop

HTML

CSSへのアクセス

Javascript

var cssac = document.getElementById("cssac");
document.write("変更前フォント" + cssac.style.fontSize +"<br />");
cssac.style.fontSize = "1.5em"; //変更後のフォントサイズを設定
document.write("変更後フォント" + cssac.style.fontSize + "<br />");

外部CSSファイルへのアクセス

var outcss = document.getElementById("cssac");
var myStyle = cssac.currentStyle || document.defaultView.getComputedStyle(outcss, null);
document.write("変更前フォント" + cssac.style.fontSize +"<br />");
cssac.style.fontSize = "1.5em"; //変更後のフォントサイズを設定
document.write("変更後フォント" + cssac.style.fontSize + "<br />");

まとめ

CSSへアクセスする際に注意しなくてはならないのは、外部CSSファイルへのアクセスをする際に、現在のスタイルを取得するのに『IE』独自のプロパティ『currentStyle』とそれ以外のブラウザ『defaultView.getComputedStyle』を利用することです。『||』は、どちらか存在する方を利用する、というような意味です。

次回からは、実際にJavascriptを使った事例についてご紹介していきます。jQuery等のライブラリを使用した例や、ライブラリを使わない方法などをご紹介していきます。

なにか間違いがございましたら、ご指摘頂ければ幸いです。
宜しくお願い致します。

関数

関数の定義

関数を定義するには以下のように記述します。

function 関数名(引数) {
処理の内容;
return 戻り値;
}

functionで関数であることを宣言し、関数名を設定します。関数名の付け方は、Javascriptのルールに従っていれば自由につけることができます。
『()』の中には関数で処理する引数を設定し、複数の場合は『,（カンマ）』で区切って設定します。
『{}』の中に処理を記述し、処理の結果を返すのであれば『return文』を使用します。戻り値がない場合は省略もできます。『return』を記述すると、関数の処理はそこで終了します。

関数の呼び出し

定義しました関数は以下のように呼び出します。

関数名;(引数名);
var 戻り値を格納する関数 = 関数名(引数名);

関数は呼び出したときに初めて実行されます。
実行例

function printName(name) {
dcument.write("名前は" + name + "です。");
}
var name = "hide"; //変数の定義
printName()name; //関数の呼び出し

デモ

また同じ関数を何度も呼び出すこともできます。

戻り値のある関数

function Cube(num){
cube = num*num*num;
document.write(cube);
return cube;
}
var num = 5; //変数の定義
answer = Cube(num); //関数の呼び出し
var num = 10;
answer = Cube(num);

デモ

イベントハンドラ

イベントハンドラ一覧

HTML要素やオブジェクトにイベントハンドラを設定すればユーザーアクションに応じた処理が実行できます。イベントに対応したイベントハンドラは以下の通りです。

イベントハンドラ記述方法

HTMLに記述

<要素名 イベントハンドラ="処理内容;">

処理が複雑な場合は関数にまとめて関数を呼び出すようにします。また、『a要素』などページ遷移などHTML要素などに標準実装されている処理のをキャンセルしたいときは、イベントハンドラの処理に『return false;』を記述するとキャンセルできます。

クリックしてください

オブジェクトに記述

オブジェクト名.イベントハンドラ = 関数名;
オブジェクト名.イベントハンドラ = function(引数){
処理の内容;
}

デモ

オブジェクトに記述する場合は、メソッドが取得対象のHTML要素が読み込まれる前に実行されるとエラーになりますので、記述する順番に注意が必要です。そのため、head内に『onload』イベントハンドラを利用して、HTMLを読み込んだ後に『getElementById』を実行させることもできます。

window.onload = function(){
var button = document.getElementById("clickButton");
window.alert("クリックしてください");
}

デモ

まとめ

『document.getElemetById()』を利用して、id属性が『clickButton』のinput要素をオブジェクトとして取得していますが、input要素の前に『getElementById()』を記述するとエラーになってしまいます。そこで『onload』イベントハンドラを利用します。以前は『body』に『load属性』を読み込ませていたのですが、現在は『onload』イベントハンドラを使用して記述されている方が多いようです。

ダウンロードはこちら

次回は『DOM』についてご紹介します。

なにか間違いがございましたら、ご指摘頂ければ幸いです。
宜しくお願い致します。