講師だって、最初は初心者だもの［番外］CSSメタ言語 の LESS〈4〉〜LESSのまとめ〜
── 森　和恵 ──

●ベースフォントサイズを「@変数名」で指定

LESS〈1〉では、「@変数名：値;」を使って、値を変数として定義できるとお話しました。また、@変数名に対して、四則計算することもできます。

そこで、サイトデザインのさまざまな「初期値」を@変数名で、冒頭に定義し管理する方法が取れます。

例えば、ベースとなるフォントサイズを @baseFontSize で指定して置き、各セレクタで、それを基準に倍数指定すれば、全体を変更するときは、@baseFontSize の数値のみを調整するだけです。

フォントサイズの他にも、カラー、レイアウト枠の幅......など、さまざまなデザインの「初期値」に利用できますね。

＜例1＞

/* LESS Input */

@baseFontSize:16px;

h1 {
　font-size:@baseFontSize*1.5;
}

h2 {
　font-size:@baseFontSize*1.2;
}


/* CSS Output */

h1 {
font-size: 24px;
}
h2 {
font-size: 19.2px;
}

●入れ子のルールを利用して、レスポンシブのスタイルを指定

LESS〈2〉では、セレクタの入れ子についてお話しました。これを使って、レスポンシブウェブデザインで使われる、メディアクエリーのセレクタをまとめて書くことができます。

バラバラに記載するより、まとめておいた方が、画面の幅によってどのように変化するかがわかりやすいと思います。

＜例2＞

/* LESS Input */

div.main {
width:900px;
margin:0 auto;

@media screen and(max-width:768px){
width:750px;
margin:0 auto;
}

@media screen and(max-width:540px){
width:100%;
margin:0;
}

}

/* CSS Output */

div.main {
width: 900px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
div.main {
width: 750px;
margin: 0 auto;
}
}
@media screen and (max-width: 540px) {
div.main {
width: 100%;
margin: 0;
}
}

●ミックスインでベンダープレフィックスを楽に記述する

LESS〈3〉では、クラスセレクタを他のセレクタの中に記述して呼び出せる、ミックスインをお話しました。これを使って、何度もおなじプロパティを記載しなくてはならないベンダープレフィックス指定が必要なプロパティを楽に書き表せます。

＜例3＞

.myborderRadius は、ベンダープレフィックス付きの角丸指定をするためのミックスインです（初期値は、10px）。.box1では、初期値のまま呼び出しています。.box2では、値を5pxに変更して呼び出しています。


/* LESS Input */

.myborderRadius(@radius:10px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

.box1{
.myborderRadius;
}

.box2{
.myborderRadius(5px);
}

/* CSS Output */

.box1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.box2 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

......ということで、今回は、終わりです。

今回は、理解を深めるための応用コードをご紹介しました。こんな風にLESSをどう組み込むか？　の思いつき次第で、もっと楽にCSSコーディングができればいいなと思います（面白いコードを思いついた方、教えて頂けると嬉しいです！）。

さて。次回は来月初めです。次回は、息抜きにアニメか漫画の話をしたいと思います。ではまた！（＾θ＾）

※記事へのご意見・ご要望は下記より受付けます。
< http://goo.gl/rN5Dg
>

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

6月30日に、デジクリおなじみの岡田陽一さんが主宰するイベントがあります。「Webにおける「デザイン」を、原点に戻って見直してみよう！」というテーマで、素敵な出演者の方々が登壇されます。当日、私はスタッフでお手伝いする予定。みんなで、勉強してお祭りを楽しみましょう！（懇親会の企画が面白くなりそうで、個人的に楽しみにしてます。）

　｜CSS Nite in KOBE, Vol.2 〜デザイン再考（サイコー）〜
　< http://cssnite-kobe.jp/
>