コーディングコンテンストについて

4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Higher」にて、第2回コーディングコンテストの審査結果発表が行われたのですが、そちらで入賞を頂きました。

CSS Nite LP, Disk 9「Coder’s Higher」については当日のTwitterのTLを参照して頂ければなんとなく雰囲気が伝わるかと思います。

入賞した作品

応募したのは以下のHTMLになります。

• Movable Type 5

他のcssファイル、画像ファイルは0ファイルなので、このindex.htmlだけを応募しました。
ちなみに1枚にする前のファイルはこちらにまとめてあります。

詳細は続きから。

前提みたいなもの

ちゃんと手を付けたのが締め切り日の13時付近で、まあ11時間くらいあれば終わるだろうなんて思っていたら…
まったく持って終わらない雰囲気が…！

そしてまさに23時59分30秒くらいまで作業をしていて、ぎりぎり2秒前に応募できました…
ちなみに一番最後の応募だったらしいです（汗

そして提出後、Webkitで画像がうまいこと表示されないことが判明して優秀賞などは無理と判断！

という流れがありました。

提出したものの特長や注力した点

0リクエスト

index.html内からのリクエストを0にするために、cssを直書き・画像をbase64形式で埋め込みなどを行いました。
要するにindex.htmlだけを応募したわけです。

idとclassを多用しないコーディング

良いか悪いかは別として、実験的にidとclassをあまり用いずにコーディングしてみました。
css3のセレクタを多用して組んでみています。
<header></header>
<div id="contents"></div>
<footer></footer>

ぶっちゃけ、idとclassはもっと振ったほうがいいと思いました！

:targetを用いたライトボックス

右上部分にある画像をクリックするとオーバーレイしてライトボックスが出るんですが、そこはJavascriptを使わずに実装しています。
body>aside:last-of-type li{
position:absolute;
top:0;
left:0;
width:100%;
text-align:center;
background:rgba(0,0,0,0.5);
height:100%;
-webkit-transition:opacity 3s ease-in-out;
}
body>aside:last-of-type li span{
position:absolute;
top:0;
left:50%;
padding-top:10px;
margin-left:-480px;
text-align:center;
width:960px;
height:100%;
-webkit-transition:opacity 3s ease-in-out;
}
li[role="zoomImg"]{
display:none;
opacity:0;
}
li[role="zoomImg"]:target{
display:block;
opacity:1;
}
若干表示崩れを起こしていますが…ご愛嬌ということで。
アニメーションを付け忘れたのが無念…！

css3によるビジュアライズ

各ボタンなどのグラデなどにcss3によるグラデーションや角丸などを使用しています。
というかこれはむしろ当たり前な感じがするので特に触れる必要はないかと思います。

ちなみに地味に苦労したのはヘッダー上部の黒線にシャドウがかかった部分でした。
自分はcss3の「:before」を用いて実装してみました。
header:first-of-type:before{
content:"";
display:block;
background-color:#152427;
height:6px;
position:absolute;
left:0;
width:100%;
-moz-box-shadow:0 1px 2px #666;
-webkit-box-shadow:0 1px 2px #666;
}
という感じです。

まとめ・感想

組んでみた全体的な感想

• idやclassを無駄に振らずにすんだ。
  →これは自分が無理やり実装したからなのですが、命名しなくてよいというのはかなり時間短縮にはつながりました。
• リッチな表現がcss3のみでかなり出来た
• 本来ならJavascriptを用いなければならない部分がcss3で対応が可能になった
  →ライトボックスなどが該当
• 今までグラデなどはスライスすればよかったものが、ピッカーなどを使って再現する必要があったため、逆に時間を浪費した

というように、良いことばかりでは無く悪い点もいくつか見受けられました。

正直穴だらけのコーディングでお恥ずかしい限りですが、沢山勉強になりました。
また名のある審査員の方々に見ていただけて大変光栄でした！

その他のお話

当日の懇親会などで審査員の方何名かにお話をお伺いしたところ　マニアック　や　変　だの　キモかった　だの、非常に嬉しいお言葉をいただけました！

致命的だったのがSafariで画像が表示されなかったことだったそうです。そりゃそうだ…！
あとはそもそも、css3とは別の部分での評価が多かったため　という感じでした。

理由はどうあれ、審査員の方々に目が止まるような物を作れてよかったと思います。
ただまったく持って未熟なものを提出してしまったので、次回はもっと時間をかけて作業できたらと思いました。

他の応募者様もおつかれさまでした！！

概要

よく画像でグルグル回って、ローディングを表現するのがあると思うのですが、それをcss3のみで作成してみました。

↑こんな感じのやつのことですね。

css3のアニメーションを使用しているのでChrome3やSafari4などで見てみてください。
iPhoneでも動くと思います。多分…
※確認したら動きました。

詳細は続きから。

デモ

• 10%
• 20%
• 30%
• 40%
• 50%
• 60%
• 70%
• 80%
• 90%
• 100%

よかった。ちゃんと動いていますね。
サンプルはこちらにも用意してあります。

HTMLとCSS、解説は以下を参照してください。

ソース

HTML

<ul class="kzms2loading">
<li class="kzms2loading1">10%</li>
<li class="kzms2loading2">20%</li>
<li class="kzms2loading3">30%</li>
<li class="kzms2loading4">40%</li>
<li class="kzms2loading5">50%</li>
<li class="kzms2loading6">60%</li>
<li class="kzms2loading7">70%</li>
<li class="kzms2loading8">80%</li>
<li class="kzms2loading9">90%</li>
<li class="kzms2loading10">100%</li>
</ul>

CSS

/* ローディングを入れる箱の設定
--------------------------------*/
.kzms2loading{
/* 100x100の箱を作成 */
margin:0;
padding:0;
list-style:none;
width:100px;
height:100px;
position:relative;
/* scaleの値をいじれば大きさを変更可能 */
-webkit-transform:scale(1);
}
/* リスト内の共通設定
--------------------------------*/
.kzms2loading li{
/* 絶対配置で中央に配置 */
position:absolute;
top:50%;
left:50%;
height:0;
width:0;
margin:-10px 0 0 -10px;
/* リセット用css */
padding:0;
list-style:none;
/* テキスト飛ばし */
text-indent:-9999px;
/* 初期設定で透過に */
opacity:0.1;
/* ボーダーで無理やり●を表現 */
border:10px solid #666;
background-color:#666;
-webkit-border-radius:10px;
/* アニメーション設定 */
-webkit-animation-duration:2.5s;
-webkit-transform-origin:50% 50%;
-webkit-animation-name:kzms2loading;
-webkit-animation-iteration-count:infinite;
}
/* ●の個別設定（配置と遅延設定）
--------------------------------*/
.kzms2loading1{-webkit-transform:rotate(0deg) translate(0,-40px);}
.kzms2loading2{-webkit-transform:rotate(36deg) translate(0,-40px);-webkit-animation-delay:0.25s;}
.kzms2loading3{-webkit-transform:rotate(72deg) translate(0,-40px);-webkit-animation-delay:0.5s;}
.kzms2loading4{-webkit-transform:rotate(108deg) translate(0,-40px);-webkit-animation-delay:0.75s;}
.kzms2loading5{-webkit-transform:rotate(144deg) translate(0,-40px);-webkit-animation-delay:1s;}
.kzms2loading6{-webkit-transform:rotate(180deg) translate(0,-40px);-webkit-animation-delay:1.25s;}
.kzms2loading7{-webkit-transform:rotate(216deg) translate(0,-40px);-webkit-animation-delay:1.5s;}
.kzms2loading8{-webkit-transform:rotate(252deg) translate(0,-40px);-webkit-animation-delay:1.75s;}
.kzms2loading9{-webkit-transform:rotate(288deg) translate(0,-40px);-webkit-animation-delay:2s;}
.kzms2loading10{-webkit-transform:rotate(324deg) translate(0,-40px);-webkit-animation-delay:2.25s;}
/* フェードイン・アウトのアニメーション
--------------------------------*/
@-webkit-keyframes kzms2loading{
0%{
opacity:0.1;
}
50%{
opacity:1;
}
100%{
opacity:0.1;
}
}

まとめのようなもの

どんなHTMLにしようか悩みましたが、とりあえずリストにしてみました。
正直深い意味はないです。
HTML5で考えればよかったですねどうせなら…

そしてCSSですが結構細かなことをしているのですが、要約すると以下の様な感じかと思います。

1. olとliをcssで位置調整
2. liのwidthとheightを0にして、borderとborder-radiusで●を表現
3. CSS3アニメーションをliに設定
4. 各liを適切な位置に配置して、アニメーションを遅延する設定にする
5. アニメーションをフェードイン・アウトさせる

