各素材等はmxp形式で配布されているものも多いので、その場合はExtension Managerでインストールしてください。下記はそうでない場合についてのお話です。

また、私の使用しているバージョンはCS4(Win用)なので、それに基づいてのメモとなります。バージョンやOS違いの場合は自分の環境に置き換えて確認してください。

スタイルを追加する

スタイルパネルのオプションメニューで「スタイルライブラリを読み込み」を選択、スタイルライブラリの名前と場所を選択します。

「スタイルを読み込む」と「スタイルライブラリを読み込み」の違いは、前者の場合は現在のドキュメントに対しての読み込みとなり、他のドキュメントではそのスタイルを使用できない。(そのスタイルの反映されたオブジェクトをコピーしたりすると使えますが・・・)後者の場合はあらゆるドキュメントで共有して使用できるスタイルとなります。

スタイルライブラリの拡張子は「.stl」。Windows XPの場合、ファイルの場所はここ。スタイルパネルからではなく直接追加したい場合はここにファイルをコピーします。

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Fireworks CS4(バージョン名)\Styles\

他のOSの場合もだいたい「\Adobe\Fireworks CS4(バージョン名)\Styles\」とかいうフォルダを探せばよさそうな予感、です。

こちらのフォルダに直接追加した場合は、Fireworksを再起動します。

共有ライブラリを追加する

ライブラリに追加するデータはmxp形式のものが多いのですが、そうでない場合は配布されているデータを下記の場所へコピーします。(Windows XPの場合)
※後述しますが、もう1つ「こっち追加してもいいよ」というフォルダもあります。

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Fireworks CS4(バージョン名)\Common Library\

配布元からダウンロードしたファイルを展開すると、多分pngの入ったフォルダが出てくるので、そのフォルダごと上記の場所へコピーします。pngファイル本体だけをCommon Library直下にコピーしても読み込みできないみたいです。

また、そのフォルダの名前が共有ライブラリパネルに表示されるので、フォルダ名を変更すればパネル内での表示も変更できます。(名前の変更は共有ライブラリパネルからも変更可能ですが。)海外のサイトからダウンロードすると英語のフォルダ名になってて何のデータだったか後で分かりにくくなってしまうことも多いので、フォルダを日本語で分かりやすいものにしておくのもオススメです。

また、上記の場所(Common Library)を確認しても最初は何もファイルは入ってないと思います。最初から入ってるライブラリのデータはこっちにあります。(Windows XPの場合)

C:\Program Files\Adobe\Adobe Fireworks CS4(バージョン名)\Configuration\Common Library\

mxp形式のファイルをExtension Managerでインストールすると、こっち側のフォルダに追加されます。上にはDocuments and Settings内の該当フォルダにコピーすると書きましたが、手動でコピーする際、こちらのフォルダにコピーしてもOKです。

パターンを追加する

Fireworksから追加する場合は、適当に長方形ツールかなにかでオブジェクトを作って、プロパティから「パターン > その他」(←ベタとかグラデーションとか書いてあるセレクトメニュー)、そこから追加するパターンを選択します。

ただし、この方法だと現在開いているドキュメント内でしか使えないので(スタイルと同じく、そのパターンの反映されたオブジェクトをコピーしてくれば使えますが。)、どんなドキュメントでも使用できるように登録したい場合は下記の場所へファイルをコピーします。

パターン用のファイルの場所はここです。(Windows XPの場合)

C:\Program Files\Adobe\Adobe Fireworks CS4(バージョン名)\Configuration\Patterns\

パターンとして利用できるファイル形式は、PNG、GIF、JPEG、BMP、TIFF、PICT（Macintosh のみ）です。

こちらのフォルダに直接追加した場合は、Fireworksを再起動します。

テクスチャを追加する

Fireworksから追加する場合は、適当に長方形ツールかなにかでオブジェクトを作って、プロパティのテクスチャのセレクトメニューからその他を選択し、該当ファイルを選びます。

ただし、この方法だと現在開いているドキュメント内でしか使えないので(スタイル・パターンと同じくそのテクスチャの反映されたオブジェクトをコピーしてくれば使えます。)、どんなドキュメントでも使用できるように登録したい場合は下記の場所へファイルをコピーします。

テクスチャ用のファイルの場所はここです。(Windows XPの場合)

C:\Program Files\Adobe\Adobe Fireworks CS4(バージョン名)\Configuration\Textures\

パターンとして利用できるファイル形式は、PNG、GIF、JPEG、BMP、TIFF、PICT（Macintosh のみ）です。

こちらのフォルダに直接追加した場合は、Fireworksを再起動します。

コマンドを追加する

コマンド用のファイルもmxp形式での配布が多いように思います。コマンド用ファイルの拡張子は「.jsf」です。Windows XPの場合、コマンド用ファイルの場所はここ。

C:\Program Files\Adobe\Adobe Fireworks CS4(バージョン名)\Configuration\Commands\

もしくは、

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Fireworks CS4(バージョン名)\Commands\

どちらにコピーしても動作するのですが、Documents and Settingsの方に入れた場合はコマンドメニュー内で、区切り線が入るので分かりやすいかも、です。

ここにファイルをコピー後、再起動するとコマンドメニューに追加されています。

自動シェイプを追加する

自動シェイプもコマンド用ファイルと同じくmxp形式でない場合、配布されているファイルの拡張子は「.jsf」です。それに加えて、自動シェイプパネルに表示するためのサムネイル画像(GIFとかPNG)も一緒に配布されている場合が多いと思います。その画像も合わせてダウンロードしておきます。

Windows XPの場合、自動シェイプ用ファイルの場所はここ。

C:\Program Files\Adobe\Adobe Fireworks CS4(バージョン名)\Configuration\Auto Shapes\

もしくは、

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Fireworks CS4(バージョン名)\Auto Shapes\

どちらにコピーしても大丈夫です。

初期状態でインストールされているファイルを確認すると、.jsfファイルと自動シェイプパネルにサムネイルとして表示するためのgif画像が置かれているのが分かると思います。スクリプトファイルと画像ファイルのファイル名を同じにしておくと連動するっていう感じです。

配布元からダウンロードした.jsfファイルと画像ファイルを上記の場所へコピーしたら再起動します。再起動後、自動シェイプパネルの中に追加したシェイプが確認できます。

パネルを追加する

パネル用のファイルはmxp形式でない場合、拡張子は「.swf」です。パネル用ファイルの場所はここ。

C:\Program Files\Adobe\Adobe Fireworks CS4(バージョン名)\Configuration\Command Panels\

もしくは、

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Fireworks CS4(バージョン名)\Command Panels\

どちらにコピーしても動作します。ファイルをコピーした後、再起動、ウィンドウメニューの中に追加したパネルがあると思います。

Documents and Settingsの方に入れた場合はちゃんと区切り線が入るので分かりやすいかも、です。

Fireworks関連のアレコレ配布、おすすめサイト

国内サイトで何かを配布しているサイトは少ないのですが、探せばいろいろありますよん。

国内サイト

• Fireworks texture gallery
• Fireworksの和風・伝統紋様テクスチャ - ProjectDD Blog
• Fireworksの共有ライブラリ作りました | Webデザインのタネ
• Fireworks « きんくまデザイン
• PIXEL LAB　ツール＆エントリー一覧
• Fireworks Tips (FireworksTipsJ) on Twitter

海外サイト

• An Explosion of Adobe Fireworks Resources - Noupe Design Blog
• FIREWORKS ZONE | Adobe Fireworks tutorials and Downloads
• Aaron Beall - Fireworks Guru
• Adobe Fireworks Extensions

前回はペンツールでパスを書いてなんやかんやしたんですが、今回はFireworksを始めたら一番最初にコレを覚えであろう長方形ツールをメインで使ってコレを５分くらいで仕上げる方法です。

デザイナさんも、デザイナさんじゃない方も、Fireworks をほとんど使った事ないわーという方にも、一度5分だけでも時間を使ってもらえたらなーという主旨も含めて書いてます。実際にやってみてもらって、「うはｗｗ Fireworks ってこんなに簡単な手順でよく見かけるこういうモノ作れたんだ」とか思ってもらえると嬉しいです。

今回の完成形

今回も前回同様、見出し画像の背景に使えそうな画像を作ります。

今回も素材集等、Fireworks の機能以外のものは使いません。

土台を用意

今回は２色のグラデーションにします。上辺のカラーは#80B7DF、下辺のカラーは#CBE2F3、線は1pxで#8BB5D3にしました。

ここでのサンプルのサイズはW 470 * H 40 としました。

今回もこういう見出し用の背景画像でよく左側にくっついてるラインを合体させます。（前回のパーツの使いまわしですけど）

長方形を用意

土台と同じサイズ（W 470 * H 40）の線なしベタ塗りの長方形を1つ作ります。色は後で変更するので何色でもいいですが、とりあえずブルー系にしておきました。

こういう普通の長方形を作ったら、次にその長方形の上にペンツールで次図のように長方形の真ん中辺りに1本曲線を書きます。

その曲線と長方形のパスを選択します。

その曲線と長方形のパスを選択した状態で、パスパネルの「パスを分割」をクリック。
これで長方形が分割されます。

で、先ほどペンツールで書いた曲線より左側は必要ないので削除します。普通に選択ツールで左半分選択して削除してください。

残った右半分を一番下の土台の右側へ重ねます。

重ねたら土台の色に合わせてこのパーツもグラデーションをつけて色を調節します。濃い方を#2880BD、薄い方を#A6D0F0にしました。

そして不透明度を50%にします。

土台とこの右半分の長方形はもういじらないです。以後の工程で上にどんどんオブジェクトを重ねるので、グループ化なりレイヤーフォルダ分けるなりロックしておくなりしておくと、後で「うわっ。こっち選択しなくていいのにひっついてきやがった！」とか、イライラせずに済むかも、です。

2つ目の長方形を用意

