*

今更ながらの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

便利になった無料クラウドサービス

クラウドって言葉聞くようになって久しいです。 マシンもairにしちゃったことですし、 クラウドサービスもおおいに活用しよ

no image

連携できぬ

そういえば旦那さんが「Facebook」がどうこう言ってて、そういえばアカウントだけ取っていた。 Facebook 「手

no image

NAVERフォトエディター

会社の人が教えてくれたwebサービス。 今までも画像加工するためのwebサービスはあったけど、 なんやらかんやら結構使い

:beforeや:afterを使用した際、アイコンとテキストの上下を中央に合わせる

毎回やり方を忘れてしまうので自分用のメモです。 ※スマホ用でやってるので、IEなどのブラウザでは確認してません

CPIサーバーでデータベースを追加する

しばらくすると忘れてしまうので、またいつものように自分用のメモです。 管理画面に沿ってやっていけばわかることなんですが、

コメントを残す

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


*

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

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

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

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

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

実は先月で退職しました

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

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