順番が若干入れ替わってたりしていますが、大体こんなことをさせています。
まだまだいろいろなことが出来てしまいそうですねっ

説明がアバウトすぎるかもしれませんが過去に書いた以下の関連する記事などを眺めて感じ取ってみてください！

css3のみアニメーション概要など

上の動画の様な1行で、縦にロールしながら表示する手法をcss3で表現したサンプルを書きたいと思います。

いつもの様に、Webkit系（Chrome、Safari）のブラウザでご覧下さい。

詳細は続きから

実働デモ（CSS3アニメーション対応ブラウザのみ）

ソース

サンプルはこちら<style type="text/css"><!--
/* リセット（自ページにあわせて調整して下さい） */
#kzms2scroll,
#kzms2scroll *{
margin:0!important;
padding:0!important;
line-height:1!important;
}
/* リストを1行に見せるための調整 */
#kzms2scroll{
overflow:hidden;
height:1em;
}
#kzms2scroll ul{
/* アニメーション全体で10秒となるように */
-webkit-animation-duration:10s;
/* アニメーションを無限ループさせるように */
-webkit-animation-iteration-count:infinite;
/* アニメーション名を指定 */
-webkit-animation-name:kzms2scroll;
}
@-webkit-keyframes kzms2scroll{
/* 1st line */
0%{/* リストの位置を調整する */
opacity:0;
margin-top:0;
}
6.25%{/* 表示する */
opacity:1;
margin-top:0;
}
18.75%{/* しばらく表示する */
opacity:1;
margin-top:0;
}
24.99%{/* 非表示にする */
opacity:0;
margin-top:0;
}
/* 2nd line */
25%{/* リストの位置を調整する */
opacity:0;
margin-top:-1em;
}
31.25%{/* 表示する */
opacity:1;
margin-top:-1em;
}
43.75%{/* しばらく表示する */
opacity:1;
margin-top:-1em;
}
49.99%{/* 非表示にする */
opacity:0;
margin-top:-1em;
}
/* 3rd line */
50%{/* リストの位置を調整する */
opacity:0;
margin-top:-2em;
}
56.25%{/* 表示する */
opacity:1;
margin-top:-2em;
}
68.75%{/* しばらく表示する */
opacity:1;
margin-top:-2em;
}
74.99%{/* 非表示にする */
opacity:0;
margin-top:-2em;
}
/* 4th line */
75%{/* リストの位置を調整する */
opacity:0;
margin-top:-3em;
}
81.25%{/* 表示する */
opacity:1;
margin-top:-3em;
}
93.75%{/* しばらく表示する */
opacity:1;
margin-top:-3em;
}
100%{/* 非表示にする */
opacity:0;
margin-top:-3em;
}
}
--></style>
<div id="kzms2scroll">
<ul>
<li>表示させたい内容その1</li>
<li>その2！</li>
<li>何らかの内容その3</li>
<li>内容その4</li>
</ul>
</div><!-- /#kzms2scroll -->
かなり強引に％と時間を設定していますが、上記のようなソースでJavascriptを使わずに現在あるアニメーションを実装することができます。

%の配分の考え方

1. まず全体として何秒で終わらせたいのかを考える（今回の場合は10秒）
2. アニメーションの大枠で区切る（今回は4動作なので25%ずつ）
3. その中で何動作あるか考えて、さらに区切る（今回は基本1フレームを6.25％と考えて配分）
4. あとは動かしてみて、%の配分や「-webkit-animation-duration」の設定を変更する

上記の考え方を行うことで、アニメーションさせるにはどう考えればよいかがわかるかと思います。

まとめのようなもの

• アニメーションを秒単位で考えにくい
  →全体の秒数は決められるが、個別のアニメーションの時間を考えにくい（%で考える必要があるため）
• script慣れしていない人でも、比較的さわりやすい
  →上のような欠点があるものの、%で割り振るだけでいいため、scriptに慣れていない人はもしかしたらこちらの方が判りやすいのかもしれません
• Javascriptオフでも挙動、動作も軽い。
  →当たり前ですがJavascriptオフでも動きます。iPhoneでも動きますもちろん。

何秒後に動かす！などの考え方とは少し概念が異なるため、扱いにくい部分があるかと思いますが体感的にはわかりやすい表記にはなっているかと思います。

ですが、厳密にアニメーションさせたい場合は、やはり現在だとJavascriptを使わないと難しいのではないかなという印象を受けました。

