RedLine Magazine

Fireworks 拡張アレコレ追加メモ

Sat, 28 Aug 2010 15:53:55 +0900

Fireworks用にいろんなサイトで配布されているスタイルやパターンなどなど、いろんな素敵なものを追加するためのメモです。自分で作ったものを登録しておく方法の説明は今回は省略してます。

各素材等は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 コレ、5分で作ります。その２

Wed, 02 Jun 2010 11:25:07 +0900

※このエントリはFireworks CS4を元に書いています。

前回はペンツールでパスを書いてなんやかんやしたんですが、今回は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 コレ、5分で作ります。その１

Tue, 01 Jun 2010 11:44:23 +0900

※このエントリはFireworks CS4を元に書いています。

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 ちょいネタ集

Sun, 30 May 2010 13:33:46 +0900

※このエントリはFireworks CS4を元に書いています。
バージョン違いの場合は内容が異なるかもしれません。

大好きな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 + ] 」

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

ブラウザ(Win) CSSセレクタ対応状況まとめ（2010年5月14日版）

Fri, 14 May 2010 10:02:34 +0900

下記サイトのセレクタテストで調べた結果です。調べた日は2010年5月14日です。（以後バージョンアップで対応状況は変化すると思います）

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版でのチェックです。

CSS セレクタ総復習（2010年5月版）

Mon, 10 May 2010 13:59:15 +0900

CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。

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 ●●)となってたので、現時点ではなくなってるみたいなのでスルーしました。

DW用 CSS3対応セレクタコードヒント

Sat, 03 Apr 2010 21:33:11 +0900

2010.04.04追記
このエントリ書いて寝て起きたら修正版が出てた！仕事速い！このエントリの下の方で属性セレクタがなんたらかんたら…と書いてる部分に対して、修正してくださってます。

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,PHP雑記の巻。

Sat, 03 Apr 2010 21:11:14 +0900

しばらく更新を怠ってたので、なんか書こうかなーと。
最近のもろもろ。雑記。日記。チラシの裏とも言う。

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

Firefox　検索バーに好きなの追加

Fri, 26 Feb 2010 20:32:33 +0900

Firefoxの検索バーから直接PHPのマニュアルを検索できるプラグインを発見したので勢いで入れてみました。

sks - PHPマニュアル検索プラグイン

チョーー便利！知りたい関数でググっても常にマニュアルが検索結果の一番上にきてくれるわけではないので、これはマジで便利です。ハッピー。

検索バーが気になって、便利なものを探してたらこういうのがあった！！

Add to Search Bar :: Add-ons for Firefox

このアドオンを入れておくと、「検索」があるサイトのフォーム内で右クリックすると･･･簡単にFirefoxの検索バーに追加できてしまうというすぐれもの。

例えばこのサイトの右上の検索ボックスの部分で右クリックすると･･･
マジで簡単に追加でけた！

これで自分が過去に書いたエントリを探すのも、わざわざサイトを表示してから検索ボックスを利用するっていう手順をふまなくても気になったらスグにちゃちゃっとサイト内検索が利用できますね。

となると、よく見てる技術系ブログとかで、ブログ内検索を置いてるところとか追加してれば「このCSSバグ、前にあの人のブログで見たことある！」と思った瞬間にその人のブログ内検索をパパパーとできちゃったりするんですね。おーおー。すげーな。バグ等に遭遇したとき、対処方法とか覚えてなくても「この症状、あの人のブログでなんか見たことあるぞ」という記憶だけは結構残ってたりするので、いいな、これ。あとは自分はよく使うショッピングサイトとかTSUTAYA DISCAS（映画好きで利用しているのです）とか追加しました。あとでリファレンス系でいいとこないか探そう。

グーグル先生で事足りるといえばそうなんですが、これで少し効率がよくなりそう。つーか、なんでこんな便利なアドオン、今まで入れてなかったんだろう･･･。きっと有名だよね。

PHP修行 MVC復習/改善の巻

Tue, 23 Feb 2010 11:47:37 +0900

この前書いた「PHP宿題　MVC の勉強」のエントリのコメントでたくさんアドバイス頂いて、いろいろ改善してだいぶマシになったっぽいので復習日誌。

まず元々のMVCとか関係ないソース

MVCを意識しないでダダダーと書いた元々のソースはこんな感じ。（前回のエントリと同じ内容だけど、名前を入力して送信ボタンを押すと「○○さん、こんにちわ。」という文が表示されるだけの内容）

んで、これをMVCを意識して書き直したものを「PHP宿題　MVC の勉強」に書いたのですが、それに対しての改善案をいろいろ頂いたのです。

改善・第一弾

「おしい！MVCのとこもクラスだったらよかた^^」と言われたのでこんな感じにしてみました。

改善した点

モデル部分はクラスを使う！
それに伴ってコントローラー部分も変更する

改善・第二段

上の改善第一弾に対して更に以下のアドバイスを頂いたのでやってみました。

改善した点

クラスのプロパティはprivateにしてsetter/getterの仕組みを利用
Helloモデル中でhtmlspecialchars()やPタグを使ってるが、これはviewに任せるべき。
1クラス1ファイルにしてクラス名とファイル名を一致させるとよい。

改善した理由

