9
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

hamlの基本ルール

Posted at

プログラミング勉強中です
お気付きの点があれば、ご指導お願いします!

##記述の基本ルール

!!!
DOCTYPE宣言


開始、終了タグを示す

例えば
%pは

と同じ意味

. はクラス
#はid を表す

hamlはこんな感じですけど

hoge.haml
!!!
 %html
  %body
   %p.hoge hello world
   %p#hoge hello world
   %p.hoge.hoge hello world

htmlに戻すとこんな感じ

hoge.html
<!DOCTYPE html>
 <html>
  <body>
   <p class="hoge">hello world</p>
   <p id="hoge">hello world</p>
   <p class="hoge hoge">hello world</p>
  </body>
 </html>

##属性の付け方

##コメントの書き方
コメントの書き方は2通り

/ コメントになる
-# コメントになる

##改行
1行で表示したい場合

hoge.haml
   %p hello world
hoge.html
   <p> hello world </p>

改行したい場合はインデントを使う

hoge.haml
   %p 
     %li
hoge.html
   <p>
     <li>
     </li>
   </p>

#id classの付け方
idはシャープ(#)、クラスはドット(.)

このhtmlファイルを

hoge.html
<div class="hoge"></hoge>

hamlファイルにすると以下のようになる

hoge.haml
%div.#main.hoge 

ちなみに%divは省略可能。なので上と下のコードは同じ意味

hoge.haml
%div.#main.hoge  -#上下同じ意味
#main.hoge

##rubyの式を挿入する

ハイフン(-)で変数の指定が可能
イコール(=)で変数を表示する

hoge.haml
- num =5  /変数の定義
= num   / numが表示される

rubyの式を使うこともできます

hoge.haml
- fruits =['りんご','みかん']
- fruits.each do |fruit|
   %p = "#{fruit}"

htmlに変換するとこんな感じ⇩

hoge.html
<p>りんご</p>
<p>みかん</p>

#haml⇆htmlのサイト

ウェブ上でhamlとhtmlをできるサイトがある
以下参考⇩

9
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?