講師だって、最初は初心者だもの［番外］CSSメタ言語のLESS〈2〉〜セレクタの入れ子について〜
── 森　和恵 ──

■著書「Fireworksの教科書」の読者プレゼント当選発表！！

二回にわたってお伝えした、読者プレゼントに多数のご応募を頂きました。ありがとうございます。さて、当選されたのはこちらのお二人です。

(⌒▽⌒)／゜・:*【ネ兄】*:・゜＼(⌒▽⌒)

≪漢字は違うけど、お名前が私と同じ、「K.Sさん」≫
仕事でFireworksを使うことが多いそうですが、機能を使いこなせば、「簡易版」をこえるソフトだと私は思っています。書籍をお供にぜひ、勉強してみてください。

≪どっちつかずの使い勝手に馴染めない、「G.Mさん」≫
Fireworksに馴染めないそうですが、たしかに癖のあるソフトかもしれません。でも、その癖に馴染むと便利に思えてくると私は思っています。この書籍をお供にぜひ、あきらめずにチャレンジしてください。

(⌒▽⌒)／゜・:*【ネ兄】*:・゜＼(⌒▽⌒)


本当に、たくさんのご応募ありがとうございます。当選されたお二人には、今日中に送付先の住所をお聞きするのメールを送りますね。読後の「Amazonのレビュー」もよろしくお願いします。(^^)

今回は、たくさんコメントを頂き、すごくうれしかったです。コラムを楽しみに読んでくださっている方も多くて...ありがとうございます（感涙）。頂いたご意見を胸に、ぼちぼちと（関西人らしく）がんばります。

今後も、書籍宣伝という名のイベントは続けます。

★イベントで使ったお役立ちスライドを公開したり、
★今週の水曜日にはUSTをやったり、
...する予定です。最新情報をゲットしたい方は、下記まで。

　｜Fireworksの教科書
　< http://www.facebook.com/FireworksBook
>
　※「いいね！」すれば、あなたのFacebookに情報をお届けしますヨ。

■LESSの ＜セレクタの入れ子（Nesting）＞

さて、CSSコード記述が楽になる！はずのCSSメタ言語、LESS。

今回は、セレクタの入れ子を勉強しましょう。子孫セレクタを多用している人は、LESSにやみつきになりそうです。コードが読みやすくコンパクトになりますよ♪

　｜LESS 公式サイト
　< http://lesscss.org/
>

　｜LESSのルールセットのネスト
　< http://less-ja.studiomohawk.com/#-ルールセットのネスト
>

さて、始める前にひとつだけ思い出しておいてください。LESSコードはそのままではブラウザが理解できないので、LESS → CSS へ変換する必要があります。ここでは、手軽に試せる LESS2CSS を使ってください。左側にLESSコードを入力すると右側で変換されます。

　｜LESS2CSS
　< http://less2css.org/
>

さて、ここからが本題。セレクタの入れ子（Nesting）を見てみましょう。

CSSの子孫セレクタを使ってセレクタを明確に記述する場合、親セレクタの名前を何度も繰り返して書く必要がありますが、LESS では、セレクタの中にセレクタを入れ子構造で持たせることができます。

＜例1＞

/* LESS Input */

div.main {
　width:500px;
　margin:0 auto;
　background:#ffffcc;
　h1 {
　　color: #cc0000;
　　border-bottom: solid 1px;
　　padding: 0.2em;
　　font-size: 24px;
　}
}

/* CSS Output */

div.main {
　width: 500px;
　margin: 0 auto;
　background: #ffffcc;
}
div.main h1 {
　color: #cc0000;
　border-bottom: solid 1px;
　padding: 0.2em;
　font-size: 24px;
}

このように、子孫セレクタを中に入れて、まとめて書けるので、構造が一目で見てわかりやすく、子孫セレクタの記述ミスを防ぐことができます。親の名前の変更もスムーズに行えます。

■入れ子のルールを利用してリンクスタイル指定

入れ子にしたセレクタの文頭に結合子「&」を指定すると、親セレクタを子孫として扱わずに、結合します。これを使って、親セレクタ「a」を持つ入れ子セレクタ「:hover」を「&:hover」とすることで、「a:hover」となり、擬似クラスセレクタの入れ子指定ができます。

＜例2＞

/* LESS Input */

a{
　@linkColor:#FF00FF;
　@hoverColor:lighten(@linkColor, 30%);
　text-decoration:none;
　color:@linkColor;
　&:hover{
　　color:@hoverColor;
　}
}

/* CSS Output */

a {
　text-decoration: none;
　color: #ff00ff;
}
a:hover {
　color: #ff99ff;
}

今回は指定しませんでしたが、入れ子セレクタ「&:link」や「&:visited」も加えると、リンクスタイルをまとめて書けちゃいます。便利！

...ということで、今回は、終わりです。ちょっと短めですみません。次回は4月中旬です。引き続き、LESSネタ（一番重要でやっかいな、ミックスインの話）で勉強しましょう。ではまた！（＾θ＾）

※記事へのご意見・ご要望は下記より受付ます。
< http://bit.ly/gIHFfu
>

【 森和恵 r360studio　〜 Web系インストラクター 〜 】
< site: http://r360studio.com
>　< twitter: http://twitter.com/r360studio
>
< mail: r360studio@gmail.com >
< サイト制作の教科書 r360study: http://www.facebook.com/r360study
>

ここで終わろうとキーボードを置いたら、またネタを見つけてしまいました。「ぱたぱた...余計めんどくさいわっ！」と、思わず叫びました。ww　Googleさんの四月馬鹿サイト。

　｜Google Japan Blog: Google 日本語入力チームからの新しいご提案
　< http://googlejapan.blogspot.jp/2013/04/google-patapata.html
>