学習状況の管理には 無料ユーザー登録 が必要です。

Haml入門 (全8回)

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

全8回レッスンの詳細と、完了状況は以下のとおりです。

  タイトル (動画時間 20:57) 学習状況
HTMLのテンプレートエンジンであるHamlについてその概要、公式サイト、必要となる知識などについて学んでいきます。
未完了
 
基本的な動作を確認したのちに、簡単なHamlを書いてHTMLに変換してみます。
未完了
 
Hamlの基本的な記法についてひとつずつ説明していきます。
未完了
 
Haml内に記述できるHTMLのコメント、Hamlのコメントについて説明してきます。
未完了
 
HTMLに変換したときの改行をコントロールする手法を学びます。
未完了
 
HTML属性の記述方法について詳しく見ていきます。
未完了
 
CSSやJavaScriptをHaml内に記述するためのフィルター機能について見ていきます。
未完了
 
Haml内にRubyのコードを記述して評価していく方法について見ていきます。
未完了
 
タイトル 内容
#01 Hamlとはなにか?
  • Hamlの概要
  • 公式サイト
  • 必要となる知識
  • 必要となる準備
  • レッスンでの環境
#02 はじめてのHaml
  • 基本動作
  • 動作確認
  • コマンドラインオプション(-q -f html5)
#03 Hamlの基本
  • !!!
  • タグの生成(%)
  • 字下げ
  • 属性の記述方法 {} ()
#04 コメントを書いてみよう
  • /
  • -#
#05 改行をコントロールしてみよう
  • 一行で書く
  • <
  • >
#06 属性を記述してみよう
  • 複数の属性を記述する
  • #id
  • .class
  • %divの省略
#07 フィルターを使ってみよう
  • :css
  • :javascript
  • :escaped
#08 Rubyの式を評価してみよう
  • #{}
  • %p=
  • -
#01 Hamlとはなにか?
609日前
Hamlの公式サイトはこちらです。
http://haml.info/
より詳細なリファレンスはこちらから。
http://haml.info/docs/yardoc/
#03 Hamlの基本
587日前
DOCTYPE については「!!! 5」と記述して HTML5 の DOCTYPE 宣言を生成させることもできます。こう書いた場合にはコンパイル時に「-f html5」をつける必要はありません。
#07 フィルターを使ってみよう
609日前
:cssや:javascript以外のフィルタの一覧はこちらで見ることができます。CoffeescriptやSassと組み合わせることもできますよ。
http://haml.info/docs/yardoc/file.REFERENCE.html#filters