setter/getterの仕組みや使う理由についてはこちら。
ちょっと疑問に思ったけど、今回の内容のみで完結するような場合は（後で機能追加とか絶対ない場合）ここのgetName()は外から直接は使わないから書かなくてもいいんかなって思いました。それとも慣習的にsetNameおくならgetNameも必ずセットにして書いておくもの･･･？ま、ビビリなので確実に毎回セットにしてしまいそうな自分なのですが。あーでもオブジェクト指向という考え方自体が「後からでも手を入れやすい」とか「再利用しやすい」という考えを前提でやってるから必ずセットで入れておいた方がいいのか。

モデル内でhtmlspecialchars()やPを使わない理由は後で表示のみ変更したいのにロジックを弄らなければならなくなるから、とのこと。

そういえばSmartyでもテンプレート側でデザイナ(というかページの見た目担当の人)が{$hoge|escape}とか入れるのは同じ理由ってことですよね。となると、Smartyで修飾子つけて値を加工してるような部分ってのは全部Viewに任せちゃえばいいってことなんかな。そう考えると私的には役割分担がすごく分かりやすかったりするのだけれども･･･。

1クラス1ファイルにしてクラス名とファイル名を一致させるとよい理由は、ソースが見やすくなるのと__autoload()関数なんかが使えて便利だからとのこと。

クラスのオートローディング

確かに使ってみて「おおおおーー便利!」と実感しました。スゲーな。

もっとちゃんと考えること　変数の命名規則

同コメント内にて、「後は変数の命名規則に気をつけるとよいです。$Helloという変数名は違和感があります^^;」というお話も頂きました。んで参考サイトもお教え頂いた。

変数名はどう付けよう？ - ホリデープログラミング入門 - Yahoo!ブログ

よく使われる変数名やPEAR、Zendの命名規則の説明が書かれてた。メモメモ。なんかそれぞれに似てる部分と異なる部分があるのね。無難なの考えねば。とりあえず私もcamelCapsでこれから変数名は書いてみます。んでもってクラス名はUpper Camel、と。なんせちゃんと自分でルール決めて統一していけるように頑張ります。つーか、その前に英単語の勉強した方がいい気も･･･汗。

知らない事いっぱい。でもすっごく楽しいですｗｗｗｗ
いろいろとアドバイスくださった方々、ホントにありがとうございます！

PHP修行「setter/getter」を知るの巻

Wed, 17 Feb 2010 00:39:55 +0900

2010.02.17追記　PHPでは「カプセル化」でググる
2010.02.17追記　オブジェクト、getter/setterについての解説

この前書いたMVC勉強のコメントにて添削をして頂いてる最中なのですが、その中でまたもや新たなキーワードが出てきまして･･･。添削して頂いてる最中ですが、分からないコトが出てきたので、先にそっちの勉強して出直してきます。先生、すみません。しばしお待ちを･･･。そんでもって、分からなかったのがこの一文。

setterで値セット、getterで値取り出し。setter,getterを使うことで複数人で開発時に"誰かが勝手なルールで"$nameの値を変更してしまうことを防げる。

ちょっと待って。「setter」「getter」は初耳。教えて！google先生(n'∀')η

(n ▼ω▼ ) ＜ setter getter　とは - Google 検索

PHPのそれについて書かれているサイトがなかなか見当たらないのだけれども、とりあえず言語を問わず、「オブジェクト指向」に関するキーワードのようだ。多分。ここからはいろんなサイトで情報をあさりつつ、足りない頭をフル回転して自分なりに自問自答、解釈した内容。間違ってたらツっこみお願いします＞＜

「setter/getter」は何のために？

publicなプロパティは隠したい。これがことの始まり。
隠したいのはなぜ？→外から直接アクセスするのはよくないから。
なんで直接アクセスはダメなのか？→クラスのプロパティにクラスの外から直アクセスして値を書き換えるコト自体が基本的によくないの！
なんで？→そういうものなの！『複数人で開発時に誰かが勝手なルールでプロパティの値を変更してしまうことを防げる。』ってコメントで教えてもらっただろーがー！ああ、なるほど。
んじゃ直アクセスせずにどうしようか？→だから「setter」「getter」の仕組みを使うんだってば。
どゆこと？→プロパティに直アクセスするんじゃなくて、setメソッドを用意してプロパティの値をセット、getメソッドを用意してそれを返してあげる。

つまり、プロパティへ直接アクセスじゃなくて一旦メソッドを経由してプロパティをいじろうね、ということらしい。多分。

では、そのやり方は？

マニュアル探しまくったけど「setter」も「getter」もない。「set」も「get」ない。似た感じで怪しいのはあったんだけど→PHP: オーバーロード - Manual なんかコレが近い気がする。しかし「オーバーロードメソッドが起動するのは、宣言されていないプロパティやメソッドを操作しようとしたときです。」と書いてある。いや、私はプロパティを宣言している。従ってこれは関係ないと判断。が、「また、現在のスコープからはアクセス不能なプロパティやメソッドを操作しようとしたときにも起動します。」とも書いてある。わからん。一体何の話だ。これは日本語なのか？難しいよぉ･･･。とりあえず一旦スルー。

で、何？結局どうすればよいの？って一瞬ひるんだけど、私は諦めないっ。
「おう、私はred_hippy、あきらめの悪い女･･･」
これ便利ですよと教えてもらったジェネレータのURLへアクセス！

PHP Getter Setter Generator

