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

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. アニメーションをフェードイン・アウトさせる

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

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

背景

「Internet Explorer（IE）6は2010年3月1日に亡くなった」という設定で葬式を挙げようという企画が米国で盛り上がっている。

IE6よ、安らかに眠れ――“葬式”を米企業が企画 – ITmedia Newsより

なにやら3月1日からGoogleさんがIE6のサポートを取りやめるので、米国でIE6の葬式をしちゃおうって話らしいです。
なので便乗してIE6を葬る（？）CSSTipsを5つほど紹介します。
5つというのは特に意味は無く、キリがよいため無理やり5つ用意しました。

※ネタですのでネタ嫌いな方はスルーしてください。

続きは詳細から。

キャプチャとCSS

さくっとキャプチャとcssのサンプルを乗せてみます。

ぼかしが入ってちょっと見づらく

html{
_filter: blur(add=1,direction=135);
}

色を反転させてショッキングに

html{
_filter:invert();
}

白黒でちょっとレガシーに

html{
_filter:gray();
}

ページが薄い状態に

html{
_filter:alpha(style=1,startx=0,starty=0, finishx=0, finishy=100,opacity=50,finishopacity=20;
}

もういっそのこと消去

html{
_display:none;
}

まとめ

なんの事はない8割方IE独自CSSのfilterをただ使っただけです。すみません
_（アンダーバー）ハックを使ってIE6以下だけに適用させてるだけですね！

この流れに乗って是非IE6とおさらば出来たら、幸せな方が沢山出てきそうなのですけどねっ
…とは言ったものの、日本でのIE6のシェアはまだまだ多いはずなのでどうなっていくのかはちょっと判断が難しいですね！

今後の動向に注目したいところです。

動画デモ

Zen-Codingをブラウザ上で触って、リアルタイムプレビューが出来るものを作成してみました。
エディター持って無くてもブラウザだけあればOkですよ！

• kzms2 zen-coding editor

対応ブラウザなど

見た限りですとIE、Firefox3.5、Chrome4、Opera10、Safari4などで動くようです。
※ただし、Webkit系はHeader内に書いた要素がうまくリアルタイムにプレビューされない模様です。styleタグをbody内に書けば表示されます…

使い方や詳細は続きから

Zen-codingの概要

Zen-codingはショートカットキーを用いることでコーディングする時間を早めることが出来るソフトのようなものです。

TextMate-and-ZenCoding from komori, masaaki on Vimeo.

以下のリンクが詳しいです。

• HTMLコーディングが3倍速くなる？「Zen-Coding」

ショートカットキーについて

公式にある、PDFのチートシートを印刷して見て置くと良いと思います。
html形式で見たい方は以下の2リンクを見ればよいと思います。

• HTML
• CSS

今回作ったものの説明

やっとこさ今回作ったkzms2 zen-coding editorの説明をしたいと思うのですが、基本的にはzen-codingの形式でコーディングを行えるリアルタイムプレビューつきのエディターになります。

主な機能

• Zen-codingを用いたコーディング
• マルチブラウザ対応（大体のブラウザで動くと思います）
  ※ただし、モバイルなどを除く
• エディターの文字サイズ変更
• エディター内容をHTML形式でダウンロード保存

並べてみるとこんなものでしょうか。

ショートカットキーについて

メニューのhelpを押せば説明が出てきますが、一応ある程度説明をしておきます。（MetaというのはWindowsだとCtrl、Macだと…なんていうんですかアレ）

• Meta+E（Tabも可） — Zen-coding用タグの展開
• Meta+D — タグ内の要素を外側に順番に選択
• Shift+Meta+D — タグ内の要素を内側に順番に選択
• Shift+Meta+A — 任意のタグで囲む
• Ctrl+Alt+→ — 次点の編集場所へ移動
• Ctrl+Alt+← — 前点の編集場所へ移動
• Meta+L — 今居る位置の行を選択
• Meta+Shift+M — 今いる要素内を1行にする
• Meta+/ — 今居る位置の要素をコメントアウト、インする
• Meta+J — 今居る位置の要素をくっつける
• Meta+K — 今居る位置の要素を削除する

あとは適当に触ってみてください。
※特に裏側とつなげてはいないので、オフラインでも動きますが、リロードすれば消えちゃいますので注意してください！

まとめ

• iframe内にhtmlを吐き出すのに苦労した
• 結構さくさく動いて使いやすいかも
• zen-coding変換をするとtextareaの一番上に行くのがちょっと使いづらいかも（Zen-coding側の仕様…）
• まだまだプロトタイプ

とこんな感じかと思います。
需要があればどんどん機能を足して行きたいと考えているので、コメントやTweetをいただければと思います！

目指せなんちゃってエディター！

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と比較、もしくは絡めて説明出来たらなと考えています。

clearfixについて

このエントリーでは僕が業務で使用しているclearfixについてちょろっと書いてみたいと思います。
色々見てみましたが他の方の記事にはなかったようなので・・・（近しいのはありましたが）
CSSを始めて、誰もが困る表示を解決してくれるclearfix。
基本を知っている方でも、この方法は知らない方も居そうなので是非興味がある方はご覧下さい。

clearfixって何？

と思う方は以下のリンクを読んで見てください。

• clearfixでfloatを解除 | d-spica
• clearfixとは – webデザイナーのメモ – Yahoo!ブログ

では詳細は続きから。

一般的なclearfix

一般的に知られているclearfixは2通りあるかと思います。

content:” “;型

Coliss様より引用/* new clearfix */
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:” “;
clear:both;
height:0;
}
* html .clearfix{zoom:1;}/* IE6 */
*:first-child+html .clearfix{zoom:1;}/* IE7 */

