Pocket

すっごい『 css 』 その名は 『 less 』知らんと損

 ホームページを装飾するCSS。そのcssをもっと便利に使えるのが『 less 』です。基本的にはcssと同じなのですがlessはそのコード内でプログラムっぽいことができます。例えば変数を使ったり、関数が定義できたり。ホームページを彩るcssの進化版 less 今日はその魅力に触れてみたいと思います。

cssとは

 今日は嫁が病院に行っていて子守やってます。子守ながらスッゴイcssについて語ろうかと思います。ホームページを作成される方はcssをよくご存知だと思います。htmlコードを装飾する手段の一つですね。背景に色を付けたり、各オブジェクトの隙間を調整したり、文字のサイズを変えたり、いろいろな装飾をhtmlコードに付与できます。cssはhtmlと同様にテキストベースでコードを書き、通常はhtmlと別のファイルにしておきます。拡張子はcssが普通です。ではまずlessを紹介する前に簡単なcssの例から見ていきましょうか。

cssで表のセルに色をつけてみる

まずは簡単なtableタグで表を作り、tableタグ内のtdタグに色を付けてみます。
そして、idがcel01のオブジェクトの背景色を赤くする例は以下です。これは通常のcssで簡単に実現できますね。

html

<table  border="1">
  <tbody>
    <tr>
<td id="cel01">セル1</td>
<td id="cel02">セル2</td>
</tr>
</tbody>
</table>

css

td#cel01{background:#f00;}

結果
cell を赤く
はい、cel01のidを持つ1つ目のセルが赤くなりましたね。

他のとこもcssでガンガン赤くしてみる

 はい、では色んなタグ、クラスやidの要素に対して赤色を適用していきますよ~。たとえば下の例のようなidやclassがあると仮定して下さいね。

css

