1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

CSSをもっとシンプルに!スタイルシート言語を使ってできること

Pocket

はじめに

きれいで読みやすいCSSを書けていますか?

CSSはシンプルな言語ですが、そのシンプルさ故に記述が冗長になることもあります。同じ記述を何度も書いていることも少なくありません。そのため、CSSを読み書きしやすくするために、スタイルシート言語が生み出されました。

この記事では、よりよいCSSを書きたいエンジニアの方のために、スタイルシート言語についてお伝えしていきます。ぜひご一読して、きれいなCSSを書けるようになりましょう。

CSSのおさらい

CSSは、HTMLをスタイリング(デザイン)するための言語です。以前はごっちゃになっていることが多かったのですが、現在ではHTMLで文書構造を表し、それをCSSでスタイリングするように分担されています。

CSSの仕様(規格)は現在も策定中で、便利な機能も徐々に使えるようになってきてはいますが、クロスブラウザ対応のためにしばらくは使えないでしょう。今のところ、スタイルシート言語を使うことが最善の方法です。

スタイルシート言語ってなに?

スタイルシート言語は、CSSメタ言語、CSSプリプロセッサとも呼ばれるCSSを拡張した言語です。構文はCSSを踏襲しており、いくつか追加された構文を覚えるだけで使えるため、学習コストは低いといえます。

基本的な使い方としては、まずスタイルシート言語でスタイルを記述し、それをコンパイルしてCSSに変換します。変換されたCSSは通常のCSSと同様に扱えるので、そのままブラウザに読み込ませて使えます。

JavaScriptでいう、AltJS言語のようなものですね。

定番のスタイルシート言語

SASS

SASS(サース)は、Rubyで実装されているスタイルシート言語です。他にも、PHPやJava、Cなどの実装が存在しています。SASSには2種類の構文があり、従来のCSSに近い記法のSCSS構文と、インデントでブロックを記述するSASS構文が使えます。

SASS構文ではプロパティを区切るセミコロンも不要となるため、シンプルに記述できます。どちらも機能的には同じなので、CSSに似た記述が好みであればSCSS構文を使いましょう。

LESS

LESS(レス)は、JavaScriptで実装されたスタイルシート言語です。構文はCSSに近く、CSSとの互換性もあるので、既存のCSSが有効なLESSスタイルとして機能します。

特徴的なのは、LESS.jsによりブラウザ側でもサーバー側でもLESSファイルを動的にコンパイルできることです。これにより、LESSファイルのまま扱えるようになります。もちろん、ローカルマシンでのコンパイルも可能です。

スタイルシート言語でできること

変数が使える

スタイリングでは、色や幅・高さ、フォントサイズなど、同じ値を共通して別々の場所に設定したい場合がよくあります。場所ごとに固定値を記述すると、後で変更があったときに大変です。

そんなときは、「変数」を使いましょう。スタイルシート言語では、プログラミング言語のように変数が宣言できます。どちらかというと定数値のようなものですが、同じ値を一箇所で管理でき、四則演算などの簡単な計算もできるので非常に便利です。

セレクタのネストができる

HTMLは階層構造を持っているため、スタイリングでもセレクタをネスト(入れ子)して記述したい場合が多いです。たとえば、テーブルやリストなどのスタイルは複数のタグに階層的にスタイルを適用する必要があります。

スタイルシート言語はネストをサポートしているため、スタイルをより直感的な形で記述できます。

ミックスインが使える

ミックスインは、同じスタイルを複数の場所で使いまわすための仕組みです。ミックスインとして宣言したスタイルは、任意の場所(セレクタ内)で呼び出すことができ、宣言通りのスタイルが適用されます。

また、ミックスインには引数をもたせることもでき、呼び出し側で引数を渡してスタイルをカスタマイズすることも可能です。ミックスインを適切に活用すれば、重複するスタイルを排除できるでしょう。

まとめ

スタイルシート言語についてお分かりになりましたか?スタイルシート言語を使えば、すっきりした読みやすいCSSが書けるようになります。記述量も削減できるので、生産性もアップするでしょう。構文は、CSSの構文から追加された構文を覚えるだけでいいので、すぐ覚えられます。基本的な機能だけでも使ってみましょう。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る