概要

よく画像でグルグル回って、ローディングを表現するのがあると思うのですが、それを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のシェアはまだまだ多いはずなのでどうなっていくのかはちょっと判断が難しいですね！

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

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

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

概要と対応ブラウザ

概要みたいなもの

タブにカーソルを合わせると少し光り、クリックすると中身がフェードインして切り替わります。
このサンプルで表現されているアニメーションやグラデーション、影や角丸などはすべて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をサポートしているブラウザだと上の様に見えます。

古いブラウザの場合

古いブラウザになればなるほどしょぼい表示になります。
うーん、しょぼいですね。とりあえず詳細は続きに。

ソースについて

css

サンプルはこちら.hkdsWp:hover .hkds{
/*マウスカーソルが重なったら表示*/
visibility:visible;
}
.hkds{
/*通常の状態は非表示*/
visibility:hidden;
/*絶対配置に*/
position:absolute;
/*ネガティブマージンで位置を調整*/
margin:-2.4em 0 0 -2.3em;
/*レイアウト調整*/
padding:0.3em;
line-height:1;
/*ボーダーで影っぽく調整*/
border-style:solid;
border-color:#336;
border-width:1px 2px 2px 1px;
/*色指定*/
background-color:#369;
color:#fff;
/*角丸処理（CSS3）*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*ボックスシャドウ処理（CSS3）*/
-moz-box-shadow:2px 2px 7px #666;
-webkit-box-shadow:2px 2px 7px #666;
}
.hkds:after{
/*噴出しの出っ張り部分の表示*/
content:"◆";
/*噴出しの背景色と同色に*/
color:#369;
/*絶対配置で表示*/
position:absolute;
bottom:0;
left:1em;
margin-bottom:-0.5em;
line-height:1;
}
とこんな感じに設定しています。
詳細はコメントアウトに書いてあるのでそちらを参照してください。

HTML

<span class="hkdsWp">
リンク
<span class="hkds">
リンク先の説明だよ！噴出しだよ！！
</span>
</span>
HTMLはこのように入れ子になっています。
親要素（噴出しを出させたいリンクなど）には「.hkdsWp」を、子要素（噴出し部分）には「.hkds」というclassを追加してあげれば表示されます。

ページ内にも一応サンプルを

ここにカーソルを合わせるとリンク先の説明だよ！噴出しだよ！！

と言う感じでした。
またIEで使えない技なので需要はなさそうですね！