読者です 読者をやめる 読者になる 読者になる

htsign's blog

ノンジャンルで書くつもりだけど技術系が多いんじゃないかと思います

Zen-Coding勉強中

意地と根性で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>

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

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

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