もう1つ長方形ツールで長方形を作ります。今度は幅は土台と同じくらいでいいですが、高さは少し短めのものを作ります。

その長方形にテクスチャの設定をします。今回はFireworks に最初から入ってる「グリッド3」というテクスチャにしました。テクスチャの適応量は100%。

こちらもグラデーションをつけます。（が、今回は最終的に白っぽくて薄い感じになりますので、グラデつけてもほとんど分からない状態になります。面倒だったらベタで白に近い水色にしても大丈夫です）そして斜めに傾けます。拡大縮小ツールで回してもいいですし、数値を入力して角度を変えても構いません。まぁ、なんせこのくらい傾けるってことで。

上の工程で作った土台達の上へこの傾けた長方形オブジェクトを重ねます。適当に動かしてベスポジを探してください。傾きの変更とかあればこの時に一緒に。

不透明度を45%にします。

もう1つこういう長方形が欲しいので、コピーペーストしてグルーンと反対方向へ向きを変えます。

上記キャプチャでは拡大縮小ツールで適当にグイーンと回しましたが、「変形 > 水平方向に反転」とかなんでもいいです。要するにひっくり返したいだけ。

コピーした方の長方形のテクスチャは「グリッド3」だったんですが、こっちは「グリッド4」にします。ほんの少ししか変わらないですが、変えます。

こちらの長方形は少し右側に向かって広げたいので、少しだけパスをいじります。右下の角をちょっとだけ広げる感じです。パスいじるの嫌いな人はダイレクト選択ツールで右下の角をクリックしてキーボードの矢印キーの下矢印ポンポンポンと8回くらいキー叩くだけでもいいです。

位置を再度調節して（下記キャプチャでは少し位置を右にズラしました）不透明度を45%、描画モードを「スクリーン」にします。

マスク！

はみ出してる部分をマスクで隠します。マスク用の白色長方形を用意して、はみ出してる2つの長方形と一緒に選択。

(n'∀')η＜オルト　エム　エム　ジー！　(ちょっと流行らせたい感じ)

上の一文がなんのこっちゃ分からない方はスルーして、「変更 > マスク > マスクとしてグループ化」でマスクしてください。次図のようになります。

仕上げの1px

今回も最後の仕上げにもうひと手間だけかけます。土台の1px内側にラインを入れたいので、長方形（塗りなし・線#EBF3FA）の長方形を作ってX1・Y1の位置に重ねます。

土台サイズをW 470 * H 40 としたので、その線のみの長方形のサイズはW 468 * H 38。その長方形の左上が土台の左から1px、上から1pxの位置にくるように重ねます。

これで完成。お疲れ様でした(n'∀')η

Fireworks の日本語チュートリアル少ないなーという話を先日Twitterでしていたので、なんか作ってみます。あまり超大作のチュートリアルは手順を書く気力が途中でなくなりそうだったので、今日は5分くらいでコレ作る方法を書きます。

今回の完成形

見出しの背景画像によくありそうなこういう画像をパパっと作ります。

今回は素材集等、Fireworks の機能以外のものは使いません。

土台を用意

まずは一番下の土台を作ります。よくあるアクア風のやつにしますね。矩形で適当なサイズで長方形作って、塗りを線形のグラデーションに。４色決めてスライダーを調節。外側には1pxの線も加えます。

ここでのサンプルのサイズはW 470 * H 40 としました。

こういう見出し用の背景画像でよく左側にくっついてるラインを合体させます。上で作った矩形を適当なサイズに変更して、色をフィルタパネルの「色相・彩度」で変更しました。

パスを用意

次に2本のパスを用意します。今回は土台の右半分にだけ模様を入れようと思うので、土台の右半分くらいの位置にパスを書きました。

その２本のパスを選択した状態で、パスパネルのパスの操作グループの中にある「パスのブレンド」をクリック。

次図のような画面が出てくるので補間の値を今回は50にして「ＯＫ」ボタンをクリック。（この補間っていうのはイラレで言うところのブレンドオプションのステップ数のようなもの。）

すると2本のパスがブレンドされてこういう状態になります。

線が青緑色なのは元々私が分かりやすいようにその色でパスを書いてたからというだけの話です。ちょっと補間数50は多すぎた気がしないでもないですが、勢いが大切なのでこのままいきます。

ちなみに、今回は曲線で2本書きましたが、別に直線でもいいですし、パスの数も別に2本じゃなくても面白い模様ができます。パスの形や数、方向と補間数の組み合わせでユニークな形状が作れます。

カラー、不透明度の調整

次に今回の背景土台に合わせて、カラーの調整します。フィルタパネルの「色相・彩度」でこういう内容にしました。

ちなみにですね、元々パスの色も土台に合わせて選色しておけば、こんなカラーの調節はしなくて済みます。ちょっと上で「パスの色分かりやすいほうがキャプチャとった時いいかー」とか思ってしまったので時間と工程ロスってます。それでも5分以内に仕上がりますからご安心ください。

次に不透明度を50%にして、好みの位置へ移動します。

マスク！

土台からはみ出してる部分をマスクで隠します。矩形でこういうマスク用の長方形を用意します。

※「コマンド > クリエイティブ > ベクトルマスク（イメージのフェード）」でフェードの工程をする人はそっちの方法でやってからマスクしてください。どっちでも一緒です。

土台とブレンドしたパスの上でマスクをかけたい位置に合わせてフェードさせる部分を調整。この時マスク用画像自体の不透明度を下げるとわかりやすいです。

んではマスクいきますね。せーのっ！

(n'∀')η＜オルト　エム　エム　ジー！

上の一文がなんのこっちゃ分からない方はスルーして、「変更 > マスク > マスクとしてグループ化」でマスクしてください。次図のようになります。

仕上げの1px

最後の仕上げにもうひと手間だけかけますね。土台の1px内側に白いラインを入れたいので、矩形で塗りなし・線#FFF の長方形を作ってX1・Y1の位置に重ねます。

今回は土台サイズをW 470 * H 40 としたので、その白い線のみの長方形のサイズはW 468 * H 38。その長方形の左上が土台の左から1px、上から1pxの位置にくるように重ねます。

右側の方の色が濃い辺りが分かりやすいかもです。ということで、これで完成ですよん。お疲れ様でした。

パスのブレンドはいろいろ応用できます。

パスのブレンドはかなり熱いです。今回はたまたま見出しの背景画像という題材で作ってみたんですが、いろんな箇所で使える子なので、なんかアクセント欲しいときにおすすめです。線だけでなく、星型とかハート型とかのパスでやってみるのもいいと思いますし、直線や曲線を描いた時に線に対してテクスチャを指定しておくのも面白いです。

「ブレンドするまでどうなるか分からない」というのはドキドキものですが、トップページのドーンと大きな画像なんかを作っている時に、こういうのを何種類か組み合わせたりしてると、なぜかものすごく手の込んだデザインのように見える偶然に出会う事もあります。

ただ、一度「これめっちゃいい！」という組み合わせに出会っても、パス保存するの忘れてたら二度と出会えない可能性が非常に高いので、「これはっ！」というパスと補間数の組み合わせに巡り合ったらとりあえずどっかに単体で保存してコレクションしておく方がいいですよー、と。

大好きなFireworksの「地味だけどコレ知ってると効率いいよ！」という小ネタ集です。このネタが有名な話なのかそうでないのか分からないのですが、私自身最初知らなかったけど、気付いてからは効率上がったぜという話なので、もし知らないユーザーさんがいたら是非活用して欲しいなーと思って書いてます。

整列パネル　間隔に数値を入れて等間隔にする

CS4ではスマートガイドがあるので、動かしたいオブジェクトを任意の位置へパパっと正確に移動させることができます。任意のオブジェクトを別のオブジェクトの上下左右のどこかに揃えたいなんて場合はそれで済ませる事も多いですが、等間隔に配置したい時は整列パネルの『間隔』使いますよね。

この『間隔』には２種類の間隔をとる方法があるのですが、そのお話。

「等間隔」で整列する場合

デフォルトでは間隔の値は「等間隔」になっています。(右図参照)

この「等間隔に整列」というのはFireworksに限らず、いろんなソフトで見かける内容なので、今更説明するのもアレなんですが、例えば下の画像内の5つの四角に対して「等間隔」のまま整列を行った場合はこうなります。

一番左と一番右の四角の位置は変わらず、間に挟まっている3つの四角が移動し等間隔に整列されます。

「数値を入力」して整列する場合

次にその「等間隔」と書いてある枠の中に数値を入力して等間隔に配置させる方法です。単位は px です。

セレクトメニューの▼をクリックしても「px」としか出てこないし、最初は何これ？状態でしたが、意味分かってからはとても便利だなー、と思ってます。右図のように、その枠に10と入力すると、10px間隔で整列されます。

一番右のオブジェクトの位置は関係なくその数値で間隔を開けて整列できます。

使い分けると便利です。

例えばナビゲーションボタンとか、予め幅・高さの決まったエリア内でオブジェクトを等間隔に端から端まで配置したい場合はデフォルトの「等間隔」を、特に大きさは決まってないけど、コンテンツ内で使うちょっとした画像なんかで間隔自体を指定して等間隔に配置したい場合は「数値を入力」して整列を、という使い分けがとても便利です。CSS Spriteを用いる時も、後者の方法で決まった間隔で整列しておくと背景位置の計算も楽になるかもです。

よくあるこういうのをパパっと解決

オブジェクトを複製した時、下図の様に重なった状態で複製してしまった時に「うわー、ミスったー。とりあえず間を空けて複製したかったのにー」という様な時にも、この数値を指定して間隔をあける方法なら重なってた状態をサクっと間のあいた状態にすることができます。

等間隔の場合は左右の端の位置は変わらないので、オブジェクトの幅によっては重なったまま等間隔になってしまうので、やはりこういう時は「数値を入力」で。

パスパネル　グラデーションをボタン1つで反転させる

パスパネルの中に「グラデーションを反転」というボタンがあります。

グラデーションのみを反転させたいパスを選択してこのボタンをクリックすると、グラデーションが反転される。

グラデーションを反転させるにはグラデーションのスライダーの部分の色を素直に変更してもいいし、オブジェクト自体を反転させるという方法もあります。ただ、スライダーの部分の色をいちいち変更するのは面倒だし、オブジェクト自体を反転させる場合、矩形とか円形ならいいけど、この例のように星型だった場合、

こうなると、何か意図と違ってきますよね。そんな時にこの「グラデーションを反転」ボタンなら

オブジェクトの形はそのまま、グラデーションのみ反転させることができるよ、と。

アクア風ボタン等のグラデーションは注意

グラデーション部分のみを反転させるのにとても便利なのですが、グラデーションに含まれる色数が４種以上の場合、ちとややこしいのです。次図の様なオブジェクトを作って、グラデーションを反転ボタンでひっくり返してみました。左が元オブジェクト、右がグラデーション反転後のオブジェクトです。

グラデーションのスライダーがズレてしまって、真ん中のラインがハッキリしなくなってしまいます。なので、こういったグラデーションならば、オブジェクト自体を反転させた方がキレイなままの状態を保持できます。次図はオブジェクト自体を反転させたキャプチャです。

が、オブジェクトの形状次第では（上記の星形とか）オブジェクト自体を反転させるのはマズいのでグラデ部分のみを反転させたいという場合もありますよね。その時はスライダーの色をそれぞれ変更してもいいのですが、一旦「グラデーションの反転」をクリックしてから、スライダーの位置だけ動かして元の状態にすればハッキリ度が復活します。

一旦「グラデーションを反転ボタン」を押してからスライダーを調節したものです。スライダーをちょこっと動かしただけで意図したとおりになりました。

テキストのカーニングを速くする

テキストのカーニングを調節するにはプロパティパネルのカーニングの部分に数字を入れて調節してもいいのですが、数字だと分かりにくいので、実際のテキストオブジェクトを見ながらキーボードで調節している方が多いと思います。その場合は該当テキスト部分をマウスで反転させて「Ctrl + 矢印キー」で調節しますよね。

が、これイラレ等と比べるとすごく遅いですよね。ストレスが溜まること溜まること。そこでこのスピードをアップさせるために「Ctrl + 矢印キー」ではなく、「Ctrl +Shift +矢印キー」で操作します。

まぁ、こんな画像を見てもスピード感はまったく伝わらないですが、上記画像くらいの文字間隔をあけるのに「Ctrl + 矢印キー」だと脳内カウントで5、6秒は掛かりますが、「Ctrl +Shift +矢印キー」だと1、2秒で済みます。

ツールヒントのショートカット

地味だけど侮れないツールヒント。
ツールヒントをオンにしているとこういう時に便利です。

オブジェクトのサイズを変更しようとすると、側に幅・高さが出てきます。オブジェクトを移動させようとするとXY座標が出てきます。こういうの地味なんですけど、すごく助かる時があるんですよね。

だけど、いつもいつも出てこなくていいよ、という存在であるのも確かです。なので、このツールヒントをオン・オフにするショートカットを覚えておくと効率よく作業ができます。

ツールヒントのショートカット　「 Ctrl + ] 」

まだ使ったことのない方はショートカットも覚えて、是非使ってみてください。重宝しますよー。(多分)

CSS3 Selectors Test - CSS3 . Info

	Firefox			Safari	Opera	Chrome	IE
ブラウザのバージョン	3.6	3.0	2.0	4.0	10.5	4.1	6	7	8
*	○	○	○	○	○	○	○	○	○
E	○	○	○	○	○	○	○	○	○
.class	○	○	○	○	○	○	△	○	○
#id	○	○	○	○	○	○	○	○	○
E F	○	○	○	○	○	○	○	○	○
E > F	○	○	○	○	○	○	×	○	○
E + F	○	○	○	○	○	○	×	○	○
E ~ F	○	○	○	○	○	○	×	○	○
E[attribute]	○	○	○	○	○	○	×	△	△
E[attribute=value]	○	○	△	○	○	○	×	○	○
E[attribute~=value]	○	○	△	○	○	○	×	△	○
E[attribute|=value]	○	○	△	○	○	○	×	△	○
E[attribute^=value]	○	○	△	○	○	○	×	×	○
E[attribute$=value]	○	○	△	○	○	○	×	×	○
E[attribute*=value]	○	○	△	○	○	○	×	×	○
:first-child	○	○	△	○	○	○	×	△	○
:link	○	○	○	○	○	○	○	○	○
:visited	○	○	○	○	○	○	○	○	○
:lang()	○	○	○	○	○	○	×	×	○
:before	○	○	○	○	○	○	×	×	○
::before	○	○	○	○	○	○	×	×	×
:after	○	○	○	○	○	○	×	×	○
::after	○	○	○	○	○	○	×	×	×
:first-letter	○	○	○	○	○	○	○	○	○
::first-letter	○	○	○	○	○	○	○	×	×
:first-line	○	○	○	○	○	○	○	○	○
::first-line	○	○	○	○	○	○	○	×	×
:root	○	○	○	○	○	○	×	×	×
:last-child	○	○	△	○	○	○	×	×	×
:only-child	○	○	△	○	○	○	×	×	×
:nth-child()	○	×	×	○	○	○	×	×	×
:nth-last-child()	○	×	×	○	○	○	×	×	×
:first-of-type	○	×	×	○	○	○	×	×	×
:last-of-type	○	×	×	○	○	○	×	×	×
:only-of-type	○	×	×	○	○	○	×	×	×
:nth-of-type()	○	×	×	○	○	○	×	×	×
:nth-last-of-type()	○	×	×	○	○	○	×	×	×
:empty	○	○	△	○	○	○	×	×	×
:not()	○	○	○	○	○	○	×	×	×
:target	○	○	○	○	○	○	×	×	×
:enabled	○	○	○	○	○	○	×	×	×
:disabled	○	○	○	○	○	○	×	×	×
:checked	○	○	○	○	○	○	×	×	×

※IE6とIE7については正規版ではなく、standalone版でのチェックです。

Selectors Level 3 http://www.w3.org/TR/css3-selectors/
選択子 http://zng.info/specs/css3-selectors.html　(日本語訳)

※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。

目次

• *　(汎用選択子)
• E　(型選択子)
• E[foo] (属性選択子)
• E[foo="bar"] (属性選択子)
• E[foo~="bar"] (属性選択子)
• E[foo^="bar"] (属性選択子)
• E[foo$="bar"] (属性選択子)
• E[foo*="bar"] (属性選択子)
• E[foo|="en"]/E[hreflang|="en"] (属性選択子)
• E:root (構造擬似クラス)
• E:nth-child(n) (構造擬似クラス)
• E:nth-last-child(n) (構造擬似クラス)
• E:nth-of-type(n) (構造擬似クラス)
• E:nth-last-of-type(n) (構造擬似クラス)
• E:first-child (構造擬似クラス)
• E:last-child (構造擬似クラス)
• E:first-of-type (構造擬似クラス)
• E:last-of-type (構造擬似クラス)
• E:only-child (構造擬似クラス)
• E:only-of-type (構造擬似クラス)
• E:empty (構造擬似クラス)
• E:link / E:visited (リンク擬似クラス)
• E:active / E:hover / E:focus (利用者行為擬似クラス)
• E:target (ターゲット擬似クラス)
• E:lang(fr) (lang()擬似クラス)
• E:enabled / E:disabled (UI要素の状態擬似クラス)
• E:checked (E:indeterminate) (UI要素の状態擬似クラス)
• E::first-line (:first- line擬似要素)
• E::first-letter (:first- letter擬似要素)
• E::before (:before擬似要素)
• E::after (:after擬似要素)
• E.warning (クラス選択子)
• E#myid (ID選択子)
• E:not(s) (打消しの擬似クラス)
• E F (子孫結合子)
• E > F (子結合子)
• E + F (直接隣接結合子)
• E ~ F (間接隣接結合子)

*　(汎用選択子)

意味

すべての要素に一致する

最初に定義されたCSS水準

CSS2

「全称セレクタ」「ユニバーサルセレクタ」とも呼ばれる。仕様書の和訳では「汎用選択子」。

「すべての要素に一致する」わけなので、そんなに出現頻度は高くない(はず)。少し前はCSSの頭で一旦ブラウザのデフォルトスタイル（主に margin や padding等）をリセットする目的で使われてるケースも多かった。が、その後の業界の流れでは「*」じゃなくて、各要素ごとに考えてリセットした方がよくね？的な感じになってる気がする。（別に「*」を利用してリセットするのが間違ってるわけではないけど、弊害もあるので）スタイル初期化については前に気になった初期化CSSというエントリを書いたのでそちらもよろしければどうぞ。

使い方・使い道について

上に書いたリセット用に使うっていう以外に、こんな使い方もいいかも、な話。ページの本コンテンツ部分では常にいくつかの要素の後はマージンやらなんやら入れて見た目を調節してるけど、例外的にこの部分だけマージンを0にしたい！というような場合。例えばそれがformの中だけは各要素のマージンをなくしたいという事であったらとしたら、

form * { margin:0; }

同じ例の延長で、formの中だけはどの要素についても上下マージンを統一したいなんて場合は、

form * { margin:10px auto; }

とか。個別に継承を調節した方がいいケースもあるので、常にこの方法を使うと逆に面倒だという場合もあるけれど、一括で指定したい場合は楽。

>>サンプルページを確認

その他、CSSハックで使う事もあるけど今回の主旨とは違うのでそこはスルー。

E　(型選択子)

意味

型Eの要素に一致する

最初に定義されたCSS水準

CSS1

一番単純なセレクタ。ページ内にあるE要素全てに一致。

使い方・使い道について

多分これはCSSで一番最初に覚えるやつなので、詳しい説明は省きます。

