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

投稿:  著者:  読了時間:7分(本文:約3,200文字)


こんにちは。森和恵です。今日は四月一日ですね。

学生・社会人...と"新人さん"が、たくさん生まれる日です。きっと、胸わくわくでスタートされるのでしょうね。そんな爽やかな気持ちにあやかり、私も"Bダッシュ"でスタートしたいものです。

そして...忘れちゃいけない四月馬鹿(エイプリルフール)の日です。昨夜、日が変わってすぐに、ネタサイトに切り替えてた管理者さん、おつかれさまです。一日限定のイベントを心ゆくまで楽しみましょう♪

 |Google マップ 「宝探しモード 」新登場 - 暗号を解いて宝を探そう
 < http://googlejapan.blogspot.jp/2013/04/google.html?m=1 >
 |※去年ドラクエだった、GoogleMapは、キャプテンキッドの財宝探し。

 |エイプリルフールに便乗しているサイトまとめ2013年版
 < http://gigazine.net/news/20130401-aprilfool/ >
 |※毎年恒例のGIGAZINEさん。ページ下の関連記事で過去をみるのも楽しい

さて今回は、著書「Fireworksの教科書」の読者プレゼント当選発表とLESSネタの続きをします。前回のLESS記事はこちら↓

 |LESS〈1〉〜基本のキ、変数と演算について〜
 < http://bn.dgcr.com/archives/20130204140100.html >




■著書「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 >