なんか適当に下のExample Codeの変数の辺りをコピペして「Go」クリック！
何回かやってみたけど意味分からない。「一体何するものコレ？」状態。８回くらい「Go」をクリックしてからやっとピーン！と繋がったｗｗｗｗｗ
あぁ、自分でそれを用意するのですね。そのためのこのツールなのですね（恥

気付くの遅くてごめんなさい。愚かな私でごめんなさい。自分の脳内ではそれらは勝手にPHP側で用意してくれてる関数か何かの中に「set」とか「get」とかあってそれを利用するんじゃないかと思い込んでました。全然違ってました。ごめんなさい。自分で用意するのですよ、皆さん。ピーンときたと同時に、このジェネレーターツールが便利というその意味も分かりました。確かにコレ使ったほうが早い。便利だー！

こういうのを自分で用意すればよい、と。

「setter」「getter」を使う理由

「setter」「getter」を利用すれば、複数人で作業をする際にも他の人間が勝手に予想外の値を入れたりして「アーーー！」ってなるのを防げる。
「setter」「getter」を利用していれば、それらの内容が変わっても呼び出す側には影響しない。

こんなページも発見。

>>» オブジェクト指向プログラムで getter/setterメソッドを使わなければならない 10の理由 Pattern: Pattern Ref　—自分用覚書

書いてある事の半分も分からないけれども一番最後の理由が超分かりやすい。

オブジェクト指向とはそういうものである。

うおー。なんか超カッケー。そういうものなのですよ、きっと。

疑問に思ったこと/ググっても分からなかったこと

PHPはsetterで値のチェックはできないの？

PHPに拘らずサイト巡りをしていると、setterで値の型をチェックできるという風な話が出ていたのだけれど（数値を入れる変数に文字は入れない様にできるとか）それはPHPではどう書けばいいのだろう？全然見当違いな話なのでしょうか･･･はて？

↑自前でチェックコードを記述すればいいだけの話だった。なんか特殊な型を調べる書き方とかあるのかと勝手に思い込んでた＞＜

なんでPHPではsetter,getterを使わないの？

もう一度頂いたコメントを読み返してみると『※PHPではsetter,getterがない例も多い。』と。それはなぜ？まぁPHPだからとか言語に拘って考えるのが違ってるのかもしれない。オブジェクト指向だからこういうsetter,getterという考え方をするも良いという話なのかもしれない。そういうことにする。

↑コメントにて「PHPはスクリプト言語なのでgetter,setterを使うとコードが冗長になって速度面などで不利になるからかなぁなんて思ったり。あとはcakePHPなどのフレームワークを使うとgetter,setterなんかは見えないのでみんな気にしてないんじゃないかな^^;」という意見を頂いた。

PHP5では、set/get がある！

追記：すみません。違ってましたｗ　以下すっげー変なコト書いてます。
ここから下はちょっと間違ってる内容のようです。再びMVCのページのコメントで「未定義のプロパティを取得・設定しようとしたタイミングで呼び出されるメソッドなので、getter,setterとはちょっと違いますね。」と教えていただきました。この部分、全部削除してしまおうかとも思ったんですが、短時間でも一度公開してしまったので、一応そのまま残しておきます。勉強記録的な感じで･･･。が、スルー推奨。

三度追記･･･いや、「間違い」ではなかったみたい。頂いたコメントより抜粋。コメント「__get,__setはgetter,setterとしても使えるので「間違い」ではないです。下のPHP公式マニュアルのオーバーロードの例ではsetter,getterとして使用してます。
オーバーロード」
開発のスタイルにあったものを選択すると良いらしい。

で、上で書いたPHP: オーバーロード - Manualについて悶々としてると、ナイスタイミングできのこ先生から追加コメントｷﾀ━━━━(°Д°)━━━━!!!!

PHP5からは__set,__getというマジックメソッドがありますね。プロパティをprivateで宣言すれば、このマジックメソッドが自動で実行されるらしい。自分のルールでset,getしたい場合はこれらのメソッドをオーバーロードすればよいです。

先生、ホントにいいタイミングのコメントです。ネ申サンクス。どこかから私の今の様子を覗いているのではないかというくらいのタイミングでした。

ということで、私はPHP5を修行中なので、こちらの「__set」「__get」を利用するとよいのですね。

つーことで、ちと実験タイム

こんな感じで試してみました。

こうすることで、呼び出す側ではプロパティを直接呼び出してるような感じで実はメソッドを経由して呼び出してるっていう仕組みになるんですね。へぇーー。いやでも「ホントに分かった？」と聞かれるとsetter,getterを使う理由や意味は分かったけど、なんか変なことになってるんです。上に書いたソースがどこか間違っているのかもしれないんですが、何か適当に例えばこういうのを追加すると「$test->sample2 = "これはテスト２です。";echo $test->sample2;」それが普通に出てくるんです。頭が半分寝てて何かおかしなことをいってるのかもしれない。あれれ。クラスの中で定義してない変数ってこういう風にしたら出てくるんだっけ･･･。根本的にクラスの所から間違ってるかも･･･。ダメだ。寝てます。もう頭回ってない＞＜
明日もうちと練習します＞＜

関係ない話ですが、こういうの教えてもらう時に「○○するとよいです。」って言い切りの形で言ってもらえるとすごくありがたいですね。勇気100倍。100%勇気。眠たくなってきて変なテンションでごめんなさい。