p { color:#333; font-size:1em; }

E[foo] (属性選択子)

意味

"foo"属性を持つE要素に一致する

最初に定義されたCSS水準

CSS2

属性の「値」は何でもいい。とにかく指定した属性を持ってるE要素ってこと。ちなみに見出し部分には「属性選択子」と書いているのですが、所謂「属性セレクタ」ってやつです。

属性選択子(属性セレクタ)全てに当てはまる事だけれど、[foo]とか下記に出てくる[foo="bar"]などの部分は重ねて指定してもＯＫ。

使い方・使い道について

a要素にtarget属性を持ってるものだけに背景色を指定する例。

a[target] { background:#fcc; }

属性を組み合わせたい場合なんかは以下のような書き方をする。

a[target][title] {background:#cfc;}

>>サンプルページを確認

E[foo="bar"] (属性選択子)

意味

"foo"属性の値が厳密に"bar"と等しいE要素に一致する

最初に定義されたCSS水準

CSS2

属性と値が完璧にマッチしてるE要素に適応される。どっちかが合ってても、もう一方が合ってなかったら適応外。属性と値の組み合わせを細かく指定することが出来る。

使い方・使い道について

例えばform内のinput要素で1行テキストボックスにだけwidth:300pxを適応させたい場合はこんな感じ。

input[type="text"] {width: 300px;}

ページの上部へ戻るリンクなんかで、a要素のtitle属性に"ページの先頭へ"という値を含むもののだけ背景色を付けたいという場合はこんな感じ。

a[title="ページの先頭へ"] {background:#fcc;}

今、背景色をつけたリンクでhover時には背景色を変えたいとかいう場合には

a[title="ページの先頭へ"]:hover {background:#f00;}

と、こんな感じになる。

>>サンプルページを確認

自分がこのセレクタを一番最初に実務で使った箇所はフォーム部品の周りの調整だった気がする。チェックボックスやラジオボタン横のマージンとりたいとか、そういうの。IE6では効かないんだけど、元々IE6はそれらのフォーム部品の周りに余白を勝手に取りよるから別に問題ないかーみたいなノリで恐る恐る利用したのも今となってはいい思い出。

このブログみたいに別窓リンクを開くのにJS使わずに、target使ってるサイトで（今時…な感じは否めない）別窓開くリンクの横にアイコン置きたい場合

a[target="_blank"]{
	background:url(hoge.png) no-repeat right center;
	padding:0 20px 0 0;
	}

とか、後付で何かいじるのも属性セレクタを使えば楽。IE6ではCSSだけじゃ無理だけど、なくても困らないものは気にしない！・・・といいつつもIE6は未だにシェアが下がらないのでclass付けて同じことするか、JSさんに頼るかという手順を踏んだりしてるんですけどね！早くその無駄なclass付けから開放されたいですね！

E[foo~="bar"] (属性選択子)

意味

"foo"属性の値がスペースで区切った値のリストであり、その一つが厳密に"bar"と等しいE要素に一致する

最初に定義されたCSS水準

CSS2

要素の属性の値がスペース区切りで複数ある場合、その中の1つと完全にマッチした場合に適応される。といっても、値が複数なくてはいけないわけではなく、値が1つでも適応される。それだと1つ上のE[foo="bar"]と何が違うんよって話になるけど、E[foo="bar"]の場合は値が複数の場合は例えその中に一致する値があっても複数の値が空白区切りで入ってたら適応されない。（値の中身が完全にそれとまったく同じでないと適応されない）E[foo="bar"]は完全一致、E[foo~="bar"]は「値単位での部分一致」ＯＫみたいな感じ。

ならば全部E[foo~="bar"]で書けばいいやんという気にならないでもないんだけれど、使い分けとしては、値が1つしかないものに関してはE[foo="bar"] 、複数あるものでその中の1つにでも一致したものを選択したい場合はE[foo~="bar"] を使うといいよってことなのかも。

使い方・使い道について

classの複数付けの1つにマッチさせたい場合。

p[class~="sampleB"] {background:#fcc;}

classの組み合わせでマッチさせたい場合。

p[class~="sampleB"][class~="sampleC"] {background:#cfc;}

>>サンプルページを確認

上記サンプルページのようにclass属性に限らず、こうやって組み合わせで属性と値を組み合わせて該当部分をピンポイントで抽出できるのって超便利。後から変更になったとか追加になったとか、そういう状況の時に手間かけずにこの組み合わせの指定いれるだけで解決したわって事もあった。（IE6は無視で）

E[foo^="bar"] (属性選択子)

意味

"foo"属性の値が厳密に文字列"bar"から始まるE要素に一致する

最初に定義されたCSS水準

CSS3

属性の値が指定した文字列で始まっていれば適応される。前方一致というやつ。

使い方・使い道について

このセレクタの使用例としてよくhttp://から始まるリンクにアイコンをつける方法が解説サイトなんかでよく書かれているので、ちょっと違う事します。
mailtoでメールを送るようなリンクにメールアイコンを表示させたい場合は

a[href^="mailto:"]{
	background:url(../hoge/letter.png) no-repeat right center;
	padding:0 20px 0 0;
	}

こんな感じ。http://から始まる…の例とほとんど変わらないですね。ごめんなさい。もうちょっと違う事します。

例えば商品を紹介しているページで、p要素の中にimg要素を入れて商品写真を掲載しているページがあったと仮定して、その写真が新製品である場合のみ、周りを他の商品と違う色のボーダーで囲みたいよーというケースでこんなんはどうでしょーか。新製品の場合はp要素のtitle属性に【新商品：なんたらかんたら】のように必ず「【新製品」というのを頭に入れておくと、自動的にその新商品のボーダーだけ新商品用の色を指定できる、みたいな例。

p[title^="【新商品"] img{
	border:2px solid #630; /* 茶色のボーダー */
	padding:5px;
	} 

>>サンプルページを確認

「新商品：」という部分の文字列を削除するだけで他の商品と同じボーダーカラーになる、みたいな。

E[foo$="bar"] (属性選択子)

意味

"foo"属性の値が厳密に文字列"bar"で終わるE要素に一致する

最初に定義されたCSS水準

CSS3

属性の値が指定した文字列で終わっていれば適応される。後方一致というやつ。

使い方・使い道について

このセレクタの使い方としてはだいたいリンク先のファイルの拡張子を判別して別のアイコンをつける（リンク先がpdfファイルならPDFファイルのアイコンを表示させるとか）パターンが紹介されてるので、その書き方。

a[href$=".pdf"] {
  background:url(../hoge/letter.png) no-repeat right center;
  padding:0 20px 0 0;
	}

>>サンプルページを確認

E[foo*="bar"] (属性選択子)

意味

"foo"属性の値が部分文字列"bar"を含むE要素に一致する

最初に定義されたCSS水準

CSS3

属性の値の中で指定した文字列が含まれる場合に適応される。部分一致。

使い方・使い道について

例えばサイトの更新情報を表示しているリスト部分でリンク先によって違うアイコンを表示しているようなケースを想定。私は実務では今それぞれにclassを振ってアイコンを変えている。でもこのセレクタを利用すれば、いちいちclassを割り振りしなくても、a要素のhref属性の値の文字列からディレクトリ部分を一致させて、それぞれに違うスタイルを割り振ることができる。

a[href*="categoryA"],
a[href*="categoryB"],
a[href*="categoryC"]{
	padding:0 0 0 65px;
	}
a[href*="categoryA"]{background:url(img/icon_01.png) no-repeat left center;}
a[href*="categoryB"]{background:url(img/icon_02.png) no-repeat left center;}
a[href*="categoryC"]{background:url(img/icon_03.png) no-repeat left center;}

※上記の例ではhref属性の値が「./categoryA/hoge.html」こんな感じになっているので問題ないのだけれども、もしかしたら「./categoryB/categoryA.html」(文字列「categoryA」と文字列「categoryB」が両方含まれる)なんて値が入るかもしれないので、a[href*="categoryA"]　の　"categoryA"　部分は「"/categoryA/"」とか「"categoryA/"」とかいう風にしておいた方が無難だと思います。

>>サンプルページを確認

E[foo|="en"]/E[hreflang|="en"] (属性選択子)

意味

"foo"属性が"en"で(左から)始まる値のハイフンで区切ったリストであるE要素に一致する

最初に定義されたCSS水準

CSS2

補足

この属性セレクタの型が最新版の英語で書いてある方の仕様書では「E[foo|="en"]」ってなってて、翻訳版（古い）のほうでは「E[hreflang|="en"]」ってなってる。どちらも値が"en"になってるし、元々は言語関連が主な用途みたいだけど、それ以外の用途で使用しても別に構わない。

ハイフンがどうたらこうたらっていうのが少しややこしいけど、上の例でいうと値が厳密に「en」であるか、またはハイフンの直前に厳密に「en」が来てるか、そのどちらかの条件に合えば適応される。例えばCSS側で E[hreflang|="en"] という風にセレクタを書いてやるとhtml側に「hreflang="en"」「hreflang="en-US"」がついてる要素があると、その両方にもマッチするという意味。

上の補足部分にも書いたけど、言語関連以外の用途で使用しても別に構わない。

class名を考える時に関連するグループでは頭は同じ単語を使ってそのあとハイフンで区切って種類を分けようというルールを用いる時とかありますよね。（なくてもあるってことにしてっ！）例えば「.sample-txt」「.sample-img」のように、そのハイフン前の単語部分の「sample」に一致するものを選択したい場合なんかにも使える。

使い方・使い道について

a要素かlink要素内で使用できるリンク先の言語を表すhreflang属性を利用して、リンク先の言語毎に背景色を変える場合はこういう風にする。

a[hreflang|="en"] {
	background:#cfc; /* 背景色・うすい緑 */
	}
a[hreflang|="zh"] {
	background:#fcc; /* 背景色・ピンク */
	}

上に書いたように言語関連以外の属性でも使用できる。

p[class|="sample"] {
	background:#fc6; /* 背景色・オレンジ */
	}

>>サンプルページを確認

属性セレクタ全般に関する備考

誤解されると申し訳ないので一応書いておきます。
上に書いた7種類の属性セレクタについて、どれを使っても同じものにマッチするというのがいろいろあるので、上記サンプルでその属性セレクタが使われてるからといって、それでないとダメということではないです。自分のマッチさせたい要素が指定できるならどれ使ってもいいです。

E:root (構造擬似クラス)

意味

文書のルートであるE要素に一致する

最初に定義されたCSS水準

CSS3

これは文書のルート要素を表すものらしい。使い道がよく分からないのだけれども。仕様書の翻訳をそのまま引用すると、

:root擬似クラスは、文書のルートである要素を表す。HTML4の場合においては、これはHTML要素である。XMLの場合においては、XMLの文書に対する、DTD又はスキーマ、及び名前空間に適切であれば、何でもよい。

とのこと。つーことは、これは普通のhtml文書の場合、html要素にスタイル当てるのと同じようになるってことだと思う。

使い方・使い道について

:rootを利用して背景色とフォントカラーを指定する例。

:root{
	background:#000;
	color:#fff;
	}

>>サンプルページを確認

セレクタ「:root」の部分を「html」に変更してもまったく同じ。

コメントにてルート要素＝初期包含ブロックという風に言葉を置き換えて頂きました。そっちの言葉だとイメージしやすいですね。

E:nth-child(n) (構造擬似クラス)

意味

その親のn番目の子であるE要素に一致する

最初に定義されたCSS水準

CSS3

:nth-child()擬似クラスの()の中に入る引数については仕様書のこの辺り。いろんな指定方法ができるんですなぁ。(2n)のように偶数を表す「even」や(2n+1)のように奇数を表す「odd」の値も使える。

:nth-child()擬似クラス

使い方・使い道について

「何番目のなんたら」の使い道が多すぎてどんな例を挙げたらいいのか悩む。とりあえず以下6件の例。

• リストの3番目の要素だけ背景色をつける例
• リストの最初の3つに背景色をつける例
• (2n)を利用して「しましまテーブル」を作る例
• (even)を利用して「しましまテーブル」を作る例
• 3列にfloatで並べたli要素の一番右だけマージンをなくす例
• floatさせたli要素の4番目ごとにclearを入れて3段組にする例

#sample1 li:nth-child(3){
	background:#fcc; /* 背景色・ピンク */
	}
#sample2 li:nth-child(-n+3){
	background:#9cf; /* 背景色・水色 */
	}
#sample3 tr:nth-child(2n){
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample4 tr:nth-child(even){
	background:#fc6; /* 背景色・オレンジ */
	}
#sample5 li{
	float:left;
	display:inline;
	width:180px;
	height:100px;
	background:#fcc; /* 背景色・ピンク */
	margin:10px 10px 10px 0;
	}
#sample5 li:nth-child(3n){
	margin:10px 0;
	}
#sample6 li{
	float:left;
	display:inline;
	width:100px;
	min-height:80px;
	background:#cfc; /* 背景色・うすい緑 */
	margin:10px;
	}
#sample6 li:nth-child(3n+1){
	clear:left;
	}

>>サンプルページを確認

今はブラウザ側の都合でこういうのをCSSだけではなくJS併用、またはclassやidを余分に追加して実現しなくてはならないケースが多いのだけれど、マジで早く遠慮なく使えるようにして欲しいなぁと思います。

E:nth-last-child(n) (構造擬似クラス)

意味

最後のから数えてその親のn番目の子であるE要素に一致する

最初に定義されたCSS水準

CSS3

1つ上の「E:nth-child(n)」 が頭から数えて何番目の…に対して、こちらは最後から数えて何番目の…というもの。「even」「odd」の値も使える。

使い方・使い道について

ul要素内の各li要素に1pxのボーダーを上下に加えていきたいとき、borderの上なり下なりに罫線を指定する。その時、例えばボーダーを各liの上側につけるとしたら、一番最後のli要素の下側の罫線がつかない。そういう時は最後のli要素にだけclassを振るとか、ul要素自体の下側にボーダーを加えるとか、なんか該当li要素部分以外にひと手間かけて対応するんだけど、（border-topとborder-bottom両方してしまうと、隣接部分のボーダーが倍になっちゃうので）このE:nth-last-child(n)を使えばスッキリ解決する。

li{
	border-top:1px solid #999;
	}
li:nth-last-child(1){
	border-bottom:1px solid #999;
	}

テーブルの最後の2行にだけ背景をつけたい例。

tr:nth-last-child(-n+2){
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

E:nth-of-type(n) (構造擬似クラス)

意味

その種類のn番目の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素に一致するということで、説明しにくいので図解。

周りのグレーの枠が親だと考えて、その中に入ってる子供は皆兄弟。んでもって、「兄弟関係にある同じ種類の要素」というのが、この図で言うと5つのp要素。E:nth-of-type(n)の場合は「隣接」兄弟でなくてもいいので、間にh2要素が挟まっても5つのp要素に対する「何番目の」という関係は継続する。

このE:nth-of-type(n)も「even」「odd」の値が使える。

使い方・使い道について

同じ親を持つp要素の中で4番目だけ背景色を変える例。

p {
	background:#cfc; /* 背景色・うすい緑 */
	}
p:nth-of-type(4) {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

E:nth-last-of-type(n) (構造擬似クラス)

意味

最後のから数えて、その種類のn番目の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

上の「E:nth-of-type(n)」が頭から数えて何番目か…に対して、こちらは最後から数えて何番目か…となる。「even」「odd」の値も使える。

使い方・使い道について

同じ親を持つp要素の中で最後から4番目だけ背景色を変える例。

#sample1 p {
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample1 p:nth-last-of-type(4) {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

E:first-child (構造擬似クラス)

意味

その親の最初の子であるE要素に一致する

最初に定義されたCSS水準

CSS2

これと同じ！

:nth-child(1)

ある親要素の最初の子要素、ということで、親要素の直下要素(一番最初に現れる要素)にマッチするやつです。但し、親要素の直下がマークアップされていない場合はそれは直下要素には当てはまらない。多分、こういうCSSのお話のブログ読んでる人でマークアップせずに生のまま置いてる人はいない気がしますが一応書いておきますね。

使い方・使い道について

最初のp要素内のstrong要素だけ赤字太字にする例と、リストの一番最初のli要素だけに背景色をつける例。

p:first-child strong {
	color:red;
	font-weight:bold;
	}
li:first-child {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

:nth-child(1)と同じで、基本的に「1番目のなんたらをどうこうする」という使い方です。ちなみに現在TwitterのTLで、ol要素の各liにはborder-bottomが指定してありますが、そこに一番最初のli要素だけにborder-topを入れるために「ol.statuses > li:first-child」こんな風に指定してあります。

E:last-child (構造擬似クラス)

意味

その親の最後の子であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:nth-last-child(1)

「E:first-child」の逆。こちらは最後の子にマッチする。

使い方・使い道について

最後のp要素内のstrong要素だけ赤字太字にする例と、リストの一番最後のli要素だけに背景色をつける例。

#sample1 p:last-child strong {
	color:red;
	font-weight:bold;
	}
#sample2 li:last-child {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

E:first-of-type (構造擬似クラス)

意味

その型の最初の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:nth-of-type(1)

「自分の親要素の子のリストの中で、自分の種類の最初の兄弟である要素を表す。」というもの。隣接兄弟であってもなくても、とにかく同じ親で兄弟関係ならその要素の一番最初のものにだけマッチする。

使い方・使い道について

同じ親を持つp要素の中で最初の要素だけ背景色を変える例。

#sample1 p {
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample1 p:first-of-type {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

E:last-of-type (構造擬似クラス)

意味

その型の最後の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:nth-last-of-type(1)

「E:first-of-type」の真逆。こちらは親要素の子のリストの中で、自分の種類の最後の兄弟である要素にマッチする。こちらも隣接兄弟であってもなくても同じ親で兄弟関係ならその要素の一番最後のものにだけマッチ。

使い方・使い道について

同じ親を持つp要素の中で最後の要素だけ背景色を変える例。

#sample1 p {
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample1 p:last-of-type {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

E:only-child (構造擬似クラス)

意味

その親の唯一の子であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:first-child:last-child / :nth-child(1):nth-last-child(1)
（と同じだけど固有性は低い。）

兄弟を1つも持ってない要素にマッチ。同じ親を持つ同じ要素名の兄弟じゃなくて、同じ親を持つ兄弟自体がいない要素。

使い方・使い道について

兄弟がいないp要素だけ背景色をつける例。

.sampleDiv p:only-child {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

E:only-of-type (構造擬似クラス)

意味

その種類の唯一の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:first-of-type:last-of-type / :nth-of-type(1):nth-last-of-type(1)
（と同じだけど固有性は低い。）

同じ要素名を持っている兄弟が1つもない要素を表す。「E:only-child」との違いは「E:only-child」は同じ親を持つ兄弟自体がいない要素にマッチするのに対して、こちらの「E:only-of-type」は同じ要素名を持っている兄弟がいない要素にマッチする。

使い方・使い道について

親の中に同じ要素名の兄弟がいない要素にだけ背景色をつける例。

.sampleDiv :only-of-type {
	background:#fcc; /* 背景色・ピンク */
	}
.sampleDiv em:only-of-type {
	background:#cfc; /* 背景色・うすい緑 */
	}

>>サンプルページを確認

E:empty (構造擬似クラス)

意味

(テキストのノードを含めて)子供を持たないE要素に一致する

最初に定義されたCSS水準

CSS3

子を一つも持たない要素を表す。DOMの観点から時によっては空のテキストのノードを含む。

使い方・使い道について

これも:root同様、あまり使い道が分からない。そういえば、どこかのサイトでテーブルの空セルに使えるというのを見たことがある気がします。

それ以外だと…制作途中でコーディングしてる際に要素の開始タグと終了タグだけ書いてあるけど中身は空、実はそれ不要なものでしたーというケースがないとも言い切れないので、そういう凡ミス防止のチェック用に制作途中はCSSの頭にこんなん入れたらミスに気付きやすくなるかなという案。（いや、まぁ実際はそんなミスはあまりないと思うけれども）

/* 凡ミス防止用 ここから*/	
*:empty {
	background:red;
	padding:50px;
	}
img:empty {
	background:none;
	padding:0;
	}
/* 凡ミス防止用 ここまで */	

>>サンプルページを確認

実験結果。インライン要素がemptyだとなんか大変な失態をしでかした気になる。そして上記サンプルソースのimg要素部分の指定についてなんですが、img要素のwidthとheightの指定がない場合、ちゃんと正しい文法でimg要素を置いててもempty状態とみなされるらしい。（Fxでしか検証してないので他はわからんけれども）img要素にwidthとheightを入れられない時もあるので、そのために上記のimg:emptyってやつを追加してみました。

あ、もちろんこれはネタですよ、ネタ。

真面目に使い道を考えてみると、例えばCMS使ってて、いつも全部の入力項目に内容を入れるわけじゃない、けどソースは要素が中身空のままはいっちゃう、空で入っててもmarginとかは中身が入ってる時と同じように反映されちゃう、それはやだ、そうだ！:emptyを使って中身が空の時はmarginを0にしちゃおう！というかdisplay:none;でいいや！とかいう使い方ができるのではないでしょうか。(と、書いてよく考えてみると自分の使ってるCMSツールは中身空ならソースに反映されないようにできるよな…と気付いたけどせっかく考えたからこのまま残します)

構造擬似クラス全般に関する備考

誤解されると申し訳ないので一応書いておきます。
上に書いた12種類の構造擬似クラスについて、どれを使っても同じものにマッチするというのがいろいろあるので、上記サンプルでその構造擬似クラスが使われてるからといって、それでないとダメということではないです。自分のマッチさせたい要素が指定できるならどれ使ってもいいです。

E:link　/　E:visited (リンク擬似クラス)

意味

ターゲットがまだ訪れていない(:link)か、あるいはすでに訪れている(:visited)ハイパーリンク元のアンカーであるE要素に一致する

最初に定義されたCSS水準

CSS1

使い方・使い道について

これはCSS始めたら初期段階で覚える内容だと思うのでサラっと流しますね。

a:link {color:＃0000ff; /* 未訪問のリンクカラー */}
a:visited {color:＃800080;/* 訪問済のリンクカラー */}

E:active　/　E:hover　/　E:focus (利用者行為擬似クラス)

意味

利用者がある行為をしている間のE要素に一致する

最初に定義されたCSS水準

CSS1及び2

使い方・使い道について

:activeは利用者が要素をアクティブ状態になった場合に適応。例えばリンクテキストをポチッと押した瞬間とか。（そういえばこの前こんなん書きました）

:hoverは利用者がポインティング装置（普通にPCでwebページ見てるならマウス・カーソルとか）を用いて要素を指定してるけどアクティブ状態ではない状態の場合に適応。例えばa要素の上にマウスカーソルが重なってる時とか。

:focusは要素がフォーカスを有する状態にある場合に適応。例えば入力フォームにテキストを入力使用としてる時とか。

a:active {color:＃0000ff; /* active時のカラー */}
a:hover {color:＃ff0000;/* hover時のカラー */}
a:focus {color:＃ffffcc;/* focus時のカラー */}

余談

あ、ちなみにですね、私がwebを始めた頃にこの:link、:visited、:hover、:activeっつーのはこの順番で書かないとマズいぜ、というTipsが流行していた（？）気がするのですが、今でもこの順番の覚え方が頭にこびりついています。今もそんな覚え方するのかどうかは知らないけれども、私と同時期にweb始めた人は絶対知ってるはず。

(n'∀')η　＜せーの！ラブハッ！　("LOVE" and "HATE")

多分一生「ラブハッ」は忘れないと思います。

順番についての追記（2010.05.14）

上ではこの順番に書かなきゃならないとサラっと流したのですが、コメントにてCSS2に順番に関する注記のお話を頂いたので補足しておきます。CSSの勉強を始めたときにそれぞれの順番が変わるとどうなるのか、手元で試した人は多いと思いますが、こうなります。

:hoverは:linkや:visitedよりも後に書かないと、カスケードの規則によって:hoverのプロパティが上書きされてしまう事になる。例えばそれぞれに別のcolorプロパティを指定していたとして、:hoverよりも後に:link,:visitedの記述を書いた場合、:hoverのcolorの値は後に書いた:link,:visitedのcolorの値が上書きされるため、hover状態になった時に:hover部分で指定したcolorの値の色は適応されない。

同じように:activeの内容を:hoverよりも先に書いた場合、:hoverの値が上書きされ:activeのcolorの値は適応されない。（hoverの状態はマウスが上に乗っている時だけではなく、クリックされている時もマウスが乗っている状態であることには変わらないのでそういうことになる）

逆に使い方の例として、:hoverや:activeより後に:visitedを指定すると常に:visitedの内容が適応される事を利用して、もし訪問済みリンクに対しては常に:visitedに指定したスタイルで固定したい場合は:visitedを一番最後に記述すればいい。

E:target (ターゲット擬似クラス)

意味

参照しているURIのターゲットであるE要素に一致する

最初に定義されたCSS水準

CSS3

これはページ内でのリンク等、文書内の特定の部分へのリンク する場合に「href="#sample"」や「href="hoge.html#sample"」、こんな風に「#」から始まり識別子（ここで言うとsample）で終わるURIを参照するように指定する場合に使用できる擬似クラス。マッチする対象要素は#●●でターゲットにされた●●の部分。

使い方・使い道について

該当要素がターゲットされた際に背景色を変える例。

#sample1:target {
	background:#fcc; /* 背景色・ピンク */
	}
#sample2:target {
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample3:target {
	background:#fc6; /* 背景色・オレンジ */
	}

>>サンプルページを確認

あとこれは前にエントリを書いたのだけれども、下記サイトでは:target擬似クラスでイメージギャラリーを作る方法が紹介されていました。

imgに対してまずposition:absolute;を指定しておいて、各リンクをクリックした時に:targetの該当img要素に対してz- indexで最前面に配置する、というもの。

Making an image gallery with :target - CSS3 . Info

E:lang(fr) (lang()擬似クラス)

意味

言語"fr"での型Eの要素(その文書言語は、言語が決定される方法を指定する)に一致する

最初に定義されたCSS水準

CSS2

lang属性と値がを指定された要素に対して対象言語にマッチしたものに適応される。言語コードはISO-639で定義されているものを指定。

使い方・使い道について

lang属性の値によって背景色を変更する例。

p:lang(ja){
	background:#fcc; /* 背景色・ピンク */
	}
p:lang(fr){
	background:#cfc; /* 背景色・うすい緑 */
	}

>>サンプルページを確認

以下コメントより引用
言語は E の祖先でも決まります。p:lang(ja) は <body lang="ja"><p>ほげ</p></body> の p 要素にマッチします。これは [lang|="ja"] では代替できません。

E:enabled　/　E:disabled (UI要素の状態擬似クラス)

意味

有効または無効にされている利用者インタフェース要素Eに一致する

最初に定義されたCSS水準

CSS3

有効になっている時のスタイルと無効になっている時のスタイルを定義できる。無効化についてはHTML側の該当要素に「disabled="disabled"」を指定する。

が、disabled属性なんて使ったことねーよ！ということで、久々にちゃんとタグ辞典を調べました。この属性が使用できる要素はフォーム関連の6つの要素でした。(input要素・textarea要素・button要素・select要素・option要素・optgroup要素)

また、同辞典によると、この状態を変更するためにはスクリプトを利用する必要があります、とのこと。JSとかで有効無効が変更できるので、その際にこの擬似クラス使うとスタイル当てるのも楽だよということなのかもしれない。

使い方・使い道について

よくJSを使って全部入力フォームを埋めるまで送信ボタンは押させない、とか、ある項目に入力があったら最初無効になってた入力欄が有効になるとかそういうやり方を見かけるけれども、そういう時に使う方法がメインなのだと思う。JSはともかく、普通に「disabled="disabled"」だけ指定して有効のinput要素と無効のinput要素で背景色を分ける例。

input{
	background:#cfc; /* 背景色・うすい緑 */
	}
input:disabled{
	background:#ccc; /* 背景色・灰色 */
	}

>>サンプルページを確認

※有効中のinput要素ってわざわざ「:enabled」つけなくても普通にinputにスタイル付けるのと上の場合は同じなのでそのようにしてます。

E:checked (E:indeterminate) (UI要素の状態擬似クラス)

意味

チェックされているか、またはチェックされていない状態の利用者インタフェース要素E(例えばラジオボタンやチェックボックス)に一致する

最初に定義されたCSS水準

CSS3

補足

翻訳版では型の部分に「E:checked」と並んで「E:indeterminate」というのもあるのですが、現時点での英語の最新版には今のところ書いてありませんでした。その代わり、

6.6.4.3. The :indeterminate pseudo-class
Note: Radio and checkbox elements can be toggled by the user, but are sometimes in an indeterminate state, neither checked nor unchecked. This can be due to an element attribute, or DOM manipulation.
A future version of this specification may introduce an :indeterminate pseudo-class that applies to such elements.

そういう不確定状態の要素として将来的に「E:indeterminate」はまた復活するのかも。（英語力ないので勘違いしてたら恥ずかしいのですが）

使い方・使い道について

チェックボックスやラジオボタンがチェックされた状態のときにラベル部分に背景色をつける例。

input:checked + label {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

E::first-line (:first- line擬似要素)

意味

E要素の最初にフォーマットされる行に一致する

最初に定義されたCSS水準

CSS1

指定した要素のテキストの1行目に適応される。「1行目」というのは幅やフォントサイズによって可変する。ブロック要素にのみ適応される。

使用できるプロパティは以下の13種類。（font関連 / color / background関連 / text-decoration / vertical-align(floatがnoneのときのみ) / text-transform / line-height / margin関連 / padding関連 / border関連 / float / text-shadow / clear）

使い方・使い道について

一行目だけスタイルを適応させる例。

p::first-line {
	color:#900;
	font-size:1.2em;
	font-weight:bold;
	}

>>サンプルページを確認

E::first-letter (:first- letter擬似要素)

意味

E要素の最初にフォーマットされる文字に一致する

最初に定義されたCSS水準

CSS1

指定した要素の1文字目のテキストに対してスタイルを適応させる際に使用する。細かい使用ルールは以下の通り。

• ブロック要素, list-item, table-cell, table-caption, inline-block要素にのみ適応される。
• この「E::first-letter」は「E::first-line」に含まれるため、併用している場合は「E::first-line」のスタイルを継承する。
• 「E::first-letter」と「E::first-line」で同じプロパティを指定している場合(競合している場合)は「E::first-letter」の指定が優先される。
• 1文字目に引用符やカギ括弧等の文字(Unicodeで"開き"(Ps)、"閉じ"(Pe)及び"その他"(Po)に分類されている文字)が指定されている場合は次の文字と合わせて適応対象となる。但し、言語によって特殊な規則があるものもあるので、その辺りは言語によって異なる。
• 指定できるプロパティは以下の13種類（font関連 / color / background関連 / text-decoration / vertical-align(floatがnoneのときのみ) / text-transform / line-height / margin関連 / padding関連 / border関連 / float / text-shadow / clear）

使い方・使い道について

ドロップキャップ、イニシャルキャップとしての使い方しか思い浮かばないのでその書き方。

p::first-letter {
	float:left;
	background:#ffc;
	color:#900;
	font-size:3.8em;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-weight:bold;
	padding:6px;
	border:1px solid #900;
	margin:2px 5px 0 0;
	}

>>サンプルページを確認

E::before (:before擬似要素)

意味

E要素の前に生成される内容に一致する

最初に定義されたCSS水準

CSS2

要素の前にcontentプロパティで生成する内容にスタイルを適応させる擬似要素。「::first-letter」「::first-line」擬似要素が「::before」と組み合わせられると、挿入されたテキストを含んでいる要素の最初の文字または行に適用される。

使い方・使い道について

p要素の前に「Note:」という文字列を挿入しその部分に背景色をつける例。

#sample1 p::before{
	content: "Note: ";
	background:#fcc; /* 背景色・ピンク */
	}

p要素の前にアイコンを挿入する例。

#sample2 p::before{
	content:url(hoge.png);
	}

挿入した画像をブロックにしてテキストを下に回り込ませる例。

#sample3 p::before {
	display:block;
	content:url("hoge.png");
	}

>>サンプルページを確認

「::before」で挿入された部分は画像を使用した場合でも、印刷時にブラウザ側で背景画像を印刷しない設定になっていてもちゃんと印刷対象となる。印刷時のロゴの扱いとかで便利かも。この擬似要素が普段使いでブラウザ気にせず使えるようになったらスゲー使い道ありますね。当分は同じ事をJSにお願いしなくてはならなさそうですが。

その他、こちらの使用例も素敵だなーと思いました。

:before 疑似要素を使ってテキストを画像に置換 - lucky bag
hxxk.jp - :before 擬似要素 / :after 擬似要素の活用例

E::after (:after擬似要素)

意味

E要素の後に生成される内容に一致する

最初に定義されたCSS水準

CSS2

「E::before」の逆。こちらは要素の後にcontentプロパティで内容を生成しスタイルを適応させる擬似要素。「::first-letter」「::first-line」擬似要素が「::after」と組み合わせられると、挿入されたテキストを含んでいる要素の最初の文字または行に適用される。

使い方・使い道について

訪問済みリンクテキストの右側にアイコンをつけて分かりやすくする例。

#sample1 a:visited::after {
	content:url("hoge.png");
	}

>>サンプルページを確認

擬似要素全般に関する備考

CSS3では擬似要素と擬似クラスを区別するために擬似要素は「：」を2つ重ねて記述するように変更されているそうです。このエントリの上記擬似要素部分やサンプルページもそのCSS3の書き方で書いています。モダンブラウザ（IEは8以上）ではその記述に対応しているので意図した描写がされます。CSS2.1の記述としてはValidにはなりません。

E.warning (クラス選択子)

意味

クラスが"warning"であるE要素(その文書言語はクラスが決定される方法を指定する)に一致する

最初に定義されたCSS水準

CSS1

使い方・使い道について

これはCSS修行の第一歩で習得する話なのでサラっと流しますね。「class="test"」を持つ要素を太字にする書き方。

.test { font-weight:bold; }

E#myid (ID選択子)

意味

IDが"myid"と等しいE要素に一致する

最初に定義されたCSS水準

CSS1

使い方・使い道について

これもCSS修行の第一歩で習得する話なのでサラっと流しますね。「id ="test"」を持つ要素を太字にする書き方。

#test { font-weight:bold; }

E:not(s) (打消しの擬似クラス)

意味

単純選択子sに一致しないE要素に一致する

最初に定義されたCSS水準

CSS3

「E:not(s)」なら、E という要素の中で s でないのものにマッチする。引数は単純選択子（型選択子・汎用選択子・属性選択子・ID選択子・クラス選択子・擬似クラス）

使い方・使い道について

同じような要素が並んでて「この要素のこういう内容以外のもの！」って言うのをピンポイントで指定するのに便利そう。今までわざわざ例外のスタイルを指定したい要素に対してclassやid振ってたものも、これを使えばそういうの回避できるんじゃないかな、と。

最初と最後以外のp要素に背景色をつける例。

#sample1 p:not(:first-of-type):not(:last-of-type) {
	background:#fcc; /* 背景色・ピンク */
	}

class属性の指定されていないp要素だけ背景色をつける例。

#sample2 p:not([class]) {
	background:#cfc; /* 背景色・うすい緑 */
	}

class属性を持っているp要素の中で値が「.sample」ではないp要素だけ背景色をつける例。

#sample3 p[class]:not([class="sample"]) {
	background:#fc6; /* 背景色・オレンジ */		
	}

