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を触ってみて思った利点の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;
}

ちょこっとした小ネタですが…

モダンブラウザの場合の表示

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で使えない技なので需要はなさそうですね！

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

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

詳細は続きから

対応ブラウザ

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が穢れてしまうので…！

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

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

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

今回の記事は、前回の記事（レイアウトについて(1/4) – css3を触ってみて思った4個の利点）の続きです。

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

というわけでセレクタについてですね。
css2だと、HTML側で細かな指定をしないと、見た目に差をつけにくかったのですが、css3のおかげでHTMLをよりシンプルにして、細かな指定をすることが可能になります。
詳細は続きから。

そもそもセレクタって？

セレクタっていうのは一言で言えば、「cssを効かせたい場所の指定」のことです。
/*hogeというidの部分を*/
#hoge{
/*カラーを赤色にする*/
color:#f00;
}
/*hogeというidの中にある、classのafe全ての部分を*/
#hoge .afe{
/*カラーを青色にする*/
color:#00f;
}
css2のときは上のような指定が多かったと思いますが、css3ではこの指定を細かく指定出来るようになります。
css2では、あまり細かな指定が出来ませんでしたし、メジャーなブラウザでも実装しきれていない物がありました。
このエントリではまずは基本的なセレクタについて説明したいと思います。
※表示確認には、Firefox3.5、Chrome4を使用しています。

子要素や弟要素を指定「E + F」「E > F」「E ~ F」

セレクタの基本である「#hoge .afe」の発展型で、#hogeの中にある.afe全て、という広範囲ではなく、より狭く指定する事が出来ます。

Eの要素の次（隣）のFを指定する「E + F」

Eの次のFは、俗に弟要素といいます。
EとFの間に違う要素が入ると指定されません。

サンプルはこちらh1 + p{
background-color:#faa;
}

Eの中にあるFを指定する「E > F」

Eの中のFは、俗に子要素といいます。
仮にEの中のFにF（孫要素）があったとしても、指定されません。

サンプルはこちらdiv > strong{
background-color:#cfc;
}

Eの要素の後のFを指定する「E ~ F」

Eの後にある同階層のFは、これも弟要素といいます。
同階層であれば、何個目の弟でも構いません。
EとFの間に違う要素が入っていても指定されます。

サンプルはこちらh1 ~ p{
background-color:#aaf;
}

フォーカスが合っている要素を指定「:focus」（css2）

css2の中で、多くのブラウザにてcss3の実装と一緒に実装されそうなセレクタがあったので、その説明をしたいと思います。
今まではJavascriptで対処していたと思いますが、form系（input,button,textareaなど）になどにフォーカスが合った時のスタイルを指定することが出来ます。
ちなみに、「:focus」の様に「:」を用いるセレクタを疑似クラスといいます。

サンプルはこちら#text:focus{
border-color:#f00;
background-color:#ffc;
}

フォーム系の状態を判別する指定「:enabled」「:disabled」「:checked」

こちらもJavascriptやclassをつけて対応していたと思いますが、form系（input,button,textarea　等）の状態を判別して、スタイルを指定することが出来ます。
※このサンプルは3個一緒の方がわかりやすいので、3個一緒のサンプルです。

要素が有効な状態のセレクタ「:enabled」

サンプルだと選択されていないinputを指定します。

要素が無効な状態のセレクタ「:disabled」

サンプルだとdisabledのinputを指定します。

要素が選択されている状態のセレクタ「:checked」

サンプルだとcheckedのinputを指定します。

サンプルはこちらinput:enabled + span{
background-color:#f00;
}
input:disabled + span{
background-color:#0f0;
}
input:checked + span{
background-color:#00f;
}

属性を判別するセレクタ「E[attribute]」

これははっきり言って種類が多いです。
ある属性（srcやhrefやname　等）を持った要素を指定するのに使いますが、指定できる種類は豊富です。
説明を聞いてもぱっとしない部分が多いかも知れませんが、サンプルなどをよく見てみてください。正規表現などをかじったことがある方は比較的理解しやすいかもしれません。
ちなみにこの様に属性を参照しているセレクタは属性セレクタといいます。

E要素で、attributeという属性を持っている要素を指定「E[attribute]」

attributeという属性を持っているか、持っていないかの単純な判断をします。

サンプルはこちらli[class]{
background-color:#f00;
}

E要素で、attributeの属性がvalueの値から始まる値を持っている要素を指定「E[attribute^=value]」

attributeという属性を持っていて、かつその値が指定したものから始まっているかどうかの判断をします。

サンプルはこちらli[title^="hoge"]{
background-color:#f00;
}

E要素で、attributeの属性がvalueの値を含む値を持っている要素を指定「E[attribute*=value]」

attributeという属性を持っていて、かつその値が指定したものを含んでいるかどうかの判断をします。

サンプルはこちらa[href*="kzms2.com"]{
background-color:#0f0;
}

E要素で、attributeの属性がvalueの値で終わる値を持っている要素を指定「E[attribute$=value]」

attributeという属性を持っていて、かつその値が指定したもので終わるかどうかの判断をします。

サンプルはこちらa[href$=".html"]{
background-color:#ff0;
}

E[attribute~=value]

attributeという属性を持っていて、かつその値が指定したものを独立して持っているかどうかの判断をします。
サンプルを見てもらえば判ると思いますが、複数classが適用されている中で、hogeというclassを持っているかどうか　などの判断をします。

サンプルはこちらli[class~="hoge"]{
background-color:#f00;
}

E[attribute|=value]

aやlink要素で、hreflangやlangなどの言語に関する属性がある場合で、かつその値が指定したものを含んでいるかどうかの判断をします。
※これが属性セレクタで一番特殊でした。。。使う機会は少ないと思います（キッパリ

サンプルはこちらa[lang|="en"]{
background-color:#ff0;
}

いったんまとめ

1. htmlに細かな記述をしなくても、cssで指定することが可能になる。
2. といってもこれで半分くらい。css3で導入されたセレクタの量は異常

というわけでセレクタ多すぎです…いいことなのですがまとめきれないので、次回もまたセレクタについてまとめたいと思います。
4エントリで完結みたいな書き方をしてすみません。挫ける前にpostしたかったんです…！
続きはまた次回のエントリで＞＜

※ちなみに、どのブラウザでcss3の、どの指定が出来るのかはCSS Selectors testsuiteを各ブラウザで訪れれば、どのセレクタが有効かが一目でわかるのでお勧めです。

このブログをリニューアルして思ったこと

やっぱりCSS3は便利でした。
自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。

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

といった4点が利点かなー　なんて思いました。

本日はレイアウトについて便利だったことを書いてみます。
詳細は続きで。

まず始めに

css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。
css3からは違う概念でレイアウトを組むことが可能になっています。
表示確認には、Firefox3.5、Chrome4を使用しています。

※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっているので、そのような記述が必要となります。（IEは今のところ対応していないので書かないでいいかもですが、念のため…気になる方は抜いちゃってください）
しばらくは4つ書いておけば無難だと思います。

多分下の4つさえ抑えておけばcss3でのレイアウトは困らないかと思います。

1. display:box;
2. box-flex:1;
3. box-ordinal-group:1;
4. box-sizing:border-box;

詳細は下で説明します。

子要素を横に並べる「display:box;」

子要素を横並びに表示させます。対象子要素の横幅は指定しない限りはコンテンツの中身に依存します。

サンプルはこちらdisplay:box;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
Mozilla系だと子要素に指定した上下のpaddingがうまいこと表示されていません。
原因がわかり次第解決策を載せたいと思います。

要素をフレキシブルな横幅にする「box-flex:1;」

親要素がdisplay:box;のときに設定した割合で横幅をフレキシブルに変化させる。
兄弟要素にbox-flex:1;とbox-flex:2;があった場合1:2の割合で横幅を使います（33%と66%という感じ）

サンプルはこちらbox-flex:2;
-webkit-box-flex:2;
-moz-box-flex:2;
-ms-box-flex:2;

要素の表示順を決める「box-ordinal-group:1;」

親要素がdisplay:box;のときに子要素の表示させる順番を決める。
z-indexのように優先順位を設定することが可能で、数値の値が低いものほど左側に表示される。

サンプルはこちらbox-ordinal-group:2;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
-ms-box-ordinal-group:2;

width+padding+borderをwidthとしてしまう「box-sizing:border-box;」

width+padding+borderをwidthとして計算する。
たとえばcss2だとwidth:100%;とpadding:20px;とした場合、40pxはみ出てしまいますが、この指定をすることによって、paddingを20px保持しながらはみ出すことなく表示することが可能になります。

サンプルはこちらbox-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;

まとめ

1. css3をうまく使うことで、カラム落ちも起きにくくなり今までよりもわかりやすくレイアウトが出来ます。
2. ただ、IEが対応しておらず、IE9でも今のところ対応が絶望的なため、そこがネック
3. でも楽しいし、判りやすいし使ってみたほうが良いよ！

と若干まとめかどうかあやしいですが、こんな感じになります。
他の3項目についてはまたの機会に！

下のようなボタン画像を

hover時（マウスカーソルが合った時）に画像をこれ以上用意せずに変化させるTipsです。
上のボタンにカーソルを合わせたら色が少し薄くなると思います。

対応ブラウザなど

CSS３は使用していません。対応ブラウザはIE5.5-IE8,Firefox3,Safari3,opera9などです。

ソースは続きに記載しておきます。

ソースコード（CSS)

a.alpha:hover img{
/*モダンブラウザ用*/
opacity:0.8;
/*IE7以下用*/
filter:alpha(opacity=80);
/*IE8用*/
-ms-filter:"alpha(opacity=80)";
}
※a.alpha imgの部分は、実際に適用する要素のidやclassを割り振ってください。
※a要素にhoverを割り当てているのは、IE6以下だとa要素以外にはhoverが効かないためです。

応用っぽいもの

応用と呼べるか判りませんが、逆に先に透過させておいて、カーソルを合わせたら透過をやめるというのもありかと思います。

a.alpha2 img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter:"alpha(opacity=80)";
}
a.alpha2:hover img{
opacity:1;
filter:alpha(opacity=100);
ms-filter:"alpha(opacity=100)";
}

ちょっとした説明

これはopacityを使って半透明の状態にして、変化を出しています。
IEはちょっと独自の書き方をしないとだめなので上のようなソースになっています…

すでに知ってる方などもいるでしょうが、知らなかった方は是非頭の片隅に置いておいてみてください。

画像だけでなく、他の部分にも流用を効かす事が出来るので、簡単にマウスカーソルを合わせた時に反応させたいときは是非どうぞ。
個人的には画像を用意することなく、マウスに反応させる事が出来るのでお勧めです。