【Jade・Sass】役に立つメタ言語の基本的な使い方の解説

Web制作

2017年11月24日

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を使用してみてはいかがでしょうか。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。