Haml:クラス、IDを付与する

goto_jp 230views 更新:2014年8月20日
!!!
%html
    %head
        %title Haml test
    %body
        %h1.title Hello World
        #main
            %p テスト

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

<!DOCTYPE html>
<html>
  <head>
    <title>Haml test</title>
  </head>
  <body>
    <h1 class='title'>Hello World</h1>
    <div id='main'>
      <p>テスト</p>
    </div>
  </body>
</html>

Emmetの記述と同じで「%h1.title」などタグに続けてクラスを連結する記述でクラスが付与されます。

また「#main」とタグを省略して書くと自動でdivタグ扱いで出力されます。

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

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

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