Recommended
More Related Content
Similar to Haml 学習コース 初級編
Recently uploaded
Recently uploaded (16)
Haml 学習コース 初級編
- 1. 1
- 2. ● このスライドではHamlの基本的な書き方を紹介しています ● Progate（ https://prog-8.com ）っぽいデザインで作りました ● Progateの中の人が作りましたが、Progate公式コンテンツではあ りません ● 是非、実際にHamlを書きながら学習してみてください！ はじめに 2
- 3. HamlでHTMLを記述する ● Hamlとは ● HamlでHTMLのタグを生成する ● Hamlでのインデントの扱い ● クラス名を付ける ● id名を付ける ● divタグの省略 ● その他の属性の付け方（ 1） ● その他の属性の付け方（ 2） ● コメントの書き方 ● DOCTYPE宣言 目次 3 HamlでRubyを使う ● Rubyのコードを埋め込む ● 変数を定義する ● 変数の値を表示する ● ハイフンとイコールの違い ● 条件分岐 ● 繰り返し処理 Hamlを活用する ● Hamlをダウンロードする ● HamlをHTMLに変換する ● HamlとRuby on Rails
- 7. 左の図のように、「 %タグ名.クラス名」とすることで、そのタグにクラス名を指定す ることができます。この際、「タグ名」とドット「 . 」の間にスペースを入れてはいけ ないので注意しましょう。 また、連続してクラス名を書くことで、複数のクラス名を付けることも可能です。 クラス名を付ける 7 HamlでHTMLを記述する
- 8. クラス名と同様に、 id名も付けることができます。 id名を付けるにはドットではなく、 代わりにシャープ「#」を用います。クラス名も id名もCSSのセレクタと同じ記号を用 いるので、覚えやすいかと思います。 また、右の図のように書くことで、クラス名と id名の両方を付けることも可能です。 id名を付ける 8 HamlでHTMLを記述する
- 10. これまでにタグにクラス名と id名を付ける方法を学習しました。その他の属性とし て、<img>タグの「src」や、<a>タグの「href」を指定する方法をみてみましょう。 これらはタグ名の後で、 Rubyのハッシュのように、 {:属性名 => 値}と指定すること で属性を追加することができます。 その他の属性の付け 方（1） 10 HamlでHTMLを記述する
- 11. 先ほど見た属性の追加方法は、以下の図のように {属性名: 値}と省略して書くこ ともできます。この点からも、 Rubyのハッシュと同じような書き方であることがわ かるかと思います。その他の属性の付け 方（2） 11 HamlでHTMLを記述する
- 13. HamlでHTMLを記述する方法の最後の内容として、 DOCTYPE宣言について見 てみましょう。DOCTYPE宣言はWebページを作成する際に、どのバージョンの HTMLかを宣言するためのものです。 Hamlでは、左の図のように「 !!!」と書くことで、右の図のような DOCTYPE宣言を生 成することができます。 DOCTYPE宣言 13 HamlでHTMLを記述する
- 15. まずは変数を定義する方法を学習してみましょう。 図のように行の先頭にハイフン「 -」を書き、その後で「 変数名 = 値」とRubyのコー ド続けます。変数を定義する 15 HamlでRubyを使う
- 17. これまでに、変数の定義はハイフン「 -」、変数の値を表示するにはイコール「 =」を 使用してきました。 これらの違いは、 Rubyのコードの結果（値）を表示しない場合はハイフン、表示す る場合にはイコール、と覚えておきましょう。 ハイフンとイコールの 違い 17 HamlでRubyを使う
- 18. ここからはHamlでよく使用するRubyのコードをいくつか紹介します。 まずは条件分岐です。 Haml内でも以下の図のように if文やelse文を使用して表示 を切り替えることができます。 この際、「if 条件式」や「else」の部分は実際に表示する内容ではないため、先頭 にハイフンを用いるようにしましょう。 条件分岐 18 HamlでRubyを使う
- 20. 最後に、Hamlを実際に使用する方法について簡単に見てみましょう。 自分のPCでHamlを利用するには、まず Hamlをダウンロードする必要がありま す。公式サイト（ http://haml.info/ ）のダウンロードの項目では、以下のコマンドを 実行することで、 Hamlのgemを使用する方法が紹介されています。 Hamlをダウンロードす る 20 Hamlを活用する
- 21. gemを用いてHamlをダウンロードできたら、作成した HamlファイルをHTMLファイ ルに変換してみましょう。 図のように「haml Hamlファイル名 HTMLファイル名」というコマンドを実行するこ とで、HamlのコードをHTMLに変換し、自動でファイルに書きこむことができます。 HamlをHTMLに変換す る 21 Hamlを活用する
- 22. また、Hamlを用いる場面の 1つとして「Ruby on Rails」のビューファイルとして用 いることがあります。 「haml-rails」というgemをインストールすることで、 erbファイルの代わりに haml ファイルを使用することができます。 （詳しくは「rails haml」などで検索してみてください！） Hamlと Ruby on Rail 22 Hamlを活用する
- 23. ● 最後まで読んでいただき、ありがとうございました ● Hamlで快適な生活をお過ごしください ● 内容に関するご指摘やご質問は以下の連絡先までお願いします さいごに 23 カイトズズキ Twitter: @k_toooooooooo Email: suzukikaito@prog-8.com