東京本社 TEL : 03-5728-5580

支社連絡先一覧

mypage

フェローズe-ラーニングログイン

CSS拡張メタ言語

「それはCSSをもっと便利に使いこなすためのもの!」

サイトを作成する際にCSSを使うことはもはや当たり前のことです。

ところで

CSSは必須なのだが、もっと便利に使いたい!

と感じたことはないでしょうか?
もちろんCSSとしての仕様・書式は確立しているので、そのとおりに記述すれば目的は達せられますが

・さらに構造的に

かつ

・さらにシンプルに

するための『メタ言語』が「CSS拡張メタ言語」になります。

そもそも『メタ言語』とは?

「言語を作るための言語」

「言語」を「言語」でワンクッションおく感じです。

有名なメタ言語としては

・XML
・SGML

等があります。

メタ言語の特徴は

メタ言語だけでは何もできない!

ということです。
何やら逆説的な言い方に聞こえますが

メタ言語自身は直接的な情報を記述することができない

例えばXMLについて考えると

XML勧告には直接的な情報は何も含まれていない

ということが言えます。

禅問答みたいになってしまいましたが

とにかく「CSS」とは別に「CSS拡張メタ言語」という『モノ』を存在させる

「そういった発想に基づきます。」

我々は

CSSファイルを作るかわりにCSSメタ言語ファイルを作る

と考えればよいですね。
ちょっと書くものが変わるだけです。

CSSの書き方が変わるので勉強しなおそう

と考えればよいでしょう。

せっかくCSSを覚えたのに?!

「当然、そう思ったりもしますよね?」

出発点は

CSSは必須なのだが、もっと便利に使いたい!

ということなので、もちろん“勉強しなおす”だけのメリットはあると信じましょう。
例えばサイト全体のイメージ色が「赤」(red)だとした時

body{
・・・・・・
color:red;
・・・・・・
}
・・・・・
.navi{
・・・・・
color:red;
・・・・・
}
.contents{
・・・・・
color:red;
・・・・・
}

CSS上には「red」という記述が度々登場することがあります。
ところが、ある日

このサイトのイメージ色を「青」(blue)に変えてみたい!

となった場合、各所に散らばる「red」を全て「blue」に変更しなければなりません。

実はCSS拡張メタ言語を使用することで、こういった作業が簡単、すなわち管理がしやすい環境を得ることができるのです。
これは

CSSの再利用性を高める

という意味合いも持ってきます。

どうでしょう?
何となく「おいしそう」な匂いがしてきませんか?

CSS拡張メタ言語の代表的なものとして

・SCSS
・LESS

の二つに注目して考察していくことにします。