HTML5+CSS3でサイトを作ってみる。

■ はじめに

はじめに

只今CSS3の情報を収集中です。
書店などにも、CSS3のみを扱うものがあまりないので、主にネットにて情報を集めています。 誤った記述、優良な情報などがあれば教えて下さい。

このサイトはsafariまたはchromeでご覧下さい。

CSS3とは

(いろいろなサイトを見た上での個人的見解なので間違っていれば訂正します。)
Webサイトを閲覧するユーザーにとって、情報発信ツールとしてより便利に快適に使用する為に生まれたCSSの進化系だと勝手に解釈しています。 Flashや画像などは、本来はあまりつけない方がよいという考えの元にソースだけで画像に効果を与えたり動かしたりしようというもので、 そういったサイトが重くなる原因のものを極力省くことでより情報をスムーズに伝達できるようにしている。
まだ対応ブラウザが限られているなど弊害があるが、将来的にはほとんどのブラウザはバージョンアップによりこれに対応する模様。

各ブラウザが独自に開発しているせいなのかなんなのか、いろいろなHTMLレンダリングエンジンが出ている？ これらに関して、具体的に何なのかを説明しているサイトなどが無いので以下は私の推測です。

■moz
Firefox向け。

■webkit
アップルが中心となって開発されているオープンソースのHTMLレンダリングエンジン群の総称。
HTML、CSS、JavaScript、SVGなどを解釈する。
safari、chromeと現段階で動かせるブラウザが限定されている。

■o
Opera

■ms
Internet Explorer

※追記
これらの接頭辞は「ベンダープレフィックス」といい、CSS3が正式に勧告されていない現在では各ブラウザに応じて付けなければ動かないが、 いずれ正式に勧告されれば付ける必要はなくなる。
このため、制作の際にはこのベンダープレフィックスをつけたものとつけていないものを記述しておくのがおすすめ。
但し、-webkit-gradientに関しては仕様策定が進んでおらず、プロパティ名自体が変わってしまう可能性がある。 そのため、background-colorプロパティで単色の背景色をつけておいた方がよい。

■ 画像を描写する

最低限の画像ファイルのみを使用する

CSS3用の新しいタグまたは各ブラウザが独自開発したタグのみを用いて角丸画像やシャドウ、グラデーションなどを作成できます。 CSSクイックリファレンスのページが親切に説明されているので利用するといいと思います。 (というかこのリファレンスサイトに行ったらわざわざ当サイトを見なくてもいいかもくらいな感じです。)

■ アニメーションさせる場合の基本的な書き方

これもいくつかのサンプルを見た上の推測ですが。
スタイルシートには対象物の見た目を作る為の記述とアニメーションさせる為の記述をふたつに分けて書く。

"transition"、"animation" と "transform"

[ transition ]
始点と終点を指定する一過性のアニメーション。簡単で手軽。
対象物のスタイリング項目にこちらを入れ、アニメーション時間やアニメーション方法などを記述し、
対象物に:hoverをつけてhover後の動き方を指定するなど、ユーザーアクションに対応できる模様。

[ animation ]
キーフレームを指定してリピートするアニメーション。より複雑で柔軟。
"@-webkit-keyframes（パーセント指定で動かす記述）" と対になっている。
:hover(ユーザータッチで動かす)はできない模様(多分)。

[ transform ]
要素を変形させるプロパティ。
scale, rotate, translate, skewなどで操作する。

■ アニメーションさせる

見よう見まねでいくつかアニメーションさせているうちに、 アニメーションさせるにはいくつかパターンがあるのではないかと思いましたので下にまとめてみます。 webkitを使用した例です。

パーセント指定で動かす

動く時間をパーセンテージで割って動かしていきます。
パーセント指定を行う際には-keyframesというタグを用いる。

--[ html ]-----------------------

<div id="class_name"></div>

--[ CSS ]------------------------

@-webkit-keyframes object_name{
	0%	{}					//0%の時の状態
	100%	{}					//100%の時の状態
}
.class_name{
	background:#000;				//通常にスタイリング
	-webkit-animation-name:object_name;		//オブジェクトの名前
	-webkit-animation-duration:5s;			//アニメーションにかかる時間
	-webkit-animation-iteration-count:infinite;	//ループを行うか否か
	-webkit-animation-direction:alternate;		//反復の有無
	-webkit-animation-timing-function:linear;	//動く速さの調節
	-webkit-animation-delay:2s;			//遅れて再生される時間
}

htmlファイルに張ったイメージを直接動かす

これもパーセント指定なのですが、htmlファイルに張ったイメージデータを動かす方法です。
これ以外でも、イメージを背景に設定して動かすこともできるはできるみたいです。

--[ html ]-----------------------

<div id="id_name">
	<img src="./img/image.jpg" alt="*" />
</div>

--[ CSS ]------------------------

@-webkit-keyframes move {
	0%	{}
	100%	{}
}

#t01 img {
	position: relative;
	top: 0;
	left: 0;
	-webkit-animation: move 5s infinite alternate lineat;
	}

ユーザーのアクションで動かす

「hover」は常に「a」とセットなのかと思っていましたが、そうとも限らないようです。 ただ、スマートフォンにはhover機能が効かないため、これでは動かない場合があります。 （動く場合もあります。）

--[ html ]-----------------------

<div class="class_name">
	<img src="./img/image.jpg">
</div>

--[ CSS ]------------------------

.class_name {
	width: 50px;
	height: 49px;
	opacity: 1;
	-webkit-transition: opacity 1s linear;
	-webkit-transform-origin: 50% 50%;
}

.class_name:hover {
	opacity: 0;
}