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

投稿:  著者:  読了時間:6分(本文:約2,900文字)


こんにちは。森和恵です。まだ5月だというのに、暑い日がつづきましたね。気温に負けて、例年より早く「衣替え」をしてしまいました。※これを書いている今日は寒くて、ちょっと後悔しています(悲)。

しかし、夏は色とりどりのファッションで、冒険できて楽しいですよね! 去年の服に何を新しく合わせて楽しもうか? ...と考えるのもワクワクします。私がこの夏に狙っているのは、落ち着いたオトナな路線。

まずは、春流行の花柄パンツ。涼しげな柄に移行して夏も楽しめそうです。
< http://www.felissimo.co.jp/fashion/v1/cfm/products_detail001.cfm?gcd=622725 >

次に、憧れのふわふわロングのワンピースも、チャレンジしてみたいなと思い
ます。
< http://www.felissimo.co.jp/fashion/v1/cfm/products_detail001.cfm?gcd=474922 >

柄パンもロングスカートも、チビ&デブの私だと似合わない...はずですが、そこは根性と気合で楽しみます。

......と、冒頭ご挨拶の季節ひとネタの後は、お勉強しましょう♪
今回は、CSSメタ言語 LESSのまとめです。
過去のLESS記事はこちら↓です。

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

 |LESS〈2〉〜セレクタの入れ子について〜
 < http://bn.dgcr.com/archives/20130401140100.html >

 |LESS〈3〉〜ミックスインについて〜
 < http://bn.dgcr.com/archives/20130415140100.html >




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

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/ >