Help us understand the problem. What is going on with this article?

Hamlの書き方

More than 5 years have passed since last update.

htmlを記述するとき、簡単かつ簡易的に記述できるHamlについての書き方を記します。

Ruby On Rails などを扱うとき、Hamlで記述する人も多いでしょう。

ちなみに私はSlimなども好きです。

Hamlの基本

(例)

!!!
%html{lang: "ja"}
  %head
    %meta{charset: "utf-8"}
  %body
    hello world!

<コード解説>
1. !!!
<!DOCTYPE html>を表す

2. %
タグの前に%を付けると< 開始タグ >と< 終了タグ >を表す。

3. インデントを必ず入れる
入れ子構造にする時は字下げを必ず同じスペース分入れる。
ちなみに私の場合はRubyが主ですがその他プログラムでも記述するときは字下げ(タブ幅)を2にしています。だいたい4つスペースか2つスペースなんかが一般的でしょうか。

4. 属性を入れる場合
Ruby風に{}とシンボルで書ける。
尚、HTML風に書くなら「%html(lang="ja")」

コメント記法

  1. HTML的に記述

    「/ コメントだよ」

    もしくは複数行書くときは

    / コメントだよ
    コメントだよ
    コメントだよ

  2. HTMLには反映させないけどHamlの中では反映させたい場合

    -#」を「1」と同様に記述する。

改行

%p
  Hello!

上記は以下となる。

<p>
  Hello
</p>

尚、一行にしたい場合は

%p Hello

上記は以下となる。

<p>Hello</p>

また、Haml上では見やすく改行して記述した場合、HTML上でも改行付きになるが、それを改行なしで表示させたい場合は以下のように「<」を入れる。
(例)

%ul
  %li<
    item1

これはHTML上では以下となる。

<ul>
  <li>item1</li>
</ul>

尚、親要素の改行も取り除きたい場合、逆の不等号「>」を用いる。

%ul
  %li<>
    item1

以下でも良い。

%ul<
  %li<
    item1

id、classなどの属性指定方法

(例)

%div#main.mainClass

尚、「div」はよく使われるので省略可能。
slimでも同じですね。

#main.mainClass

styleタグ、scriptタグを入れる場合

:css
  #main {
    color: red;
  }
:javascript {
  x = 1;
  if(x == 1) {
    alert("OK!")
  }
}

RailsでのerbファイルをHamlに変換する場合

◇ Hamlの中でRubyの式を評価する場合 #{} を使う。

%p #{10 * 4}
%p{id: "main-#{i}"}

each、if などのロジック部分の先頭に - を記載する。

- @posts.each do |post|
  = post.title

<%= ... >= にする。yieldとrenderのときは、== にする。
== yield

watak676
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした