Webサイトを製作する上で、HTMLやCSSが必要になり、欠かすことのできない言語です。
しかし、HTMLやCSSを記述する量が多く、手間がかかることが問題でした。
そのような問題を解決できるのが、メタ言語です。
メタ言語は作業の効率化だけでなく、他にもたくさんのメリットがあります。
本記事では、メタ言語であるJadeとSassの使い方を紹介します。
実際に、Web製作の現場でもこの2つの言語は、頻繁に使われており、コーディングの時間を大幅に短縮できるため、この機会に覚えておきましょう。
初心者の方も最後までお読みいただければ、2つのメタ言語をマスターすることができます。
メタ言語とは
メタ言語とは、HTMLやCSSなど特定の言語を作成するための言語です。
この言語を使用することで、記述するコードの量を減らすことができ、冗長化を防ぐことができます。
メリットはこれだけではなく、HTMLファイルの分割など、役に立つ便利な機能を補完できます。
現在は、メタ言語を採用している企業が多く、この言語をマスターすることで、就職や転職の際にスキルとしてアピールできます。
今回、紹介するメタ言語は、JadeとSassですが、他にもメタ言語は存在しており、HTMLであれば、Slim、Hamlなどが挙げられ、CSSの場合は、Lessなどがあります。
Jadeとは
Jadeを簡単に説明すると、HTMLを簡単かつ効率的に記述できるマークアップ言語です。
Sassとは
Sassとは、CSSの記述量を減らしたマークアップ言語になります。
動作環境を整える
JadeとSassを使用するためには、それぞれの動作環境を設定する必要があります。
まずは、JadeとSassのセットアップについて説明します。
Jadeをインストールする手順
Jadeを利用するために必要な手順は以下の2つです。
・STEP1：Node.jsをインストール
・STEP2：Jadeをインストール
STEP1：Node.jsをインストール
JadeはNode.jsで動いているので、Node.jsをインストールする必要があります。
公式サイトにアクセスして、ボタン1つでダウンロードできます。
Jade公式サイトURL：https://nodejs.org/en/download/
STEP2：Jadeをインストール
Node.jsのインストールが完了した次は、コマンドを入力します。
Windowsの方はコマンドプロンプト、Macの方はターミナルを開きます。
インストールするためのコマンドは、以下のようになります。
npm install -g jade
このコマンドを入力して、このようなメッセージが表示されていれば、準備完了です。
jade –version
Sassをインストールする手順
Sassのインストール手順はWindowsとMacによって違うので、それぞれのやり方を紹介します。
Windowsの場合
Sassを利用するためのスッテプは以下のようになっています。
・STEP1：Rubyをインストール
・STEP2：Sassをインストール
STEP1：Rubyをインストール
Sassを利用するためには、Rubyをインストールする必要があります。
Rubyの公式サイトにアクセスして、ダウンロードします。
Ruby公式サイトURL：https://rubyinstaller.org/
ダウンロードが完了した次は、「RubyInstaller」を立ち上げます。
新たにウィンドウが開かれるので、「実行」ボタンをクリック。
次に、セットアップの画面が開かれるので、以下の項目にチェックを入れます。
・ruby の実行ファイルへ環境変数 PATH を設定する
・.rb と.rbw ファイルを Ruby に関連づける
上記の2つの項目にチェックが入っていることを確認した後に、「インストール」ボタンをクリック。
以上でRubyのインストール作業は完了です。
正しくインストールされていることを確認するために、コマンドプロンプトを開いて以下のコマンドを入力します。
ruby -v
このようにインストールしたバージョンが表示されていれば、問題ありません。
ruby 2.2.2p95 (2015-04-13 revision 50295) [x86_64-darwin14]
引き続き、Sassのインストールをするので、コマンドプロンプトを開いた状態にしてください。
STEP2：Sassをインストール
コマンドプロンプトに以下のコマンドを入力します。
gem install sass
Sassのインストールはこれで終わりです。
インストールが完了するまで、しばらく時間がかかります。
念のために正しくインストールされているかを確認するため、以下のコマンドを入力します。
sass -v
下のようにバージョンが正しく、表示されていれば、正しくインストールされています。
Sass 3.5.3
Macの場合
Macの場合、Rubyがデフォルトで搭載されているため、Rubyのインストール作業は必要ありません。
なので、Sassをインストールするだけになります。
Sassのインストール
手順はWindowsのインストール方法とほとんど同じです。
Sassをインストールするため、ターミナルに以下のコマンドを入力します。
gem install sass
パスワードを聞かれるので、OSのパスワードを入力します。
（注意：パスワードは入力しても表示されません。）
ダウンロードが開始すると以下のように表示されます。
Fetching: ffi-1.9.18.gem ( 1%)^R
Fetching: ffi-1.9.18.gem (100%)
Building native extensions. This could take a while…
Successfully installed ffi-1.9.18
Fetching: rb-inotify-0.9.10.gem (100%)
Successfully installed rb-inotify-0.9.10
Fetching: rb-fsevent-0.10.2.gem (100%)
Successfully installed rb-fsevent-0.10.2
Fetching: sass-listen-4.0.0.gem (100%)
Successfully installed sass-listen-4.0.0
Fetching: sass-3.5.3.gem (100%)
Successfully installed sass-3.5.3
Parsing documentation for ffi-1.9.18
Installing ri documentation for ffi-1.9.18
インストールができているか確認するため、以下のコマンドを入力します。
sass -v
Sassのバージョンが表示されていれば、インストール作業は完了です。
Jadeの記法
実際に記述する前に、基本的な書き方を覚える必要があります。
まずは、基本的な記法を説明します。
閉じタグは不必要
Jadeを使ってコーディングする場合は、閉じタグは必要ありません。
Jade
p サンプルです。
HTML
<p>サンプルです。</p>
Jade
h2 サンプルです。
HTML
<h2>サンプルです。</h2>
入れ子を作る
半角スペースかタブを使って、インデント構造を表します。
インデントを表すために、半角スペースとタブの両方を使用するとエラーになるので、注意してください。
Jade
ul
li テストです。
li テストです。
li テストです。
li テストです。
li テストです。
li テストです。
HTML
<ul>
<li>テストです。</li>
<li>テストです。</li>
<li>テストです。</li>
<li>テストです。</li>
<li>テストです。</li>
<li>テストです。</li>
</ul>
Jade
body
h2 サンプルです。
HTML
<body>
<h2>サンプルです。</h2>
</body>
複数行記述する方法
複数行記述するには、「|」を使用します。
Jade
p
|テストです。
|テストです。
|テストです。
|テストです。
|テストです。
|テストです。
HTML
<p>
テストです。
テストです。
テストです。
テストです。
テストです。
テストです。
</p>
Jade
p |テストです。 br |テストです。 br |テストです。 br |テストです。 br |テストです。 br |テストです。
HTML
<p> テストです。<br> テストです。<br> テストです。<br> テストです。<br> テストです。<br> テストです。<br> </p>
id・classをつける
divを省略して記述することができ、タグにidやclassをつける場合は、以下のように記述します。
・#id名
・.class名
Jade
#article
h2#headline タイトル
p.content 文章
h3#sample.test 小見出し
HTML
<div id="article">
<h2 id="headline">タイトル</h2>
<p calss="content">文章</p>
<h3 id="sample class="test">小見出し</h3>
</div>
属性の記述
属性は「（）カッコ」の中に記述します。
Jade
a(href="https://google.com" target="blank") Google.com img(src="./sample.png")
HTML
<a href="//google.com/" target="_blank">Google.com</a> <img src="./sample.png">
コメント記述
コメントは、「//」を使って記述します。
Jade
// この部分はコメントです。 // この部分はコメントです。 この部分はコメントです。 この部分はコメントです。 この部分はコメントです。
HTML
<!-- この部分はコメントです。--> <!-- この部分はコメントです。 この部分はコメントです。 この部分はコメントです。 この部分はコメントです。 -->
CSS・JavaScriptの記述
Jade内にCSS、JavaScriptを記述する場合は、以下のようになります。
Jade
style.
.sample {
font-size: 20px;
font-weight: bold;
color: red;
}
script.
(function() {
console.log("hello, World");
})();
HTML
<style>
.sample {
font-size: 20px;
font-weight: bold;
color: red;
}
</style>
<script>
(function() {
console.log("hello, World");
})();
</script>
include機能
Jadeではinclude機能が搭載されており、使用することでファイルを読み込むことができます。
ページの共通部分である「header」と「footer」をinclude使って読み込むようにします。
doctype
html(lang="ja")
head
meta(charset="utf-8")
style(src="css/style.css")
title テスト
body
header.header
h1.title サイトタイトル
nav
ul
li
a(href="#") ホーム
li
a(href="#") サービス
li
a(href="#") サイト紹介
li
a(href="#") お問い合わせ
main.main
h2.content ページタイトル
p ページコンテンツ
footer.footer
フッターです。
includeを使用した例
doctype
html(lang="ja")
head
meta(charset="utf-8")
style(src="css/style.css")
title テスト
body
include include/header.jade
main.main
h2.content ページタイトル
p ページコンテンツ
include include/footer.jade
header部分
header.header
h1.title サイトタイトル
nav
ul
li
a(href="#") ホーム
li
a(href="#") サービス
li
a(href="#") サイト紹介
li
a(href="#") お問い合わせ
footer部分
footer.footer
フッターです。
each機能
each機能を使用することで、リストタグなどを簡単に使うことができます。
ul
each val in [ホーム, サービス, サイト紹介, お問い合わせ]
li= val
<ul> <li>ホーム</li> <li>サービス</li> <li>サイト紹介</li> <li>お問い合わせ</li> </ul>
Sassの記法
Sassの基本的な記法を紹介します。
ネスト（入れ子）
Jadeと同じく、Sassも入れ子形式で記述できます。
この記述を使用するだけで、記述量を減らせることがメリットです。
Sass
#header {
width: 940px;
h1 {
float: left;
margin: 10px;
}
ul#gnav {
height: 50px;
list-style:none;
li {
float: left;
a {
float: left;
text-decoration: none;
}
}
}
}
CSS
#header {
width: 940px;
}
#header h1 {
float: left;
margin: 10px;
}
#header ul#gnav {
height: 50px;
list-style:none;
}
#header ul#gnav li {
float: left;
}
#header ul#gnav li a {
float: left;
text-decoration: none;
}
「&」で親セレクタ参照
「&」をセレクタに指定することで、親セレクタを参照することが可能です。
Sass
a {
font-size: 20px;
font-weight: bold;
&:link{
color: blue;
}
&:hover {
color: red;
}
&:visited {
color: orange;
}
}
CSS
a {
font-size: 20px;
font-weight: bold;
]
a:link{
color: blue;
}
a:hover {
color: red;
}
a:visited {
color: orange;
}
コメント記述
CSSでコメントを記述する場合は、「/**/」を使いますが、Sassの場合は、「//」を使ってコメントを記述します。
Sass
//コメントです。
変数
文頭に「$」をつけることで、変数をつくることができます。
何度も使用する値を変数に設定しておくことで、まとめて変更できることがメリットです。
Sass
$haba: 50px;
$moji: 16px;
$back_gray: #999999;
$margin_center:0 auto;
.sample{
width: $haba;
font-size: $moji;
background: $back_gray;
margin: $margin_center;
}
CSS
.sample{
width: 50px;
font-size: 16px;
background: #999999;
margin: 0 auto;
}
演算
Sassでは、「掛ける」、「割る」、「足す」、「引く」の演算ができます。
演算を使用することで、計算する手間を省くことができます。
Sass
$moji: 16px;
.sample{
width: 960px - 100px;
padding: 10px / 2;
font-size: $moji * 2;
}
CSS
.sample{
width: 860px;
padding: 5px;
font-size: 32px;
}
@mixinの使い方
「@mixin」を設定することで、インクルードを使って何度も呼び出すことができます。
コーディングにかける時間を短縮することができるので、オススメです。
Sass
@mixin sample{
width: 50px;
margin: 10px;
}
.test{
@mixin sample;
background-color: #FF0000;
}
CSS
.test{
width: 50px;
margin: 10px;
background-color: #FF0000;
}
@extendの使い方
エクステンドは、セレクタをそのまま適用させることができます。
ミックスインと似ている機能になり、コードの記述量を減らせることがメリットです。
Sass
.sample{
background-color: #FF0000;
color: #000000;
width: 100px;
line-height: 1.8;
}
.testA{
@extend .sample
margin-left: 10px;
}
.testB{
@extend .sample
margin-right: 10px;
}
CSS
.sample, .testA, .testB{
background-color: #FF0000;
color: #000000;
width: 100px;
line-height: 1.8;
}
.testA{
margin-left: 10px;
}
.testB{
margin-right: 10px;
}
@eachの使い方
「@each」を使うことで、簡単に複数のセレクタやプロパティを設定できます。
Sass
$sample-color: (
'sampleA': #000000,
'sampleB': #808080,
'sampleC': #C0C0C0,
'sampleD': #FFFFFF,
'sampleE': #0000FF,
'sampleF': #000080,
'sampleG': #008080
);
@each $sample, $color in $sample-color {
.#{$sample}{
background-color: $color;
}
}
CSS
.pageA{
background-color: #000000;
}
.pageB{
background-color: #808080;
}
.pageC{
background-color: #C0C0C0;
}
.pageD{
background-color: #FFFFFF;
}
.pageE{
background-color: #0000FF;
}
.pageF{
background-color: #000080;
}
.pageG{
background-color: #008080;
}
@forの使い方
「@for」パターン化されているスタイルを量産できます。
Sass
@for $i from 10 through 20 {
.moji#{$i} {
font-size:#{$i}px;
}
}
CSS
.moji10 { font-size: 10px; }
.moji11 { font-size: 11px; }
.moji12 { font-size: 12px; }
.moji13 { font-size: 13px; }
.moji14 { font-size: 14px; }
.moji15 { font-size: 15px; }
.moji16 { font-size: 16px; }
.moji17 { font-size: 17px; }
.moji18 { font-size: 18px; }
.moji19 { font-size: 19px; }
.moji20 { font-size: 20px; }
まとめ
今回は、JadeとSassのインストールから基本的な使い方を紹介しました。
両方とも使用するためには、環境を整える必要がありますが、パソコン操作に慣れている方であれば、それほど時間はかかりません。
HTMLとCSSだけでもWebサイトを製作することはできますが、JadeやSassを使用することで、作業時間を大幅に短縮できます。
HTMLとCSSを問題なく使える方は、すぐに習得できることも大きなメリットです。
生産性を高めたいと考えている方は、JadeとSassを使用してみてはいかがでしょうか。