td#cel02{background:#f00;border: 1px solid #f00;}
table.table01 tr.over td {background: #f00;}
#abc,#a01,#a02{color: #f00;}
.xyz,.def{background: #f00;}

ハイ、た~くさん赤くしましたネ。さぞや赤いホームページになっていることでしょう。ここまではcssで簡単にできますね。

いや~やっぱ青にした方が・・・-変数の使い方

 人の気持は常に移ろいゆくものです。「あ~このページ赤すぎたわ・・・全部青に変えたい!」
ホームページ作成中によくあることです。通常はテキストエディタなんかで赤のカラーコード「#f00」を検索して、青のカラーコード「#00f」に置き換えます。まぁ今回は赤から青に変えるだけの簡単な変更なので、まとめて置換を掛ければそんなに労力掛かりませんが。複雑になってくるとそうも行きません。

 そこですごいcss、『 less 』の登場です! lessを使うと、こういった場合のまとめて変更が非常に簡単になります。lessの「変数機能」を使って、カラーコード「#f00」を変数に代入してみます。ちょっとプログラムっぽい感じですね。書き方はこうです。

less

@color01:#f00;

cssファイルの中に書き込んで下さい。これで「@color01」をコールすると「#f00」が代入されます。つまり、下のようなコードに変えるわけです。

less

@color01:#f00;
td#cel01{background:@color01;}
td#cel02{background:@color01;border: 1px solid @color01;}
table.table01 tr.over td {background: @color01;}
#abc,#a01,#a02{color: @color01;}
.xyz,.def{background: @color01;}

 このコードは先程のものと表示結果は同じになります。そして忘れてはいけないのがファイルを保存するときの拡張子。通常の「.css」ではなく「.less」で保存してくださいね。

 こう書いておけば、赤から青に変えたい時はたった一つ「@color01:#f00;」「@color01:#00f;」と変更するだけでよいのです。ボクがよくやる手段は、まずサイトで使う全ての色を変数定義しておきます。そして後々サイトの雰囲気を変えたくなった時は定義した変数を変更することで簡単にサイトの雰囲気を変えることができます。

lessを使うには外部のjavascriptファイルが必要

 しかし上記の変数代入、これは標準のcssでは実現できません。lessのjavascriptをhtmlに組み込んでやる必要があります。まずはlessのjavascriptをゲットするために下記ページにアクセスして「less-1.7.0.min.js」をダウンロードしましょう。

http://lesscss.org/

 2015年5月18日の時点ではバージョン2.5.0が最新みたいですね。ページ中ほどにあるダウンロードボタンを右クリックして下さい。internet explorerは「対象をファイルに保存」、firefoxは「名前を付けてリンク先を保存」をクリックしてファイルを保存しましょう。普通に左クリックじゃダメですよ!!
less.jp の ダウンロード

 で、ダウンロードしたファイルをご自身のホームページサーバーにアップします。この辺は皆さんそれぞれ環境が違うと思うので割愛。FTPでアップロードしたり、レンタルサーバーにログインしてアップしたり・・・

 ではhtmlにダウンロードしたlessのjavascriptを組み込みましょう。普通のcssと同様、headタグ内に以下を入力。hrefにご自身で作ったlessファイルのパスを入力します。

html

<link rel="stylesheet/less" type="text/css" href="sample.less" />

コレでOK!使用の準備は出来ました!

変数以外の使い方 – 演算

 先ほど紹介した変数代入ですが、カラーコードだけでなく、色んなものを代入できます。では例としてtop_btnクラスを持つ要素をlessを使って下記のように設定してみます。ここで実装する装飾は下記の3つ。

  1. 背景色を@thema01に設定。
  2. 文字色を@thema02に設定。
  3. マージントップを@m_height-30pxに設定

less

@thema01:#222;
@thema02:#dfd;
@m_height:100px;
.top_btn{
  background: @thema01;
  color: @thema02;
  margin-top:@m_height - 30;
}

1,2は先程と同じくカラーコードを代入しました。またlessでは3のように変数に大きさを代入し、「@m_height – 30」のような演算もOKなんですね~。便利です。

変数以外の使い方 – 関数

さらに便利なのが関数にも対応しているところ。引数を投げてグラデーションを描画する例です。まずは普通のcssで下記を書いてみます。

  • クラスa01のtdには「白」から「黒」へグラデーション。
  • クラスa02のtdには「赤」から「黒」へグラデーション。
  • クラスa03のtdには「緑」から「黒」へグラデーション。

css

td.a01{
  background: #000;
  background: -moz-linear-gradient(top,  #fff 0%, #000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff)
  , color-stop(100%,#000));
  background: -webkit-linear-gradient(top,  #fff 0%, #000 100%);
  background: -o-linear-gradient(top,  #fff 0%, #000 100%);
  background: -ms-linear-gradient(top,  #fff 0%, #000 100%);
  background: linear-gradient(to bottom,  #fff 0%, #000 100%);
  filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff'
  , endColorstr='#000',GradientType=0 )";
}
td.a02{
  background: #000;
  background: -moz-linear-gradient(top,  #f00 0%, #000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f00)
  , color-stop(100%,#000));
  background: -webkit-linear-gradient(top,  #f00 0%, #000 100%);
  background: -o-linear-gradient(top,  #f00 0%, #000 100%);
  background: -ms-linear-gradient(top,  #f00 0%, #000 100%);
  background: linear-gradient(to bottom,  #f00 0%, #000 100%);
  filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#f00'
  , endColorstr='#000',GradientType=0 )";
}
td.a03{
  background: #000;
  background: -moz-linear-gradient(top,  #0f0 0%, #000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0f0)
  , color-stop(100%,#000));
  background: -webkit-linear-gradient(top,  #0f0 0%, #000 100%);
  background: -o-linear-gradient(top,  #0f0 0%, #000 100%);
  background: -ms-linear-gradient(top,  #0f0 0%, #000 100%);
  background: linear-gradient(to bottom,  #0f0 0%, #000 100%);
  filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0'
  , endColorstr='#000',GradientType=0 )";
}

cssで書くと、とてつもなく長いです。もうウンザリ。webデザイナーの方はよくご存知かと思いますが、各ブラウザでcssの仕様が異なるので上記のようにブラウザごとに同じ命令(グラデーション)の内容を何回も書いてます。非常に厄介。色を変更したい日にゃあ、もう発狂してしまいそうです。ヽ(`Д´#)ノ ムキー!!

じゃあコレをlessで書くとどうなるか???

less

td.a01{.grad(#fff,#000);}
td.a02{.grad(#f00,#000);}
td.a03{.grad(#0f0,#000);}
.grad(@start,@end){
  background: @end;
  background: -moz-linear-gradient(top,  @start 0%, @end 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start)
  , color-stop(100%,@end));
  background: -webkit-linear-gradient(top,  @start 0%, @end 100%);
  background: -o-linear-gradient(top,  @start 0%, @end 100%);
  background: -ms-linear-gradient(top,  @start 0%, @end 100%);
  background: linear-gradient(to bottom,  @start 0%, @end 100%)
  filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start}'
  , endColorstr='@{end}',GradientType=0 )";
}

あらヤダ、スッキリ!!!(゚Д゚ )
上のcssと全く同じことをやっているのに、コード量は約1/3!各td要素で.grad関数を呼んでいることが大きなポイントです。.grad(色1,色2)で引数指定してあげると、関数内の@start、@endに それぞれ色1と色2が代入されます。このコードでは.grad()関数は.a01,.a02,.a03のtd要素で三回機能することになります。上のコードを更に改良して、色1,色2を変数化してやるともっとステキなコードになりそうですね。他にもlessならではの機能あるんですが、今回はとりわけ役に立ちそうな「変数」「演算」「関数」について紹介しました。


パソコンのトラブルはこちらへ
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です