HTML文法
目次
子要素
演算子：>
演算子の後置の要素が前置の子要素として入れ子構造の中に配置されます。
1 | nav>ul>li |
1 2 3 4 5 | <nav> <ul> <li></li> </ul></nav> |
兄弟要素
演算子：+
演算子の前置の要素と同階層の兄弟要素として後置の要素が配置されます。
例
1 | div+p+bq |
1 2 3 | <div></div><p></p><blockquote></blockquote> |
一つ上の階層
演算子：^
演算子の前置の要素の一つ上の階層として入れ子構造を脱して後置の要素が配置されます。
例
1 | div+div>p>span+em^bq |
1 2 3 4 5 | <div></div><div> <p><span></span><em></em></p> <blockquote></blockquote><div> |
グループ化
演算子：()
カッコ内の要素群を一つのグループとして前後の演算子を評価します。
例1
1 | div>(header>ul>li*2>a)+footer>p |
1 2 3 4 5 6 7 8 9 10 11 | <div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer></div> |
カッコは以下のように入れ子で使うこともできます。
例2
1 | (div>dl>(dt+dd)*3)+footer>p |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl></div><footer> <p></p></footer> |
繰り返し
演算子：*
前置の要素を指定回繰り返して配置します。
例
1 | ul>li*5 |
1 2 3 4 5 6 7 | <ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul> |
連番
演算子：$,@,-
繰り返し演算子『$』をともなって要素タグ内テキストや要素の属性値に連番を付加します。特にオプションを指定しない場合は1から始まり1ずつ増え(インクリメント)します。『$』を続けて繰り返すとその桁数となり数値の入らない桁は0で埋められます。『@』で連番の初期値を指定します。また、『-』で1ずつ減る(デクリメント)連番となります。
例1
1 | ul>li.item$*5 |
1 2 3 4 5 6 7 | <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li></ul> |
属性値も要素タグ内テキストも同様連番処理が出来ます。
例2
1 | h$[title=item$]{Header $}*3 |
1 2 3 | <h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3> |
連番の桁数は次のように『$』を並べて表現します。値のない桁は0で埋められます。
例3
1 | ul>li.item$$$*5 |
1 2 3 4 5 6 7 | <ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li></ul> |
連番の初期値は『@』で指定します。
例4
1 | ul>li.item$@3*5 |
1 2 3 4 5 6 7 | <ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li></ul> |
1ずつ減る(デクリメント)連番にする場合は『@』の直後に『-』を記述します。この場合最終値が『1』になるよう初期値が自動設定されます。
例5
1 | ul>li.item$@-*5 |
1 2 3 4 5 6 7 | <ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li></ul> |
デクリメントの場合は@指定値が初期値ではなく最終値となります。
例6
1 | ul>li.item$@-3*5 |
1 2 3 4 5 6 7 | <ul> <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li></ul> |
class/id名の付加
演算子：./#
要素にclass/id属性を付加し、属性値に演算子以降のテキストを挿入します。classの場合は『.』を、idの場合には『#』を使用します。一つの要素に対し複数指定することもできます。
例1
1 | #header |
1 | <div id="header"></div> |
要素を指定せずclassやidのみを記述した場合はdiv要素に指定したものとして解釈されます。
例2
1 | .title |
1 | <div class="title"></div> |
classとidを両方指定する場合は単純に要素のあとにclassとidを付します。展開後の記述順はスニペットで記述したとおりの順序に従います。
例3
1 | form#search.wide |
1 | <form id="search" class="wide"></form> |
class(またはid)を複数指定した場合、一つの属性に対して複数の属性値を与えるコードとして展開します(class="class1" class="class2"…のように冗長な展開にはなりません)。
例4
1 | p.class1.class2.class3 |
1 | <p class="class1 class2 class3"></p> |
属性および属性値の付加
演算子：[](=)
要素の直後に[]内で指定した属性を付加します。[属名=属性値]の形で属性値まで指定できます。
例1
1 | p[title="Hello world"] |
1 | <p title="Hello world"></p> |
複数の属性と属性値をまとめて記述することもできます。
例2
1 | td[rowspan=2 colspan=3 title] |
1 | <td rowspan="2" colspan="3" title=""></td> |
属性を与える要素が指定されない場合、それはdiv要素に付されたものとして解釈されます。
例3
1 | [a='value1' b="value2"] |
1 | <div a="value1" b="value2"></div> |
要素タグ内テキスト
演算子：{}
要素直後の{}で指定したテキストを要素タグペア内にテキスト文として挿入します。
例1
1 | a{Click me} |
1 | <a href="">Click me</a> |
もちろん各演算子と要素の指定を複合して使うこともできます。
例2
1 | p>{Click }+a{here}+{ to continue} |
1 | <p>Click <a href="">here</a> to continue</p> |
暗黙のタグ名
一部の要素はclass演算子『.』で前後の文脈とクラス名の記述だけで自動的に要素を判断し補完します。
例1
1 | .class |
1 | <div class="class"></div> |
classのみだとdiv要素と判定されますが、フレージングコンテンツ（あるいは、XHTML以前のHTMLではインライン要素）内にクラス名のみ指定されるとspan要素が割り当てられます。
例2
1 | em>.class |
1 | <em><span class="class"></span></em> |
また、ul/ol要素の中ではli要素が割り当てられます。
例3
1 | ul>.class |
1 2 3 | <ul> <li class="class"></li></ul> |
テーブル要素内ではその階層の深さに応じてtr要素(レコード/行)、td要素(データ/列)が割り当てられます。
例4
1 | table>.row>.col |
1 2 3 4 5 | <table> <tr class="row"> <td class="col"></td> </tr></table> |