Haml入門 (全8回)

HTMLをシンプルかつ美しく記述するためのテンプレートエンジンであるHamlについて学びます。

このレッスンでは ruby 1.9.3p125 / Haml 3.1.7 を使用しています。

• 動画レッスン一覧 (8)
• 補足情報一覧 (3)
• よくある質問一覧 (1)

• 未完了
  #01 Hamlとはなにか？ (02:50)
  • Hamlの概要
  • 公式サイト
  • 必要となる知識
  • 必要となる準備
  • レッスンでの環境
• 未完了
  #02 はじめてのHaml (02:37)
  • 基本動作
  • 動作確認
  • コマンドラインオプション（-q -f html5）
• 未完了
  #03 Hamlの基本 (02:37)
  • !!!
  • タグの生成（%）
  • 字下げ
  • 属性の記述方法 {} ()
• 未完了
  #04 コメントを書いてみよう (02:29)
  • /
  • -#
• 未完了
  #05 改行をコントロールしてみよう (02:34)
  • 一行で書く
  • <
  • >
• 未完了
  #06 属性を記述してみよう (02:34)
  • 複数の属性を記述する
  • #id
  • .class
  • %divの省略
• 未完了
  #07 フィルターを使ってみよう (02:22)
  • :css
  • :javascript
  • :escaped
• 未完了
  #08 Rubyの式を評価してみよう (02:54)
  • #{}
  • %p=
  • -

#01 Hamlとはなにか？

2012年11月21日

補足情報 あわせて見ておきたいサイトについて

Hamlの公式サイトはこちらです。
http://haml.info/
より詳細なリファレンスはこちらから。
http://haml.info/docs/yardoc/

#03 Hamlの基本

2012年12月12日

補足情報 DOCTYPEとオプション

DOCTYPE については「!!! 5」と記述して HTML5 の DOCTYPE 宣言を生成させることもできます。こう書いた場合にはコンパイル時に「-f html5」をつける必要はありません。

#07 フィルターを使ってみよう

2013年9月9日

補足情報 フィルタの一覧について

:cssや:javascript以外のフィルタの一覧はこちらで見ることができます。CoffeescriptやSassと組み合わせることもできますよ。
http://haml.info/docs/yardoc/file.REFERENCE.html#filters

インデントが表示されない - #02 はじめてのHaml

以下のような index.haml を index.html に変換しても、動画のようにインデントが表示されず、 ...