記法/HTML(XML)/Jade のバックアップ(No.1)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 記法/HTML(XML)/Jade へ行く。
- 1 (2014-10-30 (木) 11:24:09)
- 2 (2014-10-30 (木) 12:41:36)
Jadeを使用するとHTMLやXMLを簡潔に記述できます。個人的にはTitanium Mobileでviewsフォルダ内のxmlファイルを記述するときによく利用しています（WindowにButtonやLabelなどを配置するときに使用するファイルです）。
HTML(XML)とJadeを双方向に変換できるWebサービス
備考
- 入力するときのインデントはタブでもスペースでもOKです。
- 結果はどちらもスペース２つ区切りとなります
- HTML -> Jadeではタグ名がすべて小文字に変換されます
Jade記述方法
XML例
#pre{{
<!-- comment1 -->
<Alloy>
<Window>
<Label id="lbl" attr1="a1" attr2="a2" class="c1 c2">This is label.</Label>
<!-- comment2 -->
</Window>
</Alloy>
}}
Jade記述例
#pre{{
// comment1
Alloy
Window
Label#lbl.c1.c2(attr1='a1', attr2='a2') This is label.
// comment2
}}
ポイント
- インデントを使用し、閉じタグは使用しません ... インデントは統一されていればタブでもスペースでもOK
- id, classはCSSと同様の記述方法です
- 属性はカッコ内にカンマ区切りで記述します
- タグで囲われたテキストはタグなどにスペースを挟んで右側に記述します（引用符で囲みません）
- 属性の値だけ引用符で囲みます ... id名、class名、タグで囲われたテキストに対して引用符は不要
- コメントは左側にタブを残したまま//を付けます ... インデントが重要なので行頭に//を付けるとHTML(XML)の構造が変になります