Zen-Coding勉強中 - htsign's blog

意地と根性でZen-Codingだけを使ってウェブサイトのひな形っぽいのを無理やり作ってみる。

html:5>#container>(header>img[alt=test title=logo]+nav>ul.menu.horizontal>li*4>a[href=top$.html])+(section#main>(#sidebar>nav>ul.menu.vertical>li*7>a[href=sidemenu$.html])+(section>form:post#sender>(p#fText>input:t[size=20])+(p#fRadio>input:r[name=hoge value=item$]*4)))+footer>(nav>ul.menu.horizontal>li*4>a[href=bottom$.html])+address+a:mail

これを展開すると以下のようになる。

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="container">
    <header>
      <img src="" alt="test" title="logo" />
      <nav>
        <ul class="menu horizontal">
          <li><a href="top1.html"></a></li>
          <li><a href="top2.html"></a></li>
          <li><a href="top3.html"></a></li>
          <li><a href="top4.html"></a></li>
        </ul>
      </nav>
    </header>
    <section id="main">
      <div id="sidebar">
        <nav>
          <ul class="menu vertical">
            <li><a href="sidemenu1.html"></a></li>
            <li><a href="sidemenu2.html"></a></li>
            <li><a href="sidemenu3.html"></a></li>
            <li><a href="sidemenu4.html"></a></li>
            <li><a href="sidemenu5.html"></a></li>
            <li><a href="sidemenu6.html"></a></li>
            <li><a href="sidemenu7.html"></a></li>
          </ul>
        </nav>
      </div>
      <section>
        <form action="" method="post" id="sender">
          <p id="fText"><input type="text" name="" id="" size="20" /></p>
          <p id="fRadio">
            <input type="radio" name="hoge" id="" value="item1" />
            <input type="radio" name="hoge" id="" value="item2" />
            <input type="radio" name="hoge" id="" value="item3" />
            <input type="radio" name="hoge" id="" value="item4" />
          </p>
        </form>
      </section>
    </section>
    <footer>
      <nav>
        <ul class="menu horizontal">
          <li><a href="bottom1.html"></a></li>
          <li><a href="bottom2.html"></a></li>
          <li><a href="bottom3.html"></a></li>
          <li><a href="bottom4.html"></a></li>
        </ul>
      </nav>
      <address></address>
      <a href="mailto:"></a>
    </footer>
  </div>
</body>
</html>

なんとなくそれっぽくなった、と思う。
まぁここまで長いコードを書くようなもんじゃないんだけどね。これ。

こういうの書いてはすぐ捨てるってのをやってるうちに覚えるんじゃないかと勝手に思ってる。

早く慣れて息をするように書けるようになりたい。
ネストの部分はまだ意識しないと書けない。時間かかる。難しい。