今度はJavascriptと比較、もしくは絡めて説明出来たらなと考えています。

メリークリスマス！

というわけでむか～し見たことがあるような、雪が降るエフェクトをCSS3でやってみました。

こんな感じに雪が降り出します。
※Chrome4、Safari4↑では表示確認済みですが、Chromeの方がお勧めです。

詳細とブックマークレットは続きから。

ブックマークレット

1. snow effect[kzms2]←をお気に入り登録（ブックマーク）します。
2. 雪を降らせたいページでクリックします

以上です。

ちょこっとだけ説明

雪球（？）の作り方

●っぽい物が上から降ってくると思いますが、これはborderのみで実装しています。
どういうことかというと…
border-width:5px solid #fff;
-webkit-border-radius:5px;
というように、ボーダーの太さと、角丸の径の大きさをそろえると丸い形になるのでそれを利用しています。

アニメーションの基本設定

遅延させる時間、アニメーションさせる時間、開始位置、などはJavascriptで付与していますが、アニメーション自体はCSS3のみでやっています。

アニメーションの詳細部分

アニメーションの詳細は、基本的には以下のようになっています。
kzms2snow1{
　0%{}
　100%{top:1500px;margin-left:0;}
}

まとめ

1. Javascriptでやるよりは軽いけれども、若干重いかも…
2. というよりこれそもそも誰得？

昔ふるいサイトで、こういうサイトありましたよね！
まあ思いつきでやったネタということで…！

皆様よい聖夜をっ

css3を触ってみて思った利点の3個目

この記事は、画像無しでリッチな表現(3/4) – css3を触ってみて思った4個の利点の続きです。
とりあえずcss3のみで動かしている例を動画にて。

実際のサンプルや、アニメーションについての詳細は続きから。

上の動画の実際のデモ

下の灰色線の中にマウスカーソルを合わせてみてください。

これがCSS3のみで動かしているデモとなっています。
確認できる環境は下の環境になるので、ブラウザによってはデモは動きません。

CSS3アニメーションが動く環境

2009年12月24日現在だと、Webkit系である、Chrome4・Safari4などで動作確認が取れています。
その他のブラウザはまだ実装されていません。
※Mozilla系は拡大縮小などの変形は出来ますが、アニメーションまではまだ対応していません。

ではアニメーションさせるために必要なプロパティなどは次ページ以降から説明します。

css3を触ってみて思った利点の3個目

この記事は、前回の記事（セレクタについて(2/4)その2 – css3を触ってみて思った4個の利点）の続きです。

1. レイアウト組むのが楽ちん
2. セレクタが便利
3. 画像に頼らず色々出来る
4. アニメーションが素敵

今回はCSS3を用いて、画像を使わないでリッチな表現にしてみます。
ちなみにこのページ自体も、デザインに大しては画像を使っていません。
アイコンはさすがに画像ですが…
※表示確認は、Firefox3.6、Chrome4、Safari4、Opera10で行っています。
このエントリーでは画像を使わないリッチな表現を表現する方法を紹介していきます。

詳細は続きから。

まずはじめに

これから記述する書き方は、有名どころのブラウザに適用する書き方をしています。
本来なら1行ですが、CSS3はまだ正式には勧告されていないので、各ブラウザでの独自実装という形になっているため、サンプルでは複数行記述されています。

• 「-moz-」が含まれるものはMozilla(Firefox)に対しての記述
• 「-webkit-」が含まれるものはWebkit(Safari,Chrome)に対しての記述
• 「filter」が含まれるものはIEに対しての記述
  →他のものと記述方法がかなり異なるので注意

これらを踏まえて見てもらえると良いかと思います。

説明は次ページから。

早速ですが作ったものの動画

というわけでこんな感じの物を作ってみました。
実際のサンプルはこちら

概要と対応ブラウザ

概要みたいなもの

タブにカーソルを合わせると少し光り、クリックすると中身がフェードインして切り替わります。
このサンプルで表現されているアニメーションやグラデーション、影や角丸などはすべてCSS3です。
JavascriptOFFでも同じ挙動になりますよ。

動作環境

Chrome4とSafari4での動作確認はしてあります。
Firefox3.5以上でもそれなりに動きますがアニメーションは動きません。
Firefox3.6↑だとグラデーションも有効になるように記述してあります。

詳細と実物は続きから。

ソースの説明