>>サンプルページを確認

E F (子孫結合子)

意味

E要素の子孫であるF要素に一致する

最初に定義されたCSS水準

CSS1

使い方・使い道について

親要素「E」に含まれるすべての子孫要素「F」に適用される。「子孫セレクタ」とも呼ばれている。これもCSS修行の初期段階でマスターするものなのでサラっと。p要素中のstrong要素を赤字にする書き方。

p strong { color:#f00; }

E > F (子結合子)

意味

E要素の子であるF要素に一致する

最初に定義されたCSS水準

CSS2

親要素「E」の直接の子要素「F」に適用される。「子セレクタ・子供セレクタ」とも呼ばれている。

使い方・使い道について

「E F (子孫結合子)」との違いは「E F (子孫結合子)」が子孫要素すべてにスタイルが適応されるのに対して、こちらの「E > F (子結合子)」は直接の子にのみ適応される。一応そのサンプルページ置いておきます。

>>サンプルページを確認

また、この「E > F」はIE6が対応していない事を逆に利用して、IE6を除外するためのCSSハック（この場合は厳密にはハックとは言わないのだけれども）的な使い方をする事もあります。

E + F (直接隣接結合子)

意味

E要素の直後に来るF要素に一致する

最初に定義されたCSS水準

CSS2

同じ親要素の中の兄弟関係の要素に対して、兄要素「E」の直後(隣接している)の弟要素「F」に適用される。「隣接セレクタ」とも呼ばれている。要素と要素の間に別の要素が挟まっている場合はマッチしない。

使い方・使い道について

コンテンツ内のp要素にはマージンが予め指定してあるのだけれども、見出し要素の次に出てくるp要素のみ上マージンを多めに取りたいっていう時はこんな風にします。h4要素の直後にp要素が出現する場合だけマージンを変更する例。

p{
	margin:3px auto;
	}	
#sample1 h4 + p {
	margin:12px auto 3px;
	}

また、兄要素の直後の弟要素に対しては次の別の要素が出現するまでマッチし続けます。兄弟の弟が続く場合は別の要素が入って途切れるまでマッチする例。(下記のCSSソースだけ見ても意味不明ですが、よかったらサンプルページの方を見て下さい)

#sample2 p + p {
	background:#fcc; /* 背景色・ピンク */
	}

あと、これは強引な例かもしれませんが・・・。たまにこういうレイアウトを組むときがあるんですが、htmlにclassやid振らなくてもこういうことできるよっていう例です。
1つ目のli要素だけ幅100%、残りのli要素は2カラムにする例。

#sample3 li {
	width:790px;
	height:50px;
	background:#cfc; /* 背景色・うすい緑 */
	border:1px solid #000;
	margin:5px;
	}
#sample3 li + li {
	width:388px;
	float:left;
	display:inline;
	background:#fc6; /* 背景色・オレンジ */
	}

>>サンプルページを確認

E ~ F (間接隣接結合子)

意味

E要素の後に来るF要素に一致する

最初に定義されたCSS水準

CSS3

フォントの関係で「～」に見えるかもしれないですが、「~ (チルダ)」です。同じ親要素の中の兄弟関係の要素に対して、兄要素「E」の後の弟要素「F」に適用されます。「E + F」との違いは直後（隣接）にFがあるのか、後（隣接してなくてもいい）にFがあるのか。「E + F」は直後にFがある場合にマッチするが、こちらの「E ~ F 」は「直」後でなくても同じ親要素の中に存在する限り「後」にあればマッチする。「間接セレクタ」とも呼ばれている。

使い方・使い道について

#sample1の中で、2つ目以降のh4要素にだけ上マージンを指定する例。

h4 {
	color:#fff;
	background:#900;
	margin:0 auto;
	}
#sample1 h4 ~ h4 {
	margin:30px auto 0;
	}

「E + F」のところで強引にやったネタ、こちらの「E ~ F」でも同じことできますね。なんせこの2つは兄弟関係にある要素に対してうまい事使えば、htmlソース内のclassやidをかなり使わずに済むようにしてくれる素晴らしい人達だと思います。

>>サンプルページを確認

その他の備考

「E:contains("foo") (内容擬似クラス)」と「E::selection (UI要素の断片擬似要素)」は翻訳版にはあったのですが、最新版の方ではThis section intentionally left blank.(This section previously defined a ●●)となってたので、現時点ではなくなってるみたいなのでスルーしました。

CSSセレクターコードヒント修正 - dwlog.net
（「 [ 」 を入れたら属性セレクタが出てくるようになったバージョン）

が、しかし、今度は「：」を押しても反応がなくなったので作者さんのブログにコメント送ってみたところなう。(2010.04.04 10:58)

2010.04.04 12:19 さらに追記　自己解決
上に書いた「：」を入れても反応しないの件、Configuration/CodeHints/css_selector.xmlの50行目辺りに<menu pattern=":" DOCTYPES="CSS">に対する閉じタグ</menu>を追加したらちゃんと反応してくれました(n' ω 'n)

追記ここまで。以下が元の本文です。

先日までDreamweaverのコードヒントはこちらの「Dreamweaver スペシャルコードヒント」を利用させて頂いてたんですが、下記のエントリを発見して、種類増えてる！すごいじゃん！と勢いで入れてみました。

CSSセレクターをDreamweaverのコードヒントで出せるようになりました。 - dwlog.net

CSS3で定義されたセレクタに対応しているという点にすごく惹かれたのですよ。上記ページにて、mxp形式のファイルがダウンロードできるので、インストールも楽々でした。

こんな感じ。いい感じ。

「：」を入れると、CSS3で追加になったセレクタもドーンといっぱい出てくる。わーい。

あと、個人的には属性セレクタ書くのがめんどくさいなーと感じてたので、同じく「：」を入れるだけでパパっと出てくるのがとても助かります。

「：」押してキーボードの「↑」をポチっと押すと（選択肢の一番下へ移動ってこと）属性セレクタの選択がズラーと。

ここで素朴な疑問

2010.04.04追記
以下の内容については作者さんがすでに修正してくださってます(∩´∀｀)∩

これって「：」で属性セレクタ呼んだ後、「：」は自分で消してるんですが、みんなそうなるんやんね？私だけが「：」が残るとか、他の人は「 [ 」を押したら属性セレクタ出てくるのに私だけそれが出ないとか、そういう不運に見舞われてるわけじゃないやんね？？

スニペットもあったよ！

あと、こちらのサイトの方はそのコードヒントを作成される前にセレクタを全部スニペットにもまとめてらっしゃって・・・。セレクタ愛ですね。

CSSセレクターをDreamweaverのスニペットにまとめました。 - dwlog.net

実は最初こっちをインストールしてたんですが、こちらもこちらで便利なのでオススメです。使い分け用に。

CSS3で追加になったセレクタ

CSS3で追加になったセレクタについてはまーしーさんのこちらのエントリが分かりやすかったです。

CSS3で追加になったセレクタを改めて見直してみる｜linker journal｜linker

あと、一応当サイトのこのページでも擬似クラスと擬似要素のまとめみたいなの書いたのでよかったら…。表の部分の備考に「これとこれは同じ」という事も書いてるので、「なんか種類多いけど重複してね？」とかの確認はできると思いますです。

CSS関連　雑記

IE三兄弟にモヤモヤしてた。

検証ブラウザにIE8を含まなくちゃならなくなってから、IE6.7.8のIE三兄弟の対応にイライラすることも多々。「MSブラウザ、1つ増えたら1つ消えろや」と声を大にして言いたい。兄弟みんなが微妙に違うっていうケースにも遭遇してハックで凌いでみたり。よくないよね。メンテナンス性悪いなー、汚いなー、そもそもそうしなくちゃならないのって根本的にデザイン or 組み方がおかしいからだろー、とか自分で思いながらもそうせざるを得ない状況で悔し涙を流したり。そんでもってもうIE9の話とか出てきてるし。

IE8、ガッタンゴットンスパイラル

これはだいぶ前の話だけど、IE8で思い出した。昔作ったサイトをIE8で見直したらhover時に周りの要素がガッタンゴットン動くという気持ち悪い症状が出てきたん。
Hirasawaさんがいなかったら即死だった。

IE8バグ？：a要素内に画像があってa要素に背景を指定した時に位置がずれる｜CSS HappyLife

上記ページのようなリストマーカーの表示が消えるという症状ではなかったんですが、a要素の中にimg要素があって、a要素にbackgroundプロパティの指定がしてある状態で、該当画像の上でhover状態にすると周りの画像がガッタンゴットンと上下にズレてしまうという…なんよコレｗｗｗｗみたいな状況になってしまって。

そりゃね、画像が他ブラウザと比べて数ピクセルずれてるくらいならスルーでいいと思うんですよ。が、如何せんガッタンゴットンするのは「仕様です」で済まないので上記ページの解説通り、display: inline-block; を追加することで回避。いやー、助かりました。ありがとうございました。

大切な事なのでもう一度言いますね。

「Hirasawaさんがいなかったら即死だった」＝「a要素の中にimg要素があって、a要素にbackgroundプロパティの指定がしてある状態でIE8だけ変」＝「display: inline-block;」

物事を連想させて記憶するのって大切ですＮｅ！

PHP関連　雑記

最近ついにcakePHPに手を出しました。

「今PHPのフレームワークやるならcakePHPだよ！」と言われ続けて早数ヶ月。実はずーっと前に一回手元でチュートリアルに沿ってブログを作ったことはあるんだけど、その後どうしよ？という段階で終わってたん。もうちょっと自分でなんやかんやできるように頑張る。今は「ヘルパースゲーーーーーーーｗｗｗｗ」ってなってるとこ。便利ですね。いや、まぁ大事なのはそこじゃないんだけれども。

こういうの手にとって見て、一通りチュートリアルが終わった後に「デザインをカスタマイズするにはどこをいじればいんかな」と、まずその確認から始めてしまうのは悲しいデザイナのＳＡＧＡなのでしょうね。デザインカスタマイズができるかできないかで安心度が違うというかなんというか。

cakePHPはネット上にいろいろ情報があって素敵。難しそうなのは相変わらずスルーしてますが、自分レベルでも学べる事がたくさんある。先人様、ありがとう。

が、如何せん、「何がしたい」とか「これ作りたい」とかいう目的が的確に浮かばず、先人の真似してるだけっていう状態。いずれその壁を越えてみせるぜ。相手がPHPなら人間じゃないんだ、僕だって！

cakePHP・・・ついでにDreamweaverの設定も。

PHPやるならEclipseのPDT使うといいですよ、と前にコメント頂いてて、とりあえず環境の用意はしたんですが、なんとなく使い慣れたDWを使っちゃうというか、多分それで事足りる内容しかやってないからだと思うんですが、相変わらずDreamweaverでやってます。

cakePHPのview用ファイルって拡張子がデフォのままだと.ctpじゃないですか。なので、そのままだとDWで開くのがめんどくさい。とりあえず「編集」>「環境設定」>「ファイルタイプ」で.ctpをコードビューで開くファイルとして設定したものの、コードのカラーリングが適応されないので見難い。ということで…。

DreamweaverでCakePHPの.ctpファイルを色づけして表示する方法/Dreamweaver - サイブリッジラボ

上記ページで説明されてる通りに設定。これでctpファイルも見易くなりました。ついでにまだ試してないんですが、viewファイルの拡張子をctp以外にすることも可能なんだって。

ctp以外の拡張子ファイルをviewファイルとして扱う - cakephperの日記(cakePHP1.2ベース)

いろいろ出来るんですなぁ…。

セキュリティとか気になって…

セキュリティ関連の話はとても気になってるんです。どうせいつかは考えなきゃならない問題なら早いうちに分かっておきたいと思ってこの本買ってみました。

PHPサイバーテロの技法―攻撃と防御の実際

まだ48ページまでしか読んでないんですが、知らない事大杉。とにかく最後まで読んでみて自分に出来ることはちゃんとしたい。ちゃんとする。これ全部理解したらブクマでつっこみ入れられるレベルになれるかなぁ。そういうのちょっと憧れてる。

画像のサムネイルを表示するライブラリ使ってみた

画像のアップロード → 確認画面でアップロードした画像をサムネイルにしてプレビューしたいっていうのがやりたかったこと。その中でサムネイルを効率よく作る方法で迷ってたら「phpThumbnailer」っていうライブラリを発見。

PHPで画像のサムネイルを超簡単に作る方法「phpThumbnailer」:phpspot開発日誌

PHP+GDな画像のサムネイル作成って結構面倒だったりしますが、配布されているThumbnail クラスを使えば超簡単にサムネイルが作れます。と書かれていたので「マジかよ!」と思って試したらガチで簡単だったので感動しました。

とりあえず、まずはファイルをダウンロードする。

Index of /projects/phpThumbnailer

ダウンロードしたファイルを開くといろいろとサンプルが同梱されてて、ソースを見ると本当にシンプルで「これなら私でも簡単にできるんじゃないか」とテンションが上がった。ただ、同梱されてるサンプルページをプレビューした瞬間、なんかホラーな事が起こったかと焦った。本気で一瞬焦った。何を言ってるのか分からねーと思うが、とにかく焦ったわ。

使い方は「class.Thumbnail.php」を読み込んで、あとは元画像、最大幅、最大高さ、パーセントの引数を指定してオブジェクトを作るだけというシンプルさ。これなら私レベルでも手軽に使える。助かるー。