*

今更ながらのZen-Coding

   

もう半年前くらいに盛り上がってたような気がする「Zen-Coding」。
すんごい今更入れてみました。
macなら「Coda」ってエディタで使えるよ〜と至るとこに書いてあって、そのエディタも非常に気になってはいたのですが、なにぶん有料ですし。。
次の職場はwindows環境だったりするとさらに意味がなさげなので、とりあえずDreamweaverに入れました。

Dreamweaver用にダウンロード

ダウンロードしたものをダブルクリックでインストールして完了。
とりあえずいろんなところを参考に試すと…

※展開は「control + , 」
html:5→展開

titleタグの下にcssとjsのリンク追加。
link:css→展開
script:src→展開

bodyタグ内にheaderとcontentsとfooterなどの大枠divを追加。
#platform>(#header.clearfix>ul#gnav>li*5>a)+(#contents.clearfix>(#snavarea)+(#main))+
(#footer.clearfix>ul#fNav>li*5>a)→展開

さらにmainのdiv内にtableを追加。
table.solid>(th.w50+td.w80*4)+(th+td*4)+(th+td*4)→展開
table.solid>(th.w100*4)+(td*4)+(td*4)+(td*4)→展開

結果…

<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all">
    <script type="text/javascript" src=""></script>
</head>
<body>

    <div id="platform">
      <div id="header" class="clearfix">
        <ul id="gnav">
          <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 id="contents" class="clearfix">
        <div id="snavarea"></div>
        <div id="main">

        <table class="solid">
          <th class="w50"></th>
          <td class="w80"></td>
          <td class="w80"></td>
          <td class="w80"></td>
          <td class="w80"></td>
          <th></th>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <th></th>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </table>

        <table class="solid">
          <th class="w100"></th>
          <th class="w100"></th>
          <th class="w100"></th>
          <th class="w100"></th>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </table>

        </div>
      </div>
      <div id="footer" class="clearfix">
        <ul id="fNav">
          <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>

</body>
</html>

という感じになりました。
便利ですねぇ…こりゃあ使いこなしたら早いですわ。

 -Web

Sponsored link

Sponsored link

  関連記事

no image

同一html内でPC用とスマホ用の振り分けのjs

よく使いそうな感じのメモです。 メディアクエリではなくて単純に振り分けです。

no image

ドメインを変更してみました

「そろそろちゃんとドメイン考えないとかな〜」ということで、今更ですがドメイン変更してみました。 これで、いいかげんにちゃ

no image

MacでPDFを結合する方法

地味なことにいたく感動してしまったので書いちゃいます。 【MacでPDFを結合する方法】 1)結合するそれぞれのPDFを

Windows7とMacOSXのIPアドレスの確認の仕方

今更だけど、触らないから忘れちゃってるPCのIPアドレス確認についてです。 ますは、Windows7での確認の仕方。Ma

no image

ドラえもん素敵っす

素直にすごいなぁ〜と思いました。 画像を一切使わずにCSS3だけでドラえもんを描いてみた! CSS3かぁ。。やっとかない

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