2010.02.17追記　PHPでは「カプセル化」でググる

一夜明けて朝からTwitterで@kamiyamさんと@redsnow_さんからアドバイスを頂いた。んでもって「PHPだとこのあたり調べるといいかも」と新たなキーワード「カプセル化」という言葉を知った。聞いた事はあったけど、ちゃんと意味わかってなかった。

>>PHP カプセル化 - Google 検索

これはまさに昨日の夜戦ったsetter,getterの考え方なのでは！

>>php フレームワーク・オブジェクト指向入門: カプセル化
 >>「カプセル化」のアーカイブ | オブジェクト指向PHP

上の方のページのサンプルソースではこの考え方を利用するメリットがよく分かった。確かにそうしておくと仕様変更になった場合でも楽ですねー。

そしてもう一つ、お約束事みたいなのも書いてあった。「読み込み用のメソッド名は、getプロパティ名、書き込み用のメソッド名は、setプロパティ名」とするとよいのですね。（多分別にそうでなくてもいいのだけと思うけど、頭にgetやsetを付けると分かりやすいし一般的によく使われてるよという意味なのではないかと思う）

そして「こういった単純なゲット、セットだけをするメソッドをアクセサメソッドといいます。」と。getterメソッドとsetterメソッドの総称みたいなものをアクセサメソッドというってことでいいのかな。getterとかsetterの事をまとめてアクセサメソッドって言うよ、みたいな。

オブジェクト、getter/setterについての解説

@ukstudioさんさんがオブジェクト、getter/setterについての解説エントリを書いてくださいました。

UK STUDIO - PHPについて適当に

全然適当じゃない。むしろ理解度がかなりレベルアップした気がします。お忙しい中、わざわざありがとうございました！感謝します！

>例えばあるデータには数値だけ、文字列だけ入れたいというチェックもsetterでやることができる。

上の方で疑問に思ったことの部分に書いたけど、やっぱりそういうことできるんだ。~~やり方が分からない。後でもっとググってみます。~~自前でチェックコードを記述すればいいだけの話だった。なんか特殊な型を調べる書き方とかあるのかと勝手に思い込んでた＞＜

メンバ変数をこういう風にまとめたらいいよの例の部分、すごく納得でした。奥深そうでまだ完璧に分かってないけど、なんせ修正する際の手間減るような考え方も必要ってことですよね。なるべくシンプルな書き方をして再利用しやすくしておくってのも大事なのかなと思いました。

もっともっと知りたくなりました。ホントにありがとうございました！

素敵★ノンプログラマのためのPHP入門

Mon, 15 Feb 2010 10:05:33 +0900

この前「PHPを勉強する事についてデザイナが思う事。」っていうエントリを書いたのですが、たくさん見てくれてありがとうございますです。Twitterでも「何かあったら聞いてね」的なメッセージを頂けてとても幸せな気持ちになりました。ああいうの書くの恥ずかしかったけど公開してよかったｗ

どこからアクセスされているのか、リンク元を見るのが大好きなので、いろいろ見てたんですが、Twitter経由のアクセスがすげーーｗｗｗとか思ってました。Twitter恐るべしです。まじで。そんでもって、このつぶやきを発見したのですよ。

この記事で思いつきましたが、USTREAMでノンプログラマのためのPHPオンライン講座とか開催したら、参加してくれる人いるかな？＞http://redline.hippy.jp/lab/php/php_9.php

Followしている方ではなかったので、その場で「お願いします！してください！是非！」とは言わなかったのですが、もし実現したら絶対見たいなーと期待しまくりで待ってたらホントにしてくださった！行動早っ。動き早い人は尊敬しまくりです。自分もそういう人になりたい。素敵素敵素敵★

んで、そのUSTREAMがこちら。

vol.01 ノンプログラマのためのPHP入門, Recorded on 10/02/14 h2ospace on USTREAM. Technology

そうそうそうそう。ノンプログラマの向けのこういうのを待ってた！ありがたやーありがたやー！タイムリーでは参加できなかったのですが、録画、全力で見ました。朝からめっちゃ勉強になりました！

すごく分かりやすく初心者向けのお話をしてくださってます。専門用語も初心者にもわかりやすい例えを用いて説明してくださってて、とっつきやすいです。実際にソース内の一部の記号を実体参照に変換するツールを作ろうということで、画面を見ながら一緒に自分用のツールを作るという試みも。目の前で先生が一緒にエディタ使って説明してくれてる感じです。

プログラムは外国語を勉強するような感じ。
言葉だけはしっかり理解する。
俺ツールを作る。
叩かれて人は育つ。

ということで、ノンプログラマだけどプログラムに少しでも興味がある人は、是非見るべし！です。とりあえず動画の最後に「こんなツール作ってみたら？」というのがあったので、とりあえずそれを練習しまつ！課題があるのってありがたいですね。やる気出まくり。

そして、「Zen Coding」にもめっちゃ興味もちました(n'∀')η

PHPを勉強する事についてデザイナが思う事。

Thu, 11 Feb 2010 13:05:17 +0900

先日、こちらのエントリを拝見して･･･

デザイナーがwebサービスを10週間で作れるようになる方法。または私は如何にしてPHPを愛するようになったか。 - ウェブ狂の詩

なんかいいなぁ･･･って。PHPを今勉強している自分としては、こういうお話大好きです。

激しく同意→「デザイナーはphpを覚えると楽しいよ！」

自分はまだ何かwebサービスが作れるとか、そんな高度なレベルではない初心者ですけど、とりあえず今PHPの勉強するのがすごく楽しいです。

本業はデザインやコーディングがメインで、実務でPHPと言われれば他のプログラマさんが作ったシステムを設置・デザインをカスタマイズする程度。自分で1から何かを使って何か大きな事をするという機会にはまだ遭遇してないんですが（最近ちょこっとしたスクリプトは実務で自分で用意させてもらったりして、それはそれで感動しました）、とりあえず勉強するのはすごく楽しい。知らなかった事と中途半端だった知識がピーン（←ニュータイプの効果音）と連結する瞬間に遭遇した時とか「うひょーー」ってなります。

選択肢が増えたよ

以前は何かプログラムが必要ならば、プログラマさんにお願いするか、もしくはネットで配布されているものを探すか･･･。選択肢はそういう感じでした。自分で作るという道は考えもしませんでしたし。

環境によるとおもいますが、基本的にデザイナは、最初から誰かが作ってくれたプログラム一式をこう設置したら動作する、デザイン面はこうやって手を入れる、こう使えばこういう結果が出てくる。それだけ知ってればなんとかなっちゃうんです。プログラムを作ることは求められてないし、基本的な知識があればなお良いけどね、程度のレベルです。あまりテンションの上がる話ではないんですが、私のやってる規模の案件ではそんな感じです。

もちろん「一応この知識だけは勉強しておかなきゃ」という事は勉強しますが、レベルの高低に関わらず断片的な知識だけが増えていく感じなんです。例えば、MySQL使うモノがあるからとりあえずローカルに環境作らなきゃならないとか、接続方法知っておかなきゃならないとかphpMyAdmin使えなきゃならないとか何かエラーが出てるよ、こうすれば直るんだな、とか。別に自分でデータベース作って何かするわけではないのにそういう断片的な知識だけが増えていくんです。

それが、ちょこっとした内容のプログラムなら「自分で作れる」という選択肢が増えました。これはとても大きい。自分は代理店から請けてる仕事と個人として請けてる仕事があるんですが、代理店経由の方は向こう側にプログラマさんもいるし、いざとなったら何とでもなるんですが、今まで個人で請けてる案件が問題でした。

予算はないけどプログラムが必要だ、という状況がたまにあるんですが、予算ないと言われると今までの「自分で作る」選択肢がない時は全力で必要機能を満たしたフリーのスクリプトを探しまくらねばならんかったのです。これが意外と面倒だし大変。当然後から機能を増やしてとか言われても増やせないし。そうなるとまた探しなおしです。自分がプログラマだったらどれだけこの無駄な時間が省略できるだろうとか思ってました。

まだ自分は大した事はできないですが、少しずつできる事が増えてて、ちょこっとしたものなら自分で提供できるようになりました。楽になった。気持ち的に。会社勤務のデザイナさんはあまりこういう気持ちにはならないかもしれないですが、個人でやってるとデザイナ同士の横の繋がりはできてもプログラマさんとの横の繋がりがなかなか見つからなくて相談できる人もいなくてオロオロする瞬間があるんですね。どうしよっどうしよっ！ってなって、胃かキリキリするような。だから個人でやってるデザイナこそプログラムを勉強すると幸せになれるのでは、とか思ってます。

使い道はユーザーに提供する場面だけじゃなかった

自分が勉強しはじめるまでは、こういうのって外に公開するために勉強するものだっていう固定観念みたいなものにとらわれてました。だけどちょっと落ち着いて考えてみると、自分の作業を少し楽にするために使うこともできました。下記は以前PHPの勉強日記として書いたエントリなんですが、

全角数字⇔半角数字・全角カナ⇔半角カナ変換
 dat から１行ずつ抜き出して xml 書き出し
 画像にロゴ(ウォーターマーク)を入れる

こういうのって探せば専用のフリーソフトやwebサービスもあるとは思うんですが、自分でPHPを使って作ってみると好きにできるので･･･楽しいし手作業でやるよりなんぼか早いよっていうお話。外部に出して使うものでなくても、自分の手元での作業を少しでも楽にしちゃう使い方もできるんだなーと。

でも、神が身近にいません

上記サイトの方は身近な神がいらっしゃるそうですが、自分にはいません。以前は仕事を頂いてる代理店に私なんかにも優しくしてくれる神的な存在がいらっしゃったのですが、今はどこか遠い所へ転職されてしまいました。がーん。

身近にPHPのこと、気軽に質問できる人がいるのといないのでは随分差が出てくるのではないかとマジで思います。

今更聞けない、恥ずかしくてネットで聞けない

「多分これって初歩的な事だよね･･･ブログとかTwitterで誰かに聞けばもしかしたら教えてもらえるかもしれない。でも会った事のない誰かに聞くの失笑されそうで恥ずかしいわｗｗｗ」と思う瞬間が多々あります。こんな時、身近に神がいてくれたら･･･と思ふ。

まぁ、散々このブログでも初歩的な恥を晒しているので今更何を言ってるんだという感じもあるし、元々能力も知識もないのにカッコつけんなって話なんですが。

こういうレベルの質問ができる相手が欲しい

具体的に言うと、こういう質問がしてみたいです。

ソースの最後に「?>」をつけないってどういうこと？まじなの？
これセキュリティ的にＯＫでしょうか･･･？
結果としては問題なく動いてるけど、書き方はおかしくないですか？
などなど･･･

ググレカスで秒殺できる内容のしょーもない質問は自分で調べろやって話ですが、なんかこういう質問がサラっとできる神がいてくれたら幸せになれる気がするのです。

神がいたらモチベーションが保てる気がする

あと、技術的な事だけでなく、神がいるからモチベーションが保てるという意味でも存在感大きそうだなと思います。私去年からここのブログでPHPの勉強日記みたいなのを書きはじめたんですが、その前の数年間も勉強する→挫折する→もっかい1から勉強する→モチベーション下がって挫折→もっかい1から（ｒｙ･･･の繰り返しだったんですよ。

なんでわざわざ「もっかい1から」の手順になるのかといえば、「心機一転！」みたいな気持ちのしきりなおし的な意味でもあるんですが、理解したつもりで完全に理解してないから、なんでしょうねぇ･･･。

神がいたら「神に前いろいろ教えてもらったし、あーもっと勉強続けなきゃ！」「せっかく親切に教えてくれたんだから頑張って期待に応えたい！」とか、挫折しそうになっても、その人がいるから踏ん張れるみたいな状況になるかもしれない。

しかし、もし神が身近にいたとしても、私は神から何か教えてもらっても神にお返しできる能力がないや。神がHTMLとかCSSとか興味あるなら返せるかも、だけど。

そんなこんなで、神がいないので諦めて自分を追い込むためにブログで「そろそろPHPの勉強本気出す」宣言をしてからはなんとか今日まで続いてる。実務に時間とられて、なかなか勉強する時間が確保できない時期も去年後半はあったんですが、「もっかい1からやりなおし」はしてない。多分、ブログに書いた内容まではちゃんと身についてるんだと思う。だから継続して勉強できない時期があっても続きから続きから･･･でやれるようになった。これはなんか成長してる感じがして嬉しい。

テンション上げてくれてありがとう

私の勉強熱がまだ途切れてないその他の要因。みんなのお陰で続いてます。

ついったーで「勉強がんばってるね」って言ってくれてありがとうございます。
コメントやブクマでいろいろアドバイスしてくれてありがとうございます。
相方よ、「デザイナ・コーダーなのによくこんなに頑張ってるね」と言ってくれてありがとうございます。

頼む。定期的にそれ言ってくれ。ウソでもいいから言ってくれ。最近PHPの勉強日記書いてないなとふと思った方、気づいた時に言ってくれ。頼むっ。

デザイナの私が理解できなかったこと・間違ってたこと

これは私が馬鹿なだけって話かもしれませんし、すべてのデザイナさんがそういうレベルだと思っているわけでもないです。おそらくプログラマ脳の方からすると何いってんの？バカじゃね？って話だと思うんですけど、最初間違えてたなぁと今になって思う事です。

関数をある程度知った後、どうしていいのかわからない

私は、関数を組み合わせてロジックを用意するという考え方自体ができませんでした。他の人が書いたソースを見れば「それが何をしているのか」は理解できるんですよ。関数自体は調べながらでも何でも意味はなんとかなるので。でも自分で1から書けと言われると手順がまったく考えられない。分からない。できない。

だから参考書にそって勉強していっても何もできないまま。最終的に「何か作ってみよう」の章に書いてあるサンプルアプリもそこに見本があるからそのまま写せば動くし、やってる内容は調べながら理解はできるけど、自分では1から書けない。

とりあえず一通り本の通りに動かしてみた。「で？」という状態から抜け出せない日々が長かったです。実務で「これを作らなきゃならない」という目的があればもっと早くこの段階を乗り越えられたと思うんですよ。だけど如何せん、デザイナには「こういうプログラムを作れ」という指示はおりてきません。ここ、第一の壁でした。

作りたいものがないまま勉強してしまう

すごく漠然とした言い方なんですが、いくら関数の意味を知っても「何ができるのか」をまったく想像できなかったんです。「日付を取得するにはこれを使います→はい。サンプルソース試した→理解した。」「ファイルに書き込むのはこの関数です→はい。サンプルソース試した→理解した。」それでその後、何もしないままでした。何かを作りたいからその手段を知るために勉強するのではなくて、なんとなく勉強しなきゃならない気持ちになって読書してただけ、みたいな。

初心者向けの参考書って変数とは何かみたいな所から始まって、繰り返し処理とか条件分岐、関数の説明とか、そういう流れで進んでいって、最後の方の章には何か作ろう、という流れになってるんだけど、そこで高度すぎて挫折したり。

その中間をどうしていいのか分からなくて、それぞれの関数にサンプルソースは載ってるけど、その後「で？」っていう。「関数の勉強する→関数の意味理解した→終わり」になってたんですね。もったいない時間の使い方をしてました。

網羅しなくても全然大丈夫だった

それまでは無駄に関数ばっかり追いかけて、網羅しないといけないんじゃないかという錯覚に陥ってたんですが、そんなのは後から調べながらでも十分いけると分かりました。

CSSやHTMLと一緒である程度よく使うものってのは決まってて、それらは使用頻度が高いから何か自然と覚えられるし、一回自分で1から書いてみると、ふとした時に「あ、この処理、前にもやったことがある！」って自分がやった事を思い出すことが出来るんですね。んでコピペ、みたいな。

勉強方法を改めたら一歩進めた

いい加減に自分で1から書いてみようぜという気になった

去年、ブログで「PHP勉強、本気出す」宣言をしてからは「実際に何かを作る」という目的を先に用意して、どんな機能が必要か、それためにはどんな関数を使えばいいか、どういう手順で処理をしたらいいのかっていう事をちゃんと自分で考える勉強に変えました。

これ、当たり前の勉強方法ですよね。だけど、なぜか私はずっとこの勉強方法ができなかったんです。人のソース見て分かった気になって終わりじゃいけないと思ってるけど、その段階から先に進めなかったというか。面倒そうに思ってたのかな。必要に迫られてないから。

人のソースを真似するだけじゃなくて、一旦1から自分で書いて躓いたらマニュアルや他の人のソースを見て自分がやりたい事をやってる部分を探すっていう手順で勉強しはじめたらどんどん『何か』が分かってきた。その『何か』が分かってくるとどんどん楽しくなってきた。残念なことにその『何か』っていうのがうまく文章で説明できないのですが、『何か』というものがそこにはあるんです（ｷﾘｯ

そしてその段階になると逆引きリファレンスを読むのが楽しくて仕方なくなってきた。あーこの機能つけたいー！とかワクワクするようになってくる。

日本語で処理の道筋を考えた

私がまったく理解できなかった処理の道筋の立て方についての話ですが、最初からソースを書こうとしても私の頭のキャパオーバーで無理だったので、まずは関数とかそういうの一切無視で日本語で順番にどういうことをすればいいのか考える事にしました。例えばこういう感じ。

入力用フォームを作る。
受け取ったデータを変数に入れる。日付、ログ用ファイルも変数に。
フォームの送信ボタンが押されたら。
タイトルと本文の中身が入ってたらエスケープ。本文の改行文字はbrに変換。
それぞれの変数を配列にしてタブ区切りで結合する。
ログ用ファイルを開いてロック。
一行に結合してたデータをログ用ファイルに書き込む。
ロックを解除してログ用ファイルを閉じる。
表示のためにログ用ファイルを読み込んで配列に。
分解して変数に値をセットしてログ用ファイルの中身の数だけループ。

こういうのってプログラマさんは頭の中でパパーと整理しながら順序だててソースを書けるんだと思うんですが、私は最初まったくできませんでした。どんな処理が必要なのかなって紙に書き出して、順番はどうしたらいいかなって番号順に並べて･･･みたいなことやってました。

一通り日本語で流れを書いた後に、それぞれがどうやったら処理できるのか、必要な関数やらなんやらを先に調べて日本語で書いた手順をソースに変換してきました。そしたらなんとかなった。もしかしたら変なソースかもしれない。でもやりたいことはとりあえずできた。

もしもデザイナやコーダー業の方で私と同じように処理の手順を自分で考えられねーっていう同類の方がいらっしゃったら日本語でまず書いてみる方法、オススメします。素人の私がオススメしますって言ってもまったく説得力ないですけど、私は何回か日本語で全部手順考える方法を繰り返してるうちに、知らない間に1から手順を日本語で書かなくても頭の中でこういう手順でやればいいんじゃないかって「予想」していきなりソース書き始められるようになりました。

いや、もちろん日本語で書いても書かなくても私レベルではどこか何かの処理が抜けててうまくいかなくて後で「あーこれ入れなきゃ」っていうのを追加したりしてるんですが。まぁよかったら試してください。

余談･･･プログラマさんへ

不躾なお願いではありますが、デザイナに渡すデータの中に font とか b とか入れないでくれると嬉しいです。あ。あとHTMLの要素は大文字じゃなくて小文字だともっと嬉しいです。あ、あとbrは<br>じゃなくて<br />が好みのタイプです。

いや、もちろん言わんとすることは理解できるんですよ。エラー文だから赤字にしたいですよ、太字にしたいですよ、私も。ええ、わかりますとも。しかしながらですね、できたらそういうタグの代わりにclass="error"とか、何か、そういうのだと幸せなんだけどなぁとか思っちゃうんです。ええ、もちろんスタイルはあとでこっちで挿入でもOKですとも。

あ。確かに個々の仕様によりますよね。そうですよね。嫌ならまとめて置換すればって話ですよね。そうですよね。

直接やりとりできるプログラマさんに何かをお願いするときは、最初にそういう約束事を作ることもできるけど、よその業者さんのプログラムを購入する時とか、ふと上のような事を思ってしまいますっていうお話でした。

あ、いや、敵に回すつもりは毛頭ないです。ごめんなさい。動きゃーいいですよね。そうですよね。そうできない理由があるんですよね。わがまま言いました。生意気言いました。ごめんなさいごめんなさい。

PHP宿題　MVC の勉強

Sat, 06 Feb 2010 12:38:19 +0900

頂いた宿題勉強日誌。今日は「MVC」について。(MVC - Google 検索)
フレームワークを利用する前にきっちり理解しておくといい内容とのこと。

実は前にSmartyを使ったことがあって、デザインとロジックを分ける主旨についてはイメージできるのだけれど、MVCと言われると「C」の役割がいまいち分からない。（MとCの境目がイマイチ分からない）

MVCについて検索してるとフレームワークのお話に行き着く事が多くてなかなか初心者向けの簡単な説明が見つからないのだけれど、いろいろ調べた結果を自分なりに解釈すると、