HTML(HTML5）

一応HTML5で書いてありますが、お好きにDivなどに変えても動きますのでそこら辺は厳密には書いていません。
使いたい状況でかき分けてください。
<section id="kzms2tab">
<nav><ul>
<li><a href="#kzms2tab1">タブ1</a></li>
<li><a href="#kzms2tab2">タブ2</a></li>
<li><a href="#kzms2tab3">タブ3</a></li>
</ul></nav>
<div class="kzms2bd">
<article id="kzms2tab1">
<p>タブ1の内容ですよ。</p>
</article>
<article id="kzms2tab2">
<p>タブ2の内容ですよ。</p>
</article>
<article id="kzms2tab3">
<p>タブ3の内容ですよ。</p>
</article>
</div>
</section>

CSS(CSS3)

CSSはかなりの量があるので分けて書きます。
/* sample source
-------------------*/
#kzms2tab ul:first-child{
margin-bottom:-1px;
/* タブが増えてもフレキシブルな横幅に調整 */
display:box;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
/* for firefox */
width:100%;
}
#kzms2tab ul:first-of-type li{
text-align:center;
/* タブが増えてもフレキシブルな横幅に調整 */
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
}
#kzms2tab ul:first-of-type li a{
border:1px solid;
display:block;
padding:5px;
text-decoration:none;
/* タブ部分角丸 */
-moz-border-radius:5px 5px 0 0;
/* Safari対応のために分けて記載 */
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}
#kzms2tab ul:first-of-type li a:hover{
/* hover時に光ってる様に見せる為に透過 */
opacity:0.8;
}
まずはタブの基本設定。
上部分のタブの部分の見た目の調整を行っています。

一つ一つのタブの色などは次のソースで指定してます。
/* タブ1つ目の色設定 */
#kzms2tab ul:first-of-type li:nth-of-type(1) a{
background-color:#1a62db;
border-color:#1f54bc;
color:#fff;
/* webkit用グラデーション */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
from(#1a62db),
color-stop(0.5,#3690f0),
color-stop(0.5,#55a4ee),
to(#70b6f2)
);
/* mozilla用グラデーション */
background-image:-moz-linear-gradient(
top,
#1a62db,
#3690f0 50%,
#55a4ee 50%,
#70b6f2
);
/* テキストシャドウ */
text-shadow:-1px -1px 0px #1f54bc;
}
/* タブ2つ目の色設定 */
#kzms2tab ul:first-of-type li:nth-of-type(2) a{
background-color:#ff7d00;
border-color:#dc6b00;
color:#fff;
/* webkit用グラデーション */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
from(#ff7d00),
color-stop(0.5,#ff7c00),
color-stop(0.5,#ffa73d),
to(#ffa03c)
);
/* mozilla用グラデーション */
background-image:-moz-linear-gradient(
top,
#ff7d00,
#ff7c00 50%,
#ffa73d 50%,
#ffa03c
);
/* テキストシャドウ */
text-shadow:-1px -1px 0px #dc6b00;
}
/* タブ3つ目の色設定 */
#kzms2tab ul:first-of-type li:nth-of-type(3) a{
background-color:#7dbe0a;
border-color:#5b9400;
color:#fff;
/* webkit用グラデーション */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
from(#7dbe0a),
color-stop(0.5,#80c218),
color-stop(0.5,#a1d54f),
to(#a2d93f)
);
/* mozilla用グラデーション */
background-image:-moz-linear-gradient(
top,
#7dbe0a,
#80c218 50%,
#a1d54f 50%,
#a2d93f
);
/* テキストシャドウ */
text-shadow:-1px -1px 0px #5b9400;
}
ここがかなり長いですね・・・CSS3のグラデーション部分でかなり長いコードとなっています。
この詳細については別の機会にまた説明したいと思います。

.kzms2bd{
border:1px solid #ddd;
/* タブ部分角丸 */
-moz-border-radius:0 0 5px 5px;
/* Safari対応のために分けて記載 */
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
/* タブ全体のボックスシャドウ */
-moz-box-shadow:3px 3px 7px #999;
-webkit-box-shadow:3px 3px 7px #999;
}
.kzms2bd article{
display:none;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
border:1px solid;
padding:10px;
margin:-1px;
height:200px;
/* タブ部分角丸 */
-moz-border-radius:0 0 5px 5px;
/* Safari対応のために分けて記載 */
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
ここはタブ内容部分の外枠の見た目の調整。
影をつけたり、箱を作っています。

/* :targetの対象のarticle */
.kzms2bd article:target{
display:block;
}
/* :targetの対象でないarticle */
.kzms2bd article:not(:target){
display:none;
}
ここはセレクタについて(2/4)その2 – css3を触ってみて思った4個の利点などでも説明している、CSS3のセレクタを使って、ターゲットになっている部分となっていない部分をだし分けています。

/* :targetの対象のarticle */
.kzms2bd article:target{
-webkit-animation-duration:1s;
-webkit-transform-origin:50% 0;
-webkit-animation-timing-function:linear;
-webkit-animation-name:kzms2alpha;
opacity:1;
}
/* アニメーション用 */
@-webkit-keyframes kzms2alpha{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
ここでタブの中身がフェードインするアニメーションを追加しています。
Webkit系でないと期待した表示になりません。

/* タブ内容1つ目の色設定 */
.kzms2bd article:nth-of-type(1){
background-color:#edf7ff;
border-color:#1f54bc;
}
/* タブ内容2つ目の色設定 */
.kzms2bd article:nth-of-type(2){
background-color:#ffeeda;
border-color:#dc6b00;
}
/* タブ内容3つ目の色設定 */
.kzms2bd article:nth-of-type(3){
background-color:#edffd0;
border-color:#5b9400;
}
そして最後にタブの中身の背景色と、枠線色の設定をしています。

やってみた感想とかまとめ

1. CSS3でもMozillaとWebkitで解釈の仕方が異なる部分がいくつかあった。
   →display:box;の部分にwidth:100%;と指定しないとMozillaだと期待しない表示になる　等
2. セレクタだけで場合分けをするには限界がある
   →割りきってやっていたことですが、細かな状態分けはやはりJavascriptに頼らないと無理だと言うことがわかりました。（今カレントのタブを変化させられない）
3. 楽チン・綺麗・軽い
   →地味な感想ですが、やっぱりCSS３は素敵でした

動かせるブラウザIEなどが限られている、とかはもう若干お決まりになってきたので、そこまで触れないことにします。

今回はこの辺でおしまいとさせていただきたいと思います。

css3を触ってみて思った利点の2個目

この記事は、前回の記事（セレクタについて(2/4)その1 – css3を触ってみて思った4個の利点）の続きです。

1. レイアウト組むのが楽ちん
2. セレクタが便利
3. 画像に頼らず色々出来る
4. アニメーションが素敵

前回は途中で挫けたので、その続きのエントリーとなります。
今回は「:focus」の様に「:」を用いるセレクタである疑似クラスについての説明がメインです。
かなりの量が追加されているので、逆にややこしいかもしれません。
※表示確認には、Firefox3.5、Chrome4を使用しています。

詳細は続きから。ちなみに3ページあります。

擬似クラス・擬似要素とは

HTMLには記述されていないけれども、ブラウザとしてはその認識がある状態のセレクタのことを言います。
例で言うと、未訪問リンクと、訪問済みリンクのようなもので、ブラウザとしてはその状態を認識できるものの事を指します。
前回の記事で言及した擬似セレクタは以下の4つです。

1. :focus(css2)
   フォーカスが合っている要素を指定
2. :enabled
   要素が有効な状態のセレクタ
3. :disabled
   要素が無効な状態のセレクタ
4. :checked
   要素が選択されている状態のセレクタ

また、擬似クラスと擬似要素という分類分けがされていますが、その差は以下のとおりです。

• 擬似クラス
  →E要素の状態に対して有効なセレクタの事を指します
• 擬似要素
  →E要素内の特定の位置や場所に対して有効なセレクタの事を指します

記事に出てくる「E」「F」「n」の説明

E、Fについて

要素のことを指す様に使用します。要素というのはtrやらh１やらaやら、一般的にはタグとも呼ばれているものでもあります。

n指定について

この後、「n」という指定が出てきますが、これはn個目を対象にすると思ってください。

• 5だったら5個目
• oddだったら1個目、3個目、5個目…
• evenだったら2個目、4個目、6個目…
• 5nだったら5個目、10個目、15個目…
• 5nだったら5個目、10個目、15個目…
• 2n-1だったら1個目、3個目、5個目…

と言った感じの指定が出来ます。
実例を交えて説明するので、ここは後でまた読み返してみてください。

では、CSS3で追加される予定の擬似セレクタの説明に入ります。

n番目がE要素なら指定する「E:nth-child(n)」系

この系統のセレクタは、仮にE:nth-child(2)とした場合、親要素から見て、2番目にE要素が来ていないと適用されません。
他の要素もn番目の対象になるのですが、その要素が指定した型（E）でないと適用されません。
※要するに子要素のn番目がE要素だった場合に適用されます。

n番目の要素がEだった場合に指定「E:nth-child(n)」

他の要素も含めて、子要素のn番目がE要素だった場合に指定することが出来ます。
下の例だとtrの子要素であるtdのn番目の物を指定しています。

サンプルはこちらtd:nth-child(6n){
color:#00f;
}
td:nth-child(7n){
color:#f00;
}

後ろからn番目の要素がEだった場合に指定「E:nth-last-child(n)」

上の「E:nth-child(n)」と似た指定が出来るものです。
他の要素も含めて、後ろからn番目のE要素だった場合に指定できます。

サンプルはこちらtd:nth-last-child(1){
background-color:#ccc;
}

子要素が1つだけで、それがE要素だった場合に指定「E:only-child」

他の要素も含めて、子要素が1つだけで、それがE要素だった場合に指定できます。

サンプルはこちらtd:only-child{
background-color:#000;
color:#fff;
}

表題だけだとよくわからないかもですが

こんな感じにページ内の要素がグリングリン回り始めます。

詳細は続きから

対応ブラウザ

Chrome3以上か、Safari4以上

使用方法

1. ページグルグル【kzms2】←をお気に入り登録（ブックマーク）します。
2. グルグルさせたいページでクリックします

以上です。
動きを見るだけならページグルグル【kzms2】をクリックするだけでこのページがグリングリンし始めます。

仕組みの説明

また今度アニメーションの要素については説明しますが、概要っぽく説明しておきます。

css3について

.kzms2{
/*動き方の指定*/
-webkit-animation-timing-function:cubic-bezier;
/*アニメーションの起点を決める*/
-webkit-transform-origin:50% 50%;
/*アニメーションの回数を設定*/
-webkit-animation-iteration-count:1;
/*kzms2rotateというアニメーションの動作をさせる*/
-webkit-animation-name:kzms2rotate;
}
/*kzms2rotateアニメーションの設定
%ごとに動きを決める*/
@-webkit-keyframes kzms2rotate{
0%{
}
12.5%{
/*rotateは回転、scaleは拡大・縮小*/
-webkit-transform:rotate(45deg) scale(0.5);
}
25%{
-webkit-transform:rotate(90deg) scale(1);
}
37.5%{
-webkit-transform:rotate(135deg) scale(0.5);
}
50%{
-webkit-transform:rotate(180deg) scale(1);
}
62.5%{
-webkit-transform:rotate(225deg) scale(0.5);
}
75%{
-webkit-transform:rotate(270deg) scale(1);
}
87.5%{
-webkit-transform:rotate(315deg) scale(0.5);
}
100%{
-webkit-transform:rotate(360deg) scale(1);
}
}

Javascriptについて

Javascriptは言うほど得意ではないのであまり載せたくないのですが。。。
ブックマークレットをクリックすると以下のJavascriptを読み込みます。
流れとしては

1. cssファイルをヘッダーに書き出し
2. body内の全要素を特定
3. body内の全要素それぞれにclass=”kzms2″を追加
4. ランダムな数値でアニメーションの感覚・時間を設定

と言った様な処理をしています。

var kzms2 = {
init:function(){
kzms2.getCSS('http://kzms2.com/lab/css3/bml/dance.css');
kzms2.dance();
},
getCSS:function(url){
var link = document.createElement('link');
with(link){
href = url;
type = 'text/css';
rel = 'stylesheet';
}
var head = document.getElementsByTagName('head');
head.item(0).appendChild(link);
},
dance:function(){
var i=0;
var el = document.getElementsByTagName('body')[0].getElementsByTagName('*');
for(i;i var rand = 500*parseInt(Math.random()*50);
var rand2 = 1500*parseInt(Math.random()*50);
el[i].className = el[i].className+' kzms2';
el[i].style.webkitAnimationDuration = rand+'ms';
el[i].style.webkitAnimationDelay = rand2+'ms';
}
}
}
kzms2.init();

またまたネタっぽいですね＞＜
css3の利点に関しては時間を多く取れる時に書きたいと思います！

普通のFollow Meじゃつまらないので

息抜きでcss3を使ってアニメーションするFollowMe作りました。
サンプル…といいたいところですが、このページの右側にあります。
マウスオーバーしてみれば動きがわかるかと思います。

対応ブラウザ

一応色々なブラウザで動きますが以下の順番でいい感じの動きになります。

1. Chrome４→縦表示、回転、ズーム、アルファが効きます
2. Safari4→縦表示、回転、ズーム、アルファが効きます（ちょっとぼやける）
3. Firefox3.5→縦表示、回転、ズーム、アルファが効きます
4. その他→かろうじて表示されます

html5で書いていたのですが、どこぞのブラウザさんで表示出来ないので泣く泣くhtml4に切り替えました。
どのブラウザとは言いません。9でもダメなIEあの子です。

それでもこのFollow Meを使ってみたい場合は続きから。

まず初めに。

ご自由に使って頂いて構いませんが、htmlの?の部分、cssのコメント部分は残して置いて頂けると幸せです。
カスタマイズできる部分は以下の箇所になります。

1. ラベルのボーダー、背景色、グラデーション
2. FollowMeの文字色
3. ?の文字色・背景色

といった部分が調整が可能となっています。
cssに詳しい方はソースをちょくちょくいじってもいいかもしれませんね。

コピペ用のソース

下のソースを</body>の直前に明記するだけで実装が可能です。
色設定と、自分のアカウントへのURLの変更（http://twitter.com/kzmsの部分）をお忘れなく。
変えたほうがいい部分は赤色で指定してあります。

<div id="kzms2twitter"><span><a href="http://kzms2.com/2009/12/02/followme_css3/" title="このFollow Meについて" id="kzms2twitis">?</a><a href="http://twitter.com/kzms2">Follow Me</a></span></div>
<style type="text/css">
/* 色のカスタマイズ
**********************/
/* ラベルの色設定 */
#kzms2twitter span{
/* グラデーション非対応の背景色設定 */
background-color:#0f58aa !important;
/* グラデーション背景色設定 */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
/* 開始色 */
from(#083a73),
/* 終了色 */
to(#0f58aa)
) !important;
/* 枠線色設定 */
border-color:#083a73 !important;
}
/* Follow Meの設定 */
#kzms2twitter span a{
/* 文字色設定 */
color:#fff !important;
}
/* ?の設定 */
#kzms2twitter #kzms2twitis{
/* 文字色設定 */
color:#0f58aa !important;
/* 背景色設定 */
background-color:#fff !important;
}
/*
* date 09/12/01
* var 0.01
* kzms2 All Rights Reserved.
******************************/
/* base setting
=================*/
#kzms2twitter{
position:fixed;
_position:absolute;
top:50%;
right:0;
z-index:99999;
margin-top:-6.5em;
*margin-top:-1em;
font-size:12px;
}
#kzms2twitter span a{
text-decoration:none;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transform-origin:0 50%;
-moz-transform-origin:0 50%;
}
#kzms2twitter span a:hover{
text-decoration:underline;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
}
#kzms2twitter span{
display:block;
padding:0.5em 1em 0.5em 0.5em;
border-style:solid;
border-width:1px;
font-weight:bold;
text-decoration:none;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-webkit-box-shadow:2px 2px 7px #333;
-moz-box-shadow:2px 2px 7px #333;
}
#kzms2twitter span:hover{
margin-top:2em;
*margin-top:0;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:0;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:scale(2);
-moz-transform:scale(2);
}
/* about kzms2
=================*/
#kzms2twitter #kzms2twitis{
position:absolute;
bottom:0;
right:0;
width:1em;
text-align:center;
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
font-size:80%;
-moz-border-radius:5px 0 0 0;
-webkit-border-top-left-radius:5px;
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
}
#kzms2twitter #kzms2twitis:hover{
opacity:1;
filter:alpha(opacity=100);
-ms-filter:"alpha(opacity=100)";
-webkit-transform:scale(2);
-moz-transform:scale(2);
text-decoration:none;
}
/* follow me setting
=================*/
#kzms2twitter span a:nth-of-type(1):hover + a{
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
}
#kzms2twitter span a{
display:inline-block;
}
</style>
cssの上部は、カスタマイズ用の部分が抜き出してあります。

その他

htmlに詳しい人は、styleタグの中身を外部ファイルにするなどして各自修正を加えてしまってください。このままだとhtmlが穢れてしまうので…！

使った方でご意見やご感想などお待ちしておりますっ

はー　久々に息抜きになったなった。
こういうやつの方がやりやすいですね。