人気ブログランキング | 話題のタグを見る

Zen Coding でタブを作る

Zen Coding の練習に前回紹介した HTML BOX Z を使って、CSS でタブを作る方法を試してみた。

まず HTML 5 文書のひな形を作るために HTML BOX のテキストエリアに次のように入力した。

html:5

これを展開するために Ctrl+E を入力すると HTML 5 文書の骨格ができる。カレットは body タグの中に入っているので次のように入力して ul リストを作る。

ul#tabbox>li#tab$.tab*5>a

これは ul タグの id が tabbox でその中に li を id が tab(n) で class が tab のものを5つ作り、li タグの中に a タグを入れるという意味で。Ctrl+E で展開することができる。Mac OS の場合は Ctrl ではなく command キーになる。

そこでアンカータグの中に name 1, name 2, ... , name 5 と入力していき、HTML BOX の実行ボタンをクリックすると preview 画面にリストが表示されるのがわかる。

次に、スタイルシートで加工していくために head タグの下で次のように入力する。

style

Ctrl+E で展開するとスタイルシートの正式なタグが表示されるので改行で成形して中に CSS 要素を作成する。まずリストアイテムのマーカーを消したいので #tabbox のスタイルシートを作る。

#tabbox {

と入力して改行すると } が補完されるので、

list:n

と入力して Crt+E で list-style-type に展開する。効果を確かめるために HTML BOX の実行ボタンをクリックするとマーカーが消えているのが確認できる。

次に li ボックスを加工する。

.tab {

と入力し改行した後、

w

と入力し Crtl+E で展開して width:100px; を完成させる。次に、

h

を展開して height;40px; を完成させる。次に、背景を pink にするため、

bgc

を展開して、background-color:pink; を完成させる。確認のため実行ボタンをクリックすると設定がうまくいっているのがわかる。

li ボックスは縦ではなく横に並べたいので float:left; に設定したいので次のように入力し、

fl:l

Ctrl+E で展開する。HTML BOX の実行ボタンをクリックすると li タブが横に整列しているのがわかるが、タブとタブの隙間がないのでマージンを 4px 取るため、次のように入力して、

ml

Ctrl+E で展開し margin-left:4px; とする。HTML ボタンをクリックするとタブの間が開いているのがわかる。最後に境界線を引くために ul 要素の下に div 要素を作る。body 要素の中の ul 要素の下にカレットを持ってきて、

div#line

と入力し、Ctrl+E で展開する。これを成形するために再び style 要素に戻り、

#line {

と入力して改行した後、

w:a を展開して width:auto; を作り、h を展開して hight:2px; を作る。また bgc を展開して background-color: red; を作る。そこで HTML BOX の実行ボタンをクリックして確認すると線がタブの上に来てしまっている。これは li 要素の float;left; の影響なので #line の CSS に、

cl:b

を展開して clear:both を作成する。また、選択されたタブの背景色を赤にするために、

#tab1 {

と入力して改行し、

bgc

を展開して background-color:red; を作成する。最後に HTML BOX の実行ボタンを押すとタブが完成している。

Zen Coding を使うとキー入力の負担が必要最小限になるので疲れない。また、入力のたびに実行ボタンで確認していくので、自分が何をしているのかが分かりやすい。

Zen Coding では省略形が HTML や CSS の要素の数だけあるが、Zen Coding のダウンロードファイルの中の圧縮していないソースの冒頭のオブジェクトは省略形とその展開の対応を示しているので、これをプリントアウトしておけば、使いたい要素の省略形を見つけることができる。

Zen Coding には省略形の展開以外にも色々な機能があるようだが、さしあたって Ctrl+E の展開を利用するだけでも HTML や CSS のコーディングの苦痛を劇的に取り去ってくれる。



by tnomura9 | 2016-01-07 02:00 | JavaScript | Comments(0)
<< Zen Coding でまとめ... Emmet >>