Hamlの基本

goto_jp 343views 更新:2014年8月7日
!!!
%html(lang="ja")
    %head
        %title Haml test
        %meta(charset="UTF-8")
    %body
        %h1 Hello World
        %p
            %a(href="http://www.google.com") LinkText

上記Hamlをコンパイルすると下記HTMLに出力されます。

<!DOCTYPE html>
<html lang='ja'>
  <head>
    <title>Haml test</title>
    <meta charset='UTF-8'>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>
      <a href="http://www.google.com" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.google.com']);">LinkText</a>
    </p>
  </body>
</html>

順を追って説明します。

文書宣言

!!!

!3個以上記述でHTML5のDoctype宣言を出力します。

テキストの記述

%title Haml test

%でタグ名を記述し、半角スペース一つ開けて中のテキストを記述できます。

属性値の記述

%meta(charset="UTF-8")

スペースを開けず()でHTML同様の属性値を記述できます。

入れ子構造

%p
    %a(href="http://www.google.com") LinkText

入れ子構造はインデントで行われます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません