ホームページ作成/ホームページ作成テクニック、小技

CSSを効率的に記述できるメタ言語「LESS」の使い方(2ページ目)

CSSメタ言語「LESS」を使えば、CSS内部で変数を使ったり、複数のスタイルを関数のように定義して何度も呼び出して使ったり、CSSの記述が効率的かつ楽になります。CSSのデメリットを補完してくれる、とても便利な「LESS」の使い方をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

CSSを効率良く楽に記述できるメタ言語「LESS」の書き方

それでは、LESSの書き方と、その書き方がどういうCSSだと解釈されるのかを見ていきましょう。とても便利にスタイルが書けることがお分かり頂けるはずです。

1.変数を使って、値の指定を楽にできるLESSの書き方
@base-color: #4D926F;   /* ←変数を定義 */

h1 {
  color: @base-color;
  padding: 0.3em;
}
h2 {
  color: @base-color;
  font-weight: normal;
}
ここでは「base-color」という変数を用意して、「#4D926F」という値(色)を格納しています。その色を、h1要素やh2要素に適用しています。変数名は、先頭を「@」記号にして自由に付けられます。

上記のLESSソースは、以下のCSSソースを記述した場合と同じに解釈されます。
h1 {
  color: #4D926F;
  padding: 0.3em;
}
h2 {
  color: #4D926F;
  font-weight: normal;
}
複数の要素に同じ装飾を適用したいとき、このように変数を使うと、装飾内容を変更したい場合でも、書き換えるのは変数部分のたった1箇所で済むメリットがあります。

2.複数のスタイルを関数のようにまとめて、装飾を効率良く指定できるLESSの書き方
.kadomaru (@radius: 5px) {
  -webkit-border-radius: @radius; /* Chrome,Safari */
  -moz-border-radius: @radius;    /* Firefox */
  border-radius: @radius;         /* CSS3 */
  border: solid green 2px;
}

h1 {
  .kadomaru;
}
h2 {
  .kadomaru(10px);
}
ボックスの角を丸くする場合、-webkit-や-moz-などのベンダープレフィックスを付けて、同じ値を何度も記述しなければなりません(詳しくは、記事「画像を使わずにCSSだけで角を丸くする方法」をご参照下さい)。ここでは「kadomaru」という名称の関数(のようなもの)を用意し、その中にボックスの角を丸くする記述を含めています。その関数をh1要素やh2要素から呼び出して装飾しています。こうすると、同じ記述を何度も書かずに済み、手間も省けますしソースも読みやすくなります。

上記のLESSソースは、以下のCSSソースを記述した場合と同じに解釈されます。
h1 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: solid green 2px;
}
h2 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: solid green 2px;
}
引数を特に指定しない場合は、上記のh1要素のように、デフォルトの「5px」を指定したことになります(デフォルトの値は、関数を定義したときに記述しておけます)。引数に「10px」を指定したh2要素では、その「10px」がスタイルの値として使われます。このように、関数と変数を利用して効率良くCSSが記述できます。

3.計算式を使って値をずらすことで、装飾を効率良く管理できるLESSの書き方
@base-color: #888888; /* 変数にベースの色を格納 */
@base-border: 2px;    /* 変数にベースの太さを格納 */
@base-padding: 0.5em; /* 変数にベースの広さを格納 */

h1 {
  color: @base-color + #222222;  /* 明るく */
  border: @base-border * 2;      /* 2倍に(太く) */
  padding: @base-padding + 0.3;  /* 広く */
}
h2 { 
  color: @base-color - #333333;  /* 暗く */
  border: @base-border / 2;      /* 半分に(細く) */
  padding: @base-padding - 0.2;  /* 狭く */
}
変数に入れた「太さ」や「色」の数値は、四則演算が可能です。色を足し算すれば明るくでき、色を引き算すれば暗くできます。ベースの「太さ」をかけ算で太くしたり、割り算で細くしたりもできます。ここでは解説を割愛しますが、色相・明度・彩度・透明度などを個別に割合で調節したり、小数を整数に丸める数学関数なども用意されています。

上記のLESSソースは、以下のCSSソースを記述した場合と同じに解釈されます。
h1 {
  color: #aaaaaa;  /* =#888888 + #222222 */
  border: 4px;     /* =2px × 2 */
  padding: 0.8em;  /* =0.5em + 0.3 */
}
h2 { 
  color: #555555;  /* =#888888 - #222222 */
  border: 1px;     /* =2px ÷ 2 */
  padding: 0.3em;  /* =0.5em - 0.2 */
}
「h1要素の装飾」と「h2要素の装飾」はまったく異なるものですが、ベースにしている値(太字部分)は同じです。この「ベースの変数の値」を書き換えるだけで、(変化量を維持したまま)両者の装飾をまとめて修正できるので、とても便利です。

4.CSSの階層構造を把握しやすく書ける、入れ子を使ったLESSの書き方
div#header {
  background-color: #ccffcc;
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        color: red;
      }
    }
  }
}
上記のように、入れ子構造を使ってスタイルを定義できます。HTMLも各要素を入れ子構造を使って記述しますから、CSSも同様の方法で記述できると分かりやすいでしょう。上記は、div要素の内側にh1要素とp要素があり、p要素の内側にa要素があり、a要素の内側にhover疑似クラスがあり……という階層構造になっています。

上記のLESSソースは、以下のCSSソースを記述した場合と同じに解釈されます。
div#header {
  background-color: #ccffcc;
}
div#header h1 {
  font-size: 26px;
  font-weight: bold;
}
div#header p {
  font-size: 12px;
}
div#header p a {
  text-decoration: none;
}
div#header p a:hover {
  color: red;
}
CSSソースだと、上記のように上位階層のセレクタ(要素名など)を何度も繰り返して記述しなければなりません。LESSだと、入れ子構造が使えることで分かりやすく記述できます。

さて、上記のように「LESS」を使えばCSSを効率良く楽に記述できますが、このままではブラウザは認識できません。最後に、この「LESS」をブラウザにCSSだと認識させる方法をご紹介致します
  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます