LESS を使用して CSS でもっと多くのことを行う

最新の Web ページ向けのレスポンシブ・デザインのスタイルの作成、保守を単純化する

LESS を使用して、理解しやすく保守が可能な CSS (Cascading Style Sheets) を最新の Web サイト向けに作成する方法を学びましょう。テーブルと目に見えない画像を用いてレイアウトのトリックを行っていた、かつてのおぞましい日々は、CSS によっておぼろげな過去の記憶となります。しかし CSS もまだ使いにくいものであるため、いくつかのイニシアチブでは CSS が開発者にとって使い勝手のよいものになるように取り組みました。そうした中で最も優れているのが、変数、ミックスイン、演算、関数などの動的振る舞いによって CSS を拡張できる LESS です。LESS は CSS に似た言語であり、クライアント・サイドで、またはサーバー・サイドのプリプロセスによって、シームレスに CSS にコンパイルすることができます。

Uche Ogbuji, Partner, Zepheira, LLC

Photo of Uche OgbujiUche Ogbuji は、Zepheira 社で高度な Web カタログやその他のリッチなコンテキスト依存データベースの作成を監督する、同社のパートナーです。XML、セマンティック Web と Web サービス、Akara などのオープンソース・プロジェクト、そして Web データ・アプリケーション用のプラットフォームなど、先進的な Web テクノロジーの先駆者として長い歴史を積んでいます。コンピューター・エンジニア、ライターとしても活躍する彼は、ナイジェリア出身で、現在はアメリカ・コロラド州ボールダー近くに住んでいます。彼に関して詳しくは、彼のブログである「Copia」を見てください。



2013年 8月 22日

CSS は Web ページのデザインに革命を起こしましたが、CSS は相変わらず静的な技術であり、構文の柔軟性は制限されています。こうした制限は意図的なものであり、CSS が幅広く実装されるように促す方法としては妥当ですが、開発者やデザイナーが CSS を扱うのにうんざりしていることは多々あります。多くの Web フレームワークには、より柔軟な機能を使用して CSS をより簡単に作成できるようにするツールが含まれています。この柔軟な機能を使用して作成した結果は、コンパイルされてサイトにデプロイできる静的な CSS になります。最近では、さらに焦点を絞り、CSS にコンパイルされるように設計された言語を作成しようとするプロジェクトがいくつかあります。Alexis Sellier 氏によるオープンソース・プロジェクトである LESS は、そうしたプロジェクトの中でも最もよく知られているものの 1 つです。

開発者にとっておなじみの、変数、ミックスイン、演算子、関数などの機能によって CSS の基本機能を拡張する LESS は、サーバー・サイドの JavaScript ツールキットを使用してプリプロセスを行うか、ブラウザーの JavaScript を使用することにより、CSS にコンパイルされるように設計されています。LESS は他のさまざまなツールキットにも使用されており、その一例が Twitter でよく使用されている Bootstrap プロジェクトです。この記事では、最新の Web サイト用に理解しやすく保守の容易な CSS を作成する手段として LESS (具体的にはバージョン 1.4) を紹介します。この記事のサンプル・コードを入手するには「ダウンロード」を参照してください。

はじめに

LESS の最新バージョン (この記事の執筆時点では、バージョン 1.4) をダウンロードしてください (「参考文献」を参照)。LESS 言語を学ぶのに必要な準備はこれだけです。W3C (World Wide Web Consortium) の Wiki には、CSS について学ぶための資料がいくつかあります。この記事では、おおよそそのチュートリアルの順番に従って説明することで、必要な場合は CSS と LESS の基本を同時に学べるようにします。

リスト 1 は W3C のチュートリアルにある最初の例を引用したものです。

リスト 1. 基本的な CSS の例 (listing1.css)
p {
  color: red;
  font-size: 12px;
  background-color: green;
}

リスト 2 の HTML は、リスト 1 の CSS を利用しています。

リスト 2. リスト 1 の基本的な CSS の例を参照する HTML (listing2.html)
<head>
    <link rel="stylesheet" type="text/css" href="listing1.css">
</head>
<body>
    <p>This is a paragraph</p>
</body>

図 1 に、Mac OS X 上で実行される Safari ブラウザーに表示された listing2.html を示します。

図 1. リスト 1 の CSS を使用した場合にブラウザーに表示される画面
listing2.html を Safari に表示した場合のスクリーン・キャプチャー。文字色が赤色で、背景色が緑色に設定された、本体の 1 行のテキストがレンダリングされています。

マジック値を排除する

リスト 1 を見た開発者は、おそらくすぐにこのコードがプログラマーの直観に反していることに気付くはずです。このリストでは、値が CSS にハードコーディングされており、こうしたプラクティスは「マジック値」として嘲笑されることがあります。LESS で最も重要な機能の 1 つが変数です。リスト 3 は、先ほどの基本的な CSS の例を LESS で変数を使用して書き直したものです。

リスト 3. LESS で変数を使用して書き直した基本的な CSS の例 (listing3.less)
@main-text-color: red;
@main-text-size: 12px;
@main-text-bg: green;

p {
  color: @main-text-color;
  font-size: @main-text-size;
  background-color: @main-text-bg;
}

リスト 3 は、構文的に正しい CSS ではありません。そのため先ほどの HTML の中に記述されている listing1.csslisting3.less に置き換えることはできません。また、JavaScript コンパイラーを呼び出すようにホストの HTML を更新する必要があります (リスト 4)。

リスト 4. 基本的な CSS の例を LESS で記述したコードを参照する HTML (listing4.html)
<head>
    <link rel="stylesheet/less" type="text/css" href="listing3.less">
</head>
<body>
    <p>This is a paragraph</p>
    <script src="less.js" type="text/javascript"></script>
</body>

リスト 4 で、ページの body の最後に script タグを配置していることに注意してください。従来、ほとんどの開発者が script タグを head に配置してきましたが、script タグを body に配置しても問題はなく、この方法は (HTML 4 の仕様を引用すると) 「script 要素は文書がロードされる順序で評価される」という事実を活用しています。最近では多くのサイトがスクリプトを body の終わり近くに配置し、メイン・コンテンツのロードがスクリプト処理によって遅くなることがないようにしています。


サーバー・サイドでのコンパイル

ここまではブラウザーで即座に利用できるように LESS でコードを作成し、デプロイする方法について説明しましたが、この方法は便利な代わりに代償を伴います。それは、ページがロードされるたびにユーザーのブラウザー上で JavaScript のコンパイルが実行され、計算リソースを大幅に使用するため、ページのロードが少し遅くなることです。ブラウザーにリスト 4 をロードして JavaScript コンソールを見てみると、「less: css generated in 36ms」というメッセージが表示されます。36 ミリ秒は長い時間ではありませんが、不必要な計算が追加され、余分な時間がかかっていることを表しています。Web ではページが高速にロードできることが重要です。

そこで、本番モードに移行した後は、サーバー・サイドの JavaScript ツールを使用して LESS を CSS にコンパイルする方法に切り換えてください。そうしたツールとしては、Node.js がよく使用されており、LESS のサイトには Node.js の使い方が説明されています。私が好んで使用しているのは、Mozilla による単独の JavaScript プロジェクトである Rhino です。Rhino を LESS とともに使用するには、Rhino をダウンロードしてインストールし (「参考文献」を参照)、ビルドをセットアップするのに便利な場所に js.jar を配置します。また、less.js の特別なバージョンが必要になりますが、それは GitHub から LESS の完全なバージョンをダウンロードすれば、そこに含まれています (「参考文献」を参照)。この記事で使用するバージョンは less.js-master/dist/less-rhino-1.4.0.js です。Rhino の JAR を保存した場所に less-rhino-1.4.0.js を配置します。これで LESS コードを CSS にコンパイルする準備ができました。

java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css

listing3.less をコンパイルするには、カレント・ディレクトリーを listing3.less が配置されているディレクトーに変更し、以下のコマンドを実行します。

p {
  color: #ff0000;
  font-size: 12px;
  background-color: #008000;
}

コンパイルが終わると、生成された CSS が listing3.css ファイルに配置されます。このファイルの内容は以下のとおりです。

listing3.css の中で、LESS 変数が置き換えられ、色の名前が RGB 形式に置き換えられています (例えば red の場合、#ff0000 など)。これで、通常と同じように listing3.css をサーバーにデプロイすることができます。


LESS で選択できるコメント構文

LESS で機能強化されている細かな点の 1 つは、より少ない手間で 1 行のコメントを作成する方法が用意されていることです。リスト 5 は W3C の CSS チュートリアルの中にある標準的なコメントの例です。

リスト 5. コメントを使用する CSS の例 (listing 5.css)
p {
  color: red;
  /* This is a comment */
  font-size: 12px;
}

リスト 5 と等価な内容を LESS コードで作成したものがリスト 6 です。

リスト 6. リスト 5 と等価な内容を、単純化されたコメントを使用して LESS で記述したコード (listing6.less)
p {
  color: red;
  // This is a comment
  font-size: 12px;
}

リスト 6 で使用している構文は、プログラマーにとっては一般的な構文であり、通常のコメントよりも少し入力するのが楽です。ただし LESS が処理されると、生成される CSS にはこのようにして入力されたコメントは現れません。コメントを保持してブラウザーに表示できるようにしたい場合 (例えば、著作権宣言など) には、CSS の標準的なコメント構文を使用する必要があります。

W3C のチュートリアルの他の部分では、CSS セレクターの構文や一般的なプロパティーなどの詳細を説明しています。ここで、LESS のもっと幅広い使い方 ― ほとんどの Web 開発者が実際に直面することが増えている使い方 ― に焦点を移します。


レスポンシブ・デザインを作成する

2010年に、「レスポンシブ・デザイン」として知られる、ページのデザイン手法を多くの Web デザイナーが支持し始めました。この手法では、小型の携帯電話から通常のデスクトップ・コンピューターのフォーム・ファクターよりもさらに大型のディスプレイに至るまで、さまざまな機器に表示した場合にも対応できるように最初から柔軟に Web ページを作成します。

レスポンシブ・デザインの中核にあるものが CSS3 のメディア・クエリーです。メディア・クエリーは機器のタイプ (特にユーザーのディスプレイのサイズ) に応じて CSS ルールを呼び出すための標準的な手段です。LESS を使用すると、レスポンシブ・デザインのためにメディア・クエリーを使用する CSS を容易に表現することができます。そのデモンストレーションをするために、私は developerWorks のブロガーである Bob Leah 氏によるレスポンシブ・デザインの好例を LESS を使用して作成しました。この記事のコード・パッケージ (「ダウンロード」参照) では、そのファイルは responsive.less です。

演算子

responsive.less で使われている重要な手法の 1 つは、変数を使用して基本的なボックス・サイズを設定し、そのボックス・サイズを表示領域のサイズに応じて縮小する手法です。ここでは LESS の演算子を使用して拡大/縮小を行います。例えば、リスト 7 のスニペットは乗算演算子を使用してバナー画像を拡大/縮小しています。

リスト 7. LESS で乗算演算子を使用する
#banner img {
  max-width: (@bannerwidth * @scale);
  max-height: (@mainheight * @scale);
}

リスト 7 で、@bannerwidth@mainheight はデフォルトの値であり、@scale ファクターを掛けることによってサイズが縮小されます。最新バージョンの LESS では、構文の混乱を避けるために、演算子を含む式をすべて括弧で括る必要があります。

ルールのネスト

LESS で最も便利な機能の 1 つが CSS ルールをネストする機能です。ルールをネストすることにより、コードを理解しやすい構成にすることができます。リスト 8 (responsive.less から抜粋して変更したコード) では、一般的な CSS ルールをメディア・クエリーの中にネストしています。

リスト 8. LESS でネストしたルールを使用する
@media (min-width: 401px) and (max-width: 800px) {
  @scale: 0.75
  #banner { width: (@bannerwidth * @scale); }
  #banner img {
    max-width: (@bannerwidth * @scale);
    max-height: (@mainheight * @scale);
  }
  #main { width: (@mainwidth * @scale - @extrabuffer); }
  #main-content {
    width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
    float: left;
  }
}

リスト 8 のネストしたルールは、リスト 9 に示す、別々に分かれた複数の CSS ルールと同じです。

リスト 9. リスト 8 と同じ内容を、ネストしたルールを使用せずに記述したコード
@scale: 0.75

@media (min-width: 401px) and (max-width: 800px) and #banner {
   width: (@bannerwidth * @scale);
}

@media (min-width: 401px) and (max-width: 800px) and #banner img {
{
  max-width: (@bannerwidth * @scale);
  max-height: (@mainheight * @scale);
}

@media (min-width: 401px) and (max-width: 800px) and #main {
   width: (@mainwidth * @scale - @extrabuffer);
}

@media (min-width: 401px) and (max-width: 800px) and #main-content {
    width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
    float: left;
}

リスト 9 のバージョンでは、密接に関連したルール同士を自然な形でグループ化していません。さらに、メディア・クエリーを繰り返し指定しており、DRY (Don't Repeat Yourself) 原則にも反しています。

ミックスイン

LESS を使用することによって繰り返しを減らせるもう 1 つの方法として、一連のルールを指定し、それらのルールを他のルールに追加することができます。responsive.less では、このミックスイン手法を使用して、2 つの別個のメディア・クエリーに共通するルールを表現しています (リスト 10)。

リスト 10. LESS でミックスインを使用する
.media-body (@scale: 0.75) {
  #banner { width: (@bannerwidth * @scale); }
  #banner img {
    max-width: (@bannerwidth * @scale);
    max-height: (@mainheight * @scale);
  }
  #main { width: (@mainwidth * @scale - @extrabuffer); }
  #main-content {
    width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
    float: left;
  }
  #widget-container {
    width: (@widgetoutwidth * @scale * 0.75 - @extrabuffer);
    float: right;
  }
  .widget-content {
    width: (@widgetinwidth * @scale * 0.75 - @extrabuffer);
  }
}

//Rules for viewing from 401px to 800px
@media (min-width: 401px) and (max-width: 800px) {
  .media-body;
}

//Rules for viewing smaller than 400px
@media (max-width: 400px)  {
  .media-body(0.3);
  //Extra manipulation of some rules
  #main-content { padding: 0px; }
  #widget-container { width: padding: 0px; }
  .widget-content { margin: 5px; }
  .widget-text { display: none; } 
}

ミックスインは、引数を取ることができます (例えば、リスト 10 のボックス・サイズに対するスケーリング・ファクターなど)。デフォルトのスケーリング・ファクターは 0.75 です。リスト 10 では、401 ピクセルから 800 ピクセルまでの範囲で表示する場合のセクションの中で、このデフォルトを使用しています。400 ピクセル未満で表示する場合のセクションでは、スケーリング・ファクターを 0.3 に変更し、いくつかのルールを追加しています。

図 2 は responsive.less を使用する responsive.html をブラウザーに表示した場合を示しています。ここでは、幅が 400 ピクセル未満のメディア・クエリーに対応するようにブラウザーの幅を狭め、このページが小型のモバイル機器でどう表示されるかがわかるようにしています。

図 2. responsive.html を幅の狭いブラウザーに出力したときの表示
Safari ブラウザーに responsive.html を表示したときのスクリーン・キャプチャー。ブラウザーの表示幅を狭めることにより、このページを小型のモバイル機器で表示した場合をシミュレートしています。

私の Mac の Safari では、ブラウザーの幅が 500 ピクセル近くになると、幅が 400 ピクセル未満のメディア・クエリーがトリガーされます。この動作には重要なポイントがあります。メディア・クエリーは、ビューポートの概念をベースにしています。ビューポートは、ブラウザーで表示可能な領域のサイズを表しており、CSS のピクセルで指定され、機器とブラウザーによって決まります。CSS のピクセルは機器のピクセルとは異なる場合があり、ピクセル・モデル間の関係は、例えばユーザーがブラウザーの表示を拡大した場合などには、変化します (「参考文献」を参照)。また、機器とブラウザーによって設定されるビューポートのサイズが実際のウィンドウ・サイズと異なる場合があります。その一例が図 2 です。図 2 では実際のウィンドウは約 500 ピクセルですが、CSS はそれを 400 ピクセル幅のビューポートとして処理します。この現象から、すべての Web 開発手法と同じように、レスポンシブ・デザインには多様な機器を使用した適切なテストが必要なことがわかります。


まとめ

私は、ソフトウェア・アーキテクトであり、ソフトウェア開発者ですが、決して Web デザイナーではありません。LESS を使用すると、私のプログラミング・スキルを生かし、理解しやすく保守の容易な CSS を短時間で作成することができます。変数やミックスインを使用すると、手早く変更を加えて効果を確認することができ、関連する変更が必要な箇所を探すために CSS ファイル全体を調べる必要がありません。

レスポンシブ・デザインは、安価に管理の容易な形でモバイル Web デザインを行うための重要な手法として、よく知られています。またレスポンシブ・デザインはアクセシビリティーのためのデザインや、印刷などの別の表示形式をデザインする場合にも有効です。メディア・クエリーに応じて適用される複数のスタイルを扱うのは面倒な処理になりがちなため、CSS コードを単純化して整理できる LESS の機能は、より一層貴重です。


ダウンロード

内容ファイル名サイズ
LESS, CSS, and HTML code for this articleLessCssCode.zip120KB

参考文献

学ぶために

製品や技術を入手するために

議論するために

  • developerWorks コミュニティーに参加してください。ここでは他の developerWorks ユーザーとのつながりを持てる他、開発者によるブログ、フォーラム、グループ、Wiki を調べることができます。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。プロフィールで選択した情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source
ArticleID=940362
ArticleTitle=LESS を使用して CSS でもっと多くのことを行う
publish-date=08222013