表示担当がView
入力された内容についてModelに処理をお願いしたり、Viewに表示をお願いしたり、橋渡し的な役割をするのがController
データの処理がModel（こっちでは入力されたデータの受取とか処理後の結果を直接Viewに渡したりはしない）

という事でいいのかな。オススメして頂いた下記ページを参考にちゃんとやる！

>>PHPでMVC第1回：前編
 >>PHPでMVC第2回：後編(Modelの作成/DAOパターン)

･･･読んでる途中で何度も心が折れそうになったけど、頑張って最後まで読みました。こういう専門的なサイトで文字の圧力にくじけそうになった時はブラウザの文字サイズを少し大きくすると不思議と難易度が下がった気分になる傾向がある便利な性格なので、そんな錯覚に陥りながら、10%くらいは理解はできました。

が、やはりやってる内容が難しい。というか、多分字が多すぎて圧倒されてる。

初歩レベルでMVCの考え方、やってみます

ちょっと･･･その･･･あんまり難しい事できないので、私レベルでMVCの考え方だけ、やってみます。間違ってるかも知れんけど、とりあえず普通にこういうファイルがあるという前提で･･･。

単純に名前を入力して送信ボタンを押すと「○○さん、こんにちわ。」という文が表示されるだけの内容なんですが、これをMVC役割分担を考えてみますね。

あ。これは余談ですが、この前勉強したオブジェクト指向の件なんですが、↑上のような内容をclassを作って考えるとしたらコレで合ってますかね･･･。表示される内容自体は同じ結果になるし、変なとこがあっても初心者には分からないという罠。

んでは、本題に戻って･･･

Model部分

機能担当ファイル。
名前が入力されてたら、されてなかったら、それぞれの内容を返す機能。

View部分

デザイナ・コーダーさんが主に触るであろうファイル。テンプレート的な。

「<?=$Hello?>」の部分、{$Hello}みたいな分かりやすい書き方したい。（→だからテンプレートエンジンとかフレームワーク使えばいいよってこと？）途中で今回みたいな場合だと<?=$_SERVER["PHP_SELF"]?>はいらないって気付いたけどまぁ･･･そのまま。

Controller部分

入力データを受け取ってModelに処理をお願いして結果をViewに渡したりとか。

という感じでMVC役割分担を考えてみたのですが、考え方が間違ってたら教えてください＞＜

Thunderbird　「更新を確認」のエラー

Wed, 03 Feb 2010 10:11:18 +0900

メールソフトはThunderbirdを利用しているのですが、私の環境で、かなり前から自動更新が出来なくなってたんですね。「ヘルプ」>「ソフトウェアの更新を確認する」を選択しても『更新情報 XML ファイルが整形式になっていません（200）』っていうエラーが出てしまう状態。

そういうわけで、まぁ何かのファイルが壊れてるんだろーなーとか思いつつ、定期的にthunderbirdのサイトで新しいバージョンが出てないか確認したりして、もし新しいものがあればmozillaのサイトから最新版をダウンロードして上書きインストール･･･という手順でやってました。

さっき気が付いたら、3.0.1がリリースされてて「あー更新しなきゃ」と思ったんですが、そろそろいちいちサイトからダウンロードして･･･っていうのが面倒くさくなってきたのでエラー文でググってみると以下のページ発見。

>>更新情報 XML ファイルが整形式になっていません（200）

上記ページはFirefoxについて書かれてるものだし関係ないやろーとか思いつつも、一番上の「拡張機能による干渉」部分の「NoScriptを無効にする」っていう手順だけ何気なく実施。(無効っていうかmozilla.comを許可)

その後、thunderbird側で「ヘルプ」>「ソフトウェアの更新を確認する」を選択してみると･･･普通に更新できたよ。何それ。そんな単純な事だったのか。

ということで、めでたく楽々更新の日々を取り戻しました。

でも不思議。Firefoxの方は今までもずっと自動更新できてたんだけど･･･。なぜに？

RedLine Magazine

Fireworks 拡張アレコレ追加メモ

スタイルを追加する

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

パターンを追加する

テクスチャを追加する

コマンドを追加する

自動シェイプを追加する

パネルを追加する

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

国内サイト

海外サイト

Fireworks コレ、5分で作ります。その２

今回の完成形

土台を用意

長方形を用意

2つ目の長方形を用意

マスク！

仕上げの1px

Fireworks コレ、5分で作ります。その１

今回の完成形

土台を用意

パスを用意

カラー、不透明度の調整

マスク！

仕上げの1px

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

Fireworks ちょいネタ集

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

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

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

使い分けると便利です。

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

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

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

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

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

ブラウザ(Win) CSSセレクタ対応状況まとめ （2010年5月14日版）

CSS セレクタ総復習 （2010年5月版）

目次

* (汎用選択子)

使い方・使い道について

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 (構造擬似クラス)

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

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

ブラウザ(Win) CSSセレクタ対応状況まとめ（2010年5月14日版）

CSS セレクタ総復習（2010年5月版）

*　(汎用選択子)

E　(型選択子)

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

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

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

CSS関連　雑記

PHP関連　雑記

Firefox　検索バーに好きなの追加

もっとちゃんと考えること　変数の命名規則

PHP修行「setter/getter」を知るの巻