ColorFullWeb

カラーがフルな情報配信ブログ。Web関係多め。

【たった1行で】Zen-Coding初心者はまずこの1行を書いてみよう【Zen-Codingできる!】

time 2013/03/17

Zen-Codingとは楽するコーディング手法

現在、会社で教育に携わっていまして「Zen-Coding」について説明した時に新人君の拒絶反応がすごかったのです。
Zen-Codingの食わず嫌いって結構いるのかなと思ったのでその時説明したことを残しておこうと思います。
何かの役に立てば幸いです。

多分けっこう有名ですし、調べればいっぱい紹介記事があります。
どうしても詳しく知りたい人はググてください。

ただ、そんなに詳しく知らなくていいです。
知らなくたってできます。

 
 

【難しいことは抜きにして】覚えるのはたった1行!

↓これだけ!

div#nav>ul>li.link-area*3

↓展開するとこんな感じ。(自分はSublime TextにZen-Codingプラグイン入れてるのでctrl + eで展開します)

<div id="nav">
	<ul>
		<li class="link-area"></li>
		<li class="link-area"></li>
		<li class="link-area"></li>
	</ul>
</div>

チョー簡単でしょ!?

だって【 > 】は入れ子を表してるし、
【 # 】【 . 】はidとclassを表してるってCSSが書ければわかるでしょ?
【 * 】は掛け算ですよね?ただの演算子でしょ?

これだけ分かればZen-Coderだ!

あとはチートシートとかあるから興味が沸いたら見てみればいいじゃない。
きっとたのしい^^b

CSSとかhead要素とかも書けるんだゾ!

 
 

【ちなみに】こんなこともできるよ!

コードは一行で、、、

html:xml>(head>meta:utf+title)+(body>div#wrap>(div#header>(h1>img#logo>a)+div#nav>ul>li*5>a)+(div#content>table>tr*2>td*2>p)+(div#footer+div#copyright))

↓展開すると、、、

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
	</head>
	<body>
		<div id="wrap">
			<div id="header">
				<h1><img src="" alt="" id="logo"><a href=""></a></img></h1>
				<div id="nav">
					<ul>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
					</ul>
				</div>
			</div>
			<div id="content">
				<table>
					<tr>
						<td>
							<p></p>
						</td>
						<td>
							<p></p>
						</td>
					</tr>
					<tr>
						<td>
							<p></p>
						</td>
						<td>
							<p></p>
						</td>
					</tr>
				</table>
			</div>
			<div id="footer"></div>
			<div id="copyright"></div>
		</div>
	</body>
</html>

まぁこんなこともできるよって感じですね。
浮いた時間は他の作業に当てられるね!
食わず嫌いしてる人はちょっと触れてみてね。

down

コメントする