CSSだとSass/Compassなど、より記述を楽にし、メンテナブルにする言語がありますが、HTMLのほうはいかがでしょう。皆様使ってますか?
メモを取る際、Markdownで記述されている方は、ある種使っているといえるかもしれませんね。今回はHamlという言語を使ってみます。
Hamlとは
Beautiful, DRY,
well-indented, clear markup:
templating haiku.
引用:Haml
なお、HamlはHTML abstraction markup languageの略です。マークアップを美しく、早く、シンプルに作るための言語です。
Ruby on RailsのViewファイルを記述するためによく使われる技術だそうです。
とはいえHTMLのマークアップ言語であれば、普通のWeb制作にも使っていきたいですね。
さっそく基本的なイロハ
まずはどんな感じかサンプルを御覧ください
以下がhalmで書いたものです。
!!! 5
%html
%body
%div.container
%header
%h1 title
%h2 subtitle
%div.contents
%div.single-box
%h2.box-title
%p.box-discription
%footer
%p unitopi. All rights reserved.
コンパイルすると、、
<!DOCTYPE html>
<html>
<body>
<div class='container'>
<header>
<h1>title</h1>
<h2>subtitle</h2>
</header>
<div class='contents'>
<div class='single-box'>
<h2 class='box-title'></h2>
<p class='box-discription'></p>
</div>
</div>
<footer>
<p>unitopi. All rights reserved.</p>
</footer>
</div>
</body>
</html>
となります。
環境構築
ターミナル(Applications > Utilities > Terminal)を開き、gem install halm
でインストールします。
なお、gemはrubyをインストールし、環境変数PATHを通す必要がありますのでご注意ください。(「Mac ruby インストール」などで検索し参照ください)
コンパイル(hamlファイルからhtmlファイルにする)は、コマンドで打つ以下の方法と、SublimeTextなどをつかってBuild Systemを作る方法などがあります。(Build Systems — Sublime Text Unofficial Documentation)
コマンドでは、haml hamlファイル htmlファイル
でコンパイルできます。
基本的なタグの書き方
一番重要なのは、インデントです。入れ子(divのなかにpがあるとか)にする場合は、インデントがどうなっているかによって判断されます。
そしてタグは%をつけてタグの指定をします。Sassと同じように、インデント記述にさえ準拠すればHTML記述でも問題ありませんので、使いたいところだけ使っても良いでしょう。
%div
%h1 h1のテキストです。
%p
pのテキストです。
<div>
<h1>h1のテキストです。</h1>
<p>
pのテキストです。
</p>
</div>
となります。
インデントを右にずらすと子とみなされるため、pタグで囲まれている部分は段落がわけて表示されています。
IDやCLASS
IDやクラスも簡単です。
%div#container
%div.content
%div.box.active
<div id="container">
<div class="content"></div>
<div class="box active"></div>
</div>
となります。class
を複数付けたいときは、%div.box.active
と続けてかけばOKです。
リンクなどのパラメタ
続いてa
タグのhref
などの指定方法を見てみましょう。
%a(href="http://unitopi.com") unitopiへのリンク
<a href="http://unitopi.com">unitopiへのリンク</a>
となります。
コメント
/ 1行コメント
/
複数行の
コメント
<!-- 1行コメント -->
<!--
複数行の
コメント
-->
となります。ちなみに-#
をつかうことで、HTMLコメントとしても出力されないhaml専用のコメントも使えます。
変数や条件分岐
Hamlの真骨頂です。Sassなどにもありますが、変数などを扱うことができます。
- text = "テキストです"
- var = "VARです"
%div
%p= text
%p これはなんと#{var}
<div>
<p>テキストです</p>
<p>これはなんとVARです</p>
</div>
これが変数の使い方です。#{}
を使うことで文中でも使用することができます。
条件分岐
- num = 100
- if num >200
%p これは200より上
- else
%p これは200以下
なんとなく察しがつきますね
<p>これは200以下</p>
となるわけです!
まとめ
いかがでしたか?
ほかにもスイッチ文や連番を振って繰り返し処理をさせる方法など、様々な機能があります。前段でも説明しましたが、Sassと同様に通常のHTML記述もそのまま使うことができますので、少しずつの導入でも問題ありません!
是非お試しください!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事