というような「content:”";」などを用いる形が一番一般的かと思います。
これは昔からあるやり方ですね。
個人的にはclassとして使わないと若干長ったらしいのがちょっと気になります。

overflow:hidden;型

CSS HappyLife様より引用#main .section{
overflow:hidden;
}
* html #main .section{
height:1%;
}

これはoverflow:hidden;を使うと子要素の高さ分、親要素がその高さになるという性質を利用しているものになります。（原文どこだか忘れました…）
僕が主に使っているのはこちらの方のclearfixなのですが、ちょろっと変えて使っています。

というわけでやっとですが2行で終わるclearfix

サンプルはこちら#contents{
overflow:hidden;/* モダンブラウザ */
_zoom:1;/* IE6以下 */
}
以上です。どうです簡単ですね！
有効なブラウザは、IEは5.5からと古すぎないVerのモダンブラウザ(Firefox,Safari,Chrome,Opera)です。

ちなみに「_プロパティ:値;」という様にアンダーバーをつけるとIE6以下に適用されるハックになります。
この書き方が嫌いな人は「_zoom:1;」の部分を「* html」ハックにして、以下の様にして頂くしかないですが…
#contents{
overflow:hidden;
}
* html #contents{
zoom:1;
}
個人的にはアンダーバーを使用する場合が多いです。
validな方と戦うつもりはありませんが、自分は仕事でソースを記述するときには、お客様がキチンと見れて、運用する際にも楽に出来るほうを選ぶようにしています。
ですがソースが汚いじゃないか！と思う方はvalidな書き方にして頂いてよいと思います。
※ちなみに余談ですが、「*プロパティ:値;」とすると、IE7以下に有効なハックとなります。余談です。

overflow:hidden;系を使う上での注意点

注意として、overflow:hidden;を使っていて、その要素内でposition:absolute;を使ってウィンドウの様なものを表示させようとすると、隠れてしまうという致命的な欠点があります。

※Firebugでソースをいじって、NGな例を再現した画像です。
その場合は、従来のclearfixを使ってもらったほうが良いかとは思います…がこの条件に当てはまらない場合はどんどん使ってよいかと思います。

まとめ

というわけでまとめです。
ちなみに、classにしないで対応する場合の手法を明記します。classにしたい方は書き換えて使えばよいかと思います。

大体の場合

以下のソースを使ってclearfixを適用します。
#contents{
overflow:hidden;/* モダンブラウザ */
_zoom:1;/* IE6以下 */
}

例外の場合

上記にあるように、要素内でposition:absolute;を使ってウィンドウなどを表示させたい場合は、スタイルシートをめぐる冒険: clearfixの決定版を作る －モダンブラウザ編－様が一番良いとしているケースを応用して

#contents:after{
content:”";
display:block;
clear:both;
}
#contents{
_zoom:1;/* IE6以下 */
}

とするのが無難だと考えられます。
自分はこの手法で問題は起きていないですが、問題が起きた方はご連絡いただければ対応方法を考えたいと思います（判れば…）

メリークリスマス！

というわけでむか～し見たことがあるような、雪が降るエフェクトを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などが限られている、とかはもう若干お決まりになってきたので、そこまで触れないことにします。

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