XHTML5+CSS3
１、CSS3
XHTML5と合わせて、 CSS3を学びましょう。まだ新しい仕様で、HTML5と同じように、「現在決定中」です。
したがって、ブラウザごとの違いが大きい。携帯電話のことも考えて、Safariを基準に考えてみます。
CSS3については、以下がよくまとまっている。分らない事があれば、ここを見る事。
http://www.htmq.com/css3/index.shtml
どんな事ができるのか？は
http://www.so-network.biz/css/css3_ui/
CSS3だけで書いた、どらえもん（かなり有名なやつ）
http://css3.zxq.net/doraemon/doraemon_css3.html
２、CSS3を書いてみよう。
まず、前期にやった、CSSの基本的な書き方を思い出そう。
前期はXHTML4で書いたが、今度はXHTML5にします。
基本的書き方は同じだが、まだブラウザごとに表示が違うので、以下のような「ベンダープレフィックス」を付けて書くのが普通（特にアニメーションをする場合）。
-webkit-は、Safari、Chrome他
-moz-は、FireFox
-o-は、Opera
-ms-は、IEを、それぞれ表す。
IE8以下は対応しておらず、その他のブラウザも古いものは対応していない。
例えば：
-webkit-transition: CSSのプロパティー 変化する時間 変化するタイミング,…繰り返し;
と書けば、CSSのプロパティーを、変化する時間、どのようなタイミングで、という指定ができる。
これで、簡単なアニメーションを書ける。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>css3</title>
<style type="text/css">
div {
margin: 30px;
padding: 20px;
}
/*
pタグの内容に影を付ける。
スペース区切りで<影の水平方向の距離> <影の垂直方向の距離> <影のぼかし半径> <影の色>を指定する。
*/
#tx {
font-size: 30px;
text-shadow: 5px 5px 2px blue;
}
/*
id="aaa"の内容全体を、不透明度50%に設定（1.0にすると完全に不透明）
*/
#aaa {
font-size: 18px;
opacity: 0.5;
background-color: blue;
}
/*
class="bbb"にアニメーション設定(どのように動かすかを設定しただけで、これだけではアニメーションしない）
*/
.bbb {
background-color: blue;
width: 200px;
height: 100px;
-webkit-transition: background-color 1s linear,width 1s linear,height 1s linear;
-moz-transition: background-color 1s linear,width 1s linear,height 1s linear;
}
/*
class="bbb"に「マウスが乗っかった時」幅を400px,高さを400pxにする。
前にアニメ設定がしてあるので、アニメーションしながら、形が変わる。背景色もアニメーションしながら変わる。
*/
.bbb:hover {
width: 400px;
height: 400px;
background-color: red;
}
/*
divタグの中のspanタグに茶色背景色を付け、角を半径20pxの円で丸める
*/
div span {
background-color: #990000;
font-size: 36px;
border-radius: 20px;
}
/*
h1タグとh2タグに垂直グラデーションの背景
Safariの場合は、gradient(グラデーションの形、開始位置、終了位置、from(開始の色）,to(終わりの色))
を指定してやる。
*/
h1,h2 {
background: -moz-linear-gradient(white, gray);
background: -webkit-gradient(linear, left top, left bottom, from(white), to(gray));
}
/*
id="m"にアニメーションを指定する
*/
#m {
width: 300px;
height: 200px;
font-size: 30px;
color: blue;
background-color: yellowgreen;
-moz-transition: -moz-transform 1s linear;
-webkit-transition: -webkit-transform 1s linear;
-o-transition: -o-transform 1s linear;
-ms-transition: -ms-transform 1s linear;
}
/*
id="m"にマウスが乗ったら、360度回転させる。
*/
#m:hover {
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
}
</style>
</head>
<body>
<span id="tx">テキストの影</span>
<div id="aaa">背景色青、不透明度50%</div>
<div class="bbb">幅200px高さ100pxから幅400px高さ400pxまで１秒で変化、背景色青から赤まで１秒で変化</div>
<div class="bbb">幅200px高さ100pxから幅400px高さ400pxまで１秒で変化、背景色青から赤まで１秒で変化</div>
<div class="bbb">幅200px高さ100pxから幅400px高さ400pxまで１秒で変化、背景色青から赤まで１秒で変化</div>
<div><span>角丸</span></div>
<h1>グラデーション背景色</h1>
<h2>グラデーション背景色</h2>
<div id="m">1秒で３６０°回転 </div>
</body>
</html>
例 CSS3を使ったメニュー
問題1
上のビデオのようなメニューを、CSS3のアニメーション機能を使って作りなさい。
各メニューには、実際のリンクを設定し、クリックした時に、URLにジャンプするようにする事。
ジャンプ先はyahoo、googleなど、どこでも良い。
背景画像を入れたい人は、それも良い。
とにかく、きれいな「動く」メニューが作ってあれば、それでよしとします。
作品は
public_html/tomcat/html5/css3.html
に保存すること。