「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をいただければと思います！

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

上記動画のデモは、EmEditorを用いた場合の使用例となります。

エディタを保存していちいちブラウザでリロードするのは大変だし面倒です。
色々調べていたら保存したタイミングで、自動的に更新出来る方法を見つけたので調整して作成してみました。
デュアルディスプレイの人とかはかなり恩恵を受けるんじゃないでしょうか。

詳細は続きから

ダウンロード

下記から自分が使っているエディター用のexeをダウンロードしてください。ちなみにWindowsのみです。

• dreamweaver対応版
• 秀丸対応版（動作未確認）
• TeraPad対応版
• EmEditor対応版

該当ブラウザ

該当ブラウザは以下の4つのものとなります。（Operaは何故かうまく動かない…）

• Firefox
• Chrome
• IE
• IETester

使い方

1. 
   ダウンロードしたcoding_save_and_reload-**.exe（**はエディタ略名）を起動します。タスクトレイに「K」というロゴが出ていれば起動出来ています。
2. エディターとブラウザを起動している状態で、Ctrl+sを押すことで保存と同時に該当ブラウザがリロードされます。

手順を書こうと思ったら手順2で終わってしまいました…
※自動保存を一時的に無効にしたい場合は、「Suspend Hotkeys」を有効にしてください。

作成ソフト

使用したソフトはAutoHotKeyというフリーソフトです。下記参照サイトを見るとどんなソフトかがわかるかと思います。

• AutoHotKey
• AutoHotkeyを流行らせるページ

ご意見・ご要望など

うまく動かない！もっとこうしたい！
なんてことがあったら、出来たら対応するかもなので何かTwitterなりコメントなりでご意見をいただけたらと思います。

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

2010年初エントリーとなります。本年もよろしくお願いいたします。

さて、今回は業務での効率を向上させるソフトの紹介をします。
実際に作業で使ってる流れなどもあわせて説明できればなーと思っております。

以下の感じで困っている人向けに今回は書いています。

1. PC内のフォルダを沢山開く方
2. タスクバー上にあるタスクボタンを整理整頓したい方
3. 沢山ファイルを扱って、一覧を一気に書き出したい方
4. 沢山のURLを開いて表示チェックをしたい方

と上の3つの条件どれかがちょっとでも気になったら見てみてください。
※ちなみにOSはWindowsの場合です。

詳細は続きから

MDIE – タブ式ファイラー

MDIEのダウンロード

タブ式のファイラーです。
通常のエクスプローラーだと新しいフォルダを開くとどんどん増えますが、こちらだとタブで管理が出来ます。
また画像のサムネイルや、そのファイルの情報なども見れて作業がしやすくなります。

1. 現在開いているフォルダ名。起動時に開くフォルダも指定できたりします。
2. サムネイル表示。画像や動画などのサムネイルが表示されます。
3. 画像の情報の詳細が表示されます。ファイルの縦横サイズや、容量など

※MDIEの設定をいじって、表示される部分もあるので色々オプションを触り倒してみてください。

taskbarshuffle – タスクボタンの並び順を変更

taskbarshuffleのダウンロード

タスクバー上にあるタスクボタンの並び順を変更できます。
並び順をドラッグアンドドロップで自分が好きなように変えることができます。

LS – フォルダ内のファイルパス書き出し

LSのダウンロード

フォルダを指定して、その中にあるファイルのパスをテキスト形式で書き出します。
ある程度量のあるファイルパスを一覧にしたいときにとても便利です。

1. 書き出したいファイルが入っているフォルダのパス
2. テキストを吐き出すファイルを保存する場所とファイル名

また吐き出されるテキストファイルは以下の様な内容になります。
[パス名][フォルダ名][ファイル名]
D:\test\zuma_face.png
D:\test\zuma_face_new.png
フォルダ数合計 = 0 個
ファイル数合計 = 2 個

CopyAllUrls（Firefox拡張機能） – 複数行のURLを一気にタブで開く

CopyAllUrlsのダウンロード

複数のURLを一気にFirefoxのタブで開くことが出来る様になる拡張機能です。
たとえば以下のような内容をコピーして、貼り付けることで一気に3タブが開くことになります。
http://kzms2.com/2009/12/28/easy_clearfix/
http://kzms2.com/2009/12/16/css3_tab-without_js/
http://kzms2.com/2009/11/27/advantage_of_css3/
Ctrl+Alt+vがショートカットキーになります。または右クリックからでも可能です。

上で説明しているLSと併せる事で、沢山のファイルを一気にFirefoxで開いて表示確認することが出来ます。

まとめ

整理したり、まとめたり、一括で作業すると作業効率がよくなる！
と　少なくとも僕はこう考えています。
知らなかったものがあったら是非ためしにでも使ってみてくださいっ

今回はこの4つのソフトの説明で終わらせて頂きたいと思います。
開発に便利なソフトなどはまたの機会に説明します！

このエントリーでは僕が業務で使用している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. というよりこれそもそも誰得？

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

皆様よい聖夜をっ

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

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

上の動画の実際のデモ

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

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

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

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

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

この記事は、前回の記事（セレクタについて(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などが限られている、とかはもう若干お決まりになってきたので、そこまで触れないことにします。

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