まずは下準備

1. ローカルサーバーの設定
2. Gitでバージョン管理
3. ファイル転送用コマンドのエイリアス作成

1.ローカルサーバーの設定

この辺は前にも書いたことあるので、省略しますが、ローカルのサーバーでWordpressが動くようにしときます。
自分の環境はApache+MySQLの組み合わせです。メールの設定なんかはスルーしてます。

2.Gitでバージョン管理

とりあえず、コーディング前の準備としてGitで管理するようにします。
なんかあったとき用ですね。これもローカルだけの管理なので、HDDが死んだらアウトです。

git init

次に.gitignoreファイルを作成します。githubにWordpress用の.gitignoreファイルが公開されてるので、それを参考にいらないものを記述します。

github / WordPress.gitignore

.gitignore

#sass
.sass-cache/

#mac
.DS_Store

#win
Thumbs.db

#dreamweaver
_notes/
dwsync.xml

wp-*.php
xmlrpc.php
wp-admin/
wp-includes/
wp-content/plugins/　#追記
wp-content/uploads/
wp-content/blogs.dir/
wp-content/upgrade/*
wp-content/backup-db/*
wp-content/advanced-cache.php
wp-content/wp-cache-config.php
wp-content/cache/*
wp-content/cache/supercache/*
sitemap.xml
sitemap.xml.gz
readme.html
license.txt

ここで、wp-content/plugins/を追記したのは、プラグイン内のファイルでwp-*.phpにマッチしちゃうファイルが結構あって、コンフリクトしちゃうので、めんどくさいからプラグインも無視するようにしました。
本番とテストでプラグインは別々になっちゃいますけど、どうせ設定なんかはそれぞれ管理画面からやらなきゃいけないので、まいっかってことで分けるようにしました。

これを使えば、基本的にはテーマディレクトリ以下のみが無視されないようになります。

3.ファイル転送用コマンドのエイリアス作成

ファイルの転送もコマンドでできるようにします。GUIのFTPクライアントは使いません。
いくつか方法はあると思いますが、自分はRsyncコマンドを使います。オプションやら色々設定すると長すぎて毎回入力するのはキツイのでエイリアスを作って簡単に覚えれるようにしときます。

このサイトはさくらのサーバーで運用してるので、下記の様なコマンドを.bashrcに記述しておきます。

alias synchowtohp="rsync -avvrh --update --exclude-from ~/work/howtohp/.gitignore  --delete -e ssh ~/work/howtohp/ ユーザー名@サーバー名.sakura.ne.jp:~/www/"

~/work/howtohp/の部分は自分のローカル環境のWordpressのルートディレクトリになります。

–exclude-fromオプションで、先ほど記述した.gitignoreを利用してるので、.gitignoreに記述してるファイルは無視されます。.gitigrenoreとrsyncでexcludeするファイルの記述ルールは少し違いますが、ここでは、共通して利用できる形で.gitignoreを記述してます。

これで、synchowtohpと打つだけで同期がとれます。このコマンドでは–deleteのオプションを付けてるので、ローカル環境で削除したファイルは同期のタイミングで本番からも削除されます。

Rsyncコマンドの参考サイト

• はじめてrsyncを使う方が知っておきたい6つのルール
• UNIXの部屋 コマンド検索: rsync

:column(selector-list)

これは引数で指定されたセルエレメントにマッチします。

サンプル

HTML

<table>
   <col span="2" />
   <col class="selected" />
   <tr>
       <td>A</td>
       <td>B</td>
       <td>C</td>
   </tr>
   <tr>
       <td span="2">D</td>
       <td>E</td>
   </tr>
   <tr>
       <td>F</td>
       <td span="2">G</td>
   </tr>
</table>

CSS

:column(col.selected) {
    background: #bada55;
}

この場合、CとEとGにスタイルが適用されます。

ここで、display:table;とされてるものや、まだWorking Draftの段階のgrid-layoutでの列はマッチするのかという疑問がでてきたので、Working Draftを見てみると下記のように書いてました。

The :column(selector-list) pseudo-class notation represents a cell element belonging to a column that is represented by the element selected by its argument.

Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns.

引用:Selector Level 4 – ‘:column()’ pseudo-class

ざっくり下線部分を訳してみると、列の集合は、ドキュメント言語のセマンティックスのみに基づいて決定されます。要素がどのように表示されているかは考慮されません。

翻訳は得意ではないけど、大体こんな感じの意味になるかと思います。

つまりgrid-layoutや、display:tableとかで表っぽく見せても、見た目だけの話だから考慮しませんと捉えれるんじゃないでしょーか。間違ってたらごめんなさい。

実際、CSSで指定されたカラムとマッチさせるにはブラウザー側で、２回CSSを処理しないといけなくなるので、現実的にはなさそうですよね。たぶんそんなのはダメ的なのがCSS 2.1で言われてたきがします。

:nth-column(an+b)

これは、:nth-child()と同じ引数を受けつけます。evenやoddも使えます。縦ストライプとか、１列目から4列目までとかそういうのが簡単にできます。

:nth-last-column(an+b)

これも、:nth-last-childと同じ引数を受けつけます。これを使えばカレンダーの週末の列だけとか、インボイスの小計の列などがサクっと選択できます。

サンプル

めんどくさいのでHTMLは省略します。

CSS

:nth-last-column(-n+2) {
    background: red;
    color: white;
}

こんな感じで後ろから２列が簡単に選択できます。子要素を選択する:nth-childなどと違って列を選択するので、少し毛色は違いますけど、使い方はほぼ同じなので、導入しやすい方じゃないでしょうか。

最後に

まだWorkingDraftの段階なので、将来的に名称が変わったり、削除される可能性もありますけど、これに関しては結構そのままいきそうな気がします。

メーリングリストなんか読んでみると正規表現でのセレクターの話題が出てたり、Chromeの開発者の一人であり、CSS WGのメンバーのTab Atkins Jrさんなんかは、自身のブログでCSSでの変数や、Mixinの仕様を個人的なドラフトとしてブログに書いてたり、CSSはどんどん進化してますね。

実は昔、一度だけW3CのTPACという年に一度の会議に出たことがあるんですが、CSS WGの席で、CSSを良くする事とは、出来る事を増やすという意見で満場一致だったので、今後どんどんプロパティや、機能が増えて複雑化していくことは間違いないようです。

その時、あんまり複雑化するとパフォーマンスはどうするんだ？というような話が出たのですが、誰が言ったのかは覚えてないですが、”そんなもん、開発者の言い訳だ”みたいな一言でバッサリ斬られてたのが印象的でした。

参考サイト

• W3C – Selector Level 4
• メーリングリストでの正規表現でのセレクターのスレ(おまけ)
• Tab Atkins Jrさんの個人的な変数のドラフト(おまけ)

1.フォントサイズを大きくする

デベロッパーツールのフォントサイズがちゃいちーで見えねーよって人は、ユーザースタイルシートで変更する事ができます。

ファイルの場所は以下で、ファイルを保存するとオンザフライで反映されます。

• Win: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
• Mac: ~/Library/Application Support/Google/Chrome/Default/User Stylesheets

上記の場所にCustom.cssというファイルを作成し、以下のCSSでフォントサイズなどを変更することができます。

body.platform-mac .monospace, body.platform-mac .source-code {
    font-family: Monaco, monospace;
}
body.platform-mac.platform-mac-snowleopard .monospace,
body.platform-mac.platform-mac-snowleopard .source-code {
    font-size: 14px !important;
    line-height: 1.2;
    font-family: Menlo, monospace;
}

body.platform-windows .monospace, body.platform-windows .source-code {
    font-size: 14px !important;
    line-height: 1.2;
    font-family: Consolas, Lucida Console, monospace;
}

見ての通り、プラットフォーム毎にセレクターが違いますので、環境に合わせて使ってください。

フォントサイズをある程度大きくすると、こんな感じでコンソール部分のテキストの行間が詰まって重なってしまうので、注意してください。コンソール部分にはline-heightが効かないっぽいです。

デベロッパーツールから直接変更する方法もあると思うんですが、調べてもわからなかったので、知ってる人いたら教えてください。

2.CSSを編集する

ここではふつーに編集できます。Firebugだとプロパティ毎の編集だったと思うんですが、Chromeでは普通のエディタみたいにスペースや、改行も自由です。

ここでも編集がリアルタイムに反映されるので、レイアウトとかいじってると書いてる途中は崩れちゃうので、要注意。
慣れればリロードもいらないので、かなり便利。

3.編集したCSSのバージョンを戻す

ファイルを保存すると、そのたびに、バージョンファイルが作成されます。

特定のバージョンに戻したい場合は、選択して右クリックするとリビジョンを戻すメニューがでてくるので、クリックするだけ。

4.ファイルとして保存する

編集したら、保存したいですよね。いちいちコピーしてペーストとかめんどいですし。右クリックするとファイルとして保存するメニューがでてきます。

5.FirebugとDeveloper Toolsどっちを使うべき？

どっちでもええがな

HSL色空間とはなんぞや

Wikipediaで調べてみた所、こんな感じで書いてました。

HLS色空間（エイチエルエスいろくうかん）とは、色相（Hue）、彩度（Saturation）、輝度（Lightness/Luminance または Intensity）の3つの成分からなる色空間。HSV色空間によく似ている。 HSL、HSIと呼ばれることもある。

HLSのカラーモデル
色相：色味を0～360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。すなわち、反対色を見つけるのも容易。色相についてはHSVと同じ。
彩度：HSVとは違い、純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づいている。
輝度：明度100%を純色とし、そこからどれだけ明るさが失われるかを示すHSVとは違い、輝度0%を黒、100%を白とし、その中間（50%）を純色とする。50%以下はHSVの明度を示し、50%以上はHSVの彩度を示すと考えると分かりやすいだろう。
HLS色空間を使う代表的なアプリケーションとしては Microsoft Windows （ペイントを含む）、CSS3、Paint Shop Pro など。

引用:HLS色空間 – Wikipedia

つまり、色相を角度、彩度、輝度を%で指定する。そっから色相の値を替えずに、彩度と輝度をいじっていけば、同じ色合いの色を直感的に指定できますね。

CSS3でのHSL(A)カラー指定方法

/* Green */
.hoge {
    color: hsl(120, 50%, 50%);
}
/* アルファを加えたもの */
.huga {
    color: hsla(120, 50% 50%,.3);
}

画像にフィルターをかけてみる

HTML

<figure class="sample">
    <img src="dog.png" alt="実家の犬" />
<figure>

CSS

.sample {
    position:relative;
    display:inline-block;
}

.sample:before {
    content: '';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    background: hsla(270,100%,50%,0.1);
    /* SASS(Compass)を使ってるとコンパイル時にRGBAに変換されます */
    background: rgba(127, 0, 255, 0.1);
}

結果

Before

After

ブラウザのサポートはFirefox 3.0+, Safari 3+, Chrome 6+, Opera 10+, IE9となってます。

最近はSASSやらLESSやらが流行ってるから、変換してくれる機能使ってHSLからRGBに出力する事にしといて、HSLに慣れとく方がいいかもしれません。

参考サイト

• 公式: CSS Color Module Level 3 – W3C
• 日本語訳: CSS カラーモジュール Level 3
• SASS : Module: Sass::Script::Functions

input要素のplaceholderにスタイルを適用させる

/*for Webkit*/
input::-webkit-input-placeholder {
    color:    #999;
}

/*for Firefox*/
input:-moz-placeholder {
    color:    #999;
}

inputとtextarea両方に適用させる

::-webkit-input-placeholder {
    color:    #999;
}
:-moz-placeholder {
    color:    #999;
}

今のとこWebkitとFirefoxしかプレイスホルダーのスタイリングに対応していないようです。

Mixin

text-shadowとかも効くんですが、とりあえず色だけかえるためのSCSSでmixinにしてみるとこんなかんじになります。

@mixin placeholder-color($color) {
     &:-moz-placeholder {
         color:$color;
     }
     &::-webkit-input-placeholder {
         color:$color;
     }
 }

//使い方
input {
    @include placeholder-color(#aaa);
}
textarea {
    @include placeholder-color(#ccc);
}

今回は設定なので、導入方法なんかは、前回の記事を参考にしてみてください。

設定を変更するにはconfig.rbファイルを編集します。
今回振り分けるのはoutput_styleとline_commentsの2箇所で、下記の2行を追加するだけです。

#圧縮するかどうかの設定(:nested, :expanded, :compact, or :compressed)
output_style = (environment == :production) ? :compressed : :expanded

#SASS内の行番号の出力(true or false)
line_comments = (environment == :production) ? :false : :true

config.rbはrubyですので、environmentを三項演算子で条件分岐してます。
コロンが連続して続くけど、全く意味が違うってのがなんか変な感じを受けてしまいます。

で、config.rbの設定、もしくはコマンドのオプションで切り替えます。

config.rbの設定

#何も書かなければデフォルトは:development
environment = :development

コマンドオプション

compass watch -e production

一つ注意しなければいけないのが、ファイルの変更が全くない状態で、productionとdevelopmentを切り替えても、ファイルが生成されません。

前回書いてなかったけど、compass watchの引数に監視するファイルパスを指定しなければ、sass_dirで設定したパスの中身のファイルを全部監視します。

1つのファイルだけ指定してても、そのファイルがインポートしてるファイルも監視してくれるので、そこら辺がSASSと違うところかな。

1.Compassをインストール

Compassをインストールするには、SASS同様、Rubyがインストールされている必要があります。
Macの方は元々入ってるので、心配無用です。Linux使ってる人なら、自分で入れれるでしょう。
Windowsの方はお近くのAppleStoreで(ry。嘘です。
Ruby Install Guideを参考にすればいいと思うよ。

ターミナルで下記のコマンドでインストール

gem update --system
gem install compass

これでインストールは完了。

2.初期設定

インストールが完了したら、Compassのコマンドが使える様になってるはずなので、コマンドでサクっと初期設定します。
ターミナルで、SASSファイルや、cssを置く予定の場所で、下記のコマンドを実行します。

compass create

実行するとこんな感じのファイルが生成されます。

├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

自分の場合、CSSファイルは”css”ってフォルダ名にしたいので、ちょろっと、オプションを付けます。
あと、画像用のフォルダと、JavaScript用のフォルダも設定しておきます。あとで、config.rbを編集すればいつでも変更はできます。

compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

SASSシンタックスを使いたい場合

デフォルトではSCSSのシンタックスなので、SASSシンタックスを使いたい場合もオプションで変更できます。
SCSSの方がCSSっぽくて楽だと思いますけど。

compass create --syntax sass

これで初期設定は完了。

他にも色々な設定があるので詳しくは公式のConfiguration Referenceを参考にしてください。

3.Compassの機能をインポート

Compassには様々なMixinやスタイルが用意されています。使い方は簡単で、@importでインポートするだけです。

@import "compass/css3/border-radius"; /* CSS3のborder-radiusのみインポート */
@import "compass/css3/"; /* CSS3関連のMixinを丸っとインポート */
@import "compass/utilities" /* クリアフィックス等のユーティリティ系Mixinをインポート */
@import "compass" /* コンパスの機能を全部インポート 基本的にはこれだけでOKだと思います。　*/

@import "compass/reset/" /* リセット用CSSをインポート */;

上記のresetに関してはMixinではなく、CSSそのものなので、インポートした場所にEric Meyer’s reset 2.0をベースにしたスタイルが書きこまれます。

4.SASSファイルからCSSファイルを生成

SCSSファイルからCSSを生成するには、SASS同様コマンドラインでコンパイル or ウォッチします。

コマンド

compass compile sass/style.scss
compass watch sass/style.scss #変更を監視して、保存の度にコンパイル
compass watch --output-style compressed sass/style.scss #一行に圧縮

たったこれだけです。SASSの場合、出力先のCSSファイル名も指定しなきゃいけなかったけど、Compassは最初に設定しているので、必要ありません。

設定したCSS用フォルダに同じ名前(この場合style.css)のCSSファイルが生成されます。

5.Compassを使って書いてみる。

Clearfix

例えばクリアフィックスをする場合、下記の様に書きます

Compass (SCSS)

@import "compass/utilities/general/clearfix";

.sample {
    @include clearfix;
}

CSS

.sample {
    overflow: hidden;
    *zoom: 1;
}

こんな感じで出来上がり。でも、これぐらいなら、あんまり便利さが実感できませんね。

コンフィグレーション変数とMixinの組み合わせ

Compassにはコンフィグレーション変数という機能があります。
プロパティに対して、デフォルトのバリューが用意されており、デフォルトのバリューを使う場合は、省略することができます。
もちろん、各自変数の中身を上書きすることができます。

Compass (SCSS)

@import "compass/css3/border-radius";

//$default-border-radius:5px; /* compassの初期設定 */
$default-border-radius:10px;  /* 上書き */

.sample1 {
    @include border-radius; /* デフォルトを使用してバリューを省略した場合 */
}

.sample2 {
    @include border-radius(2px); /* 通常の使い方 */
}

CSS

.sample1 {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   -ms-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
}

.sample2 {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   -o-border-radius: 2px;
   -ms-border-radius: 2px;
   -khtml-border-radius: 2px;
   border-radius: 2px;
}

基本的な奴

正直これ覚えたぐらいでは、普通のGUIのエディターよりも不便

カーソル移動

これに慣れると、もうやめられない。他のエディタ使っててもついついやっちゃう。

まだまだ基礎(ちょっと応用)

ウィンドウ系

イースターエッグ