HTMLコーディングを１秒でも早く終わらせるためにお気に入りに入れておきたいサイト・ツール集

コーディングはWeb制作の最終工程になります。
特に、HTML・CSSコーディングは少しでも早く終わらせたいです。

かといってここでスピード重視でコーディングをささっと書いて、
後で修正が入った際に見直そうと思ったら自分ですら見辛くなっていて、
無駄に時間を取られてしまった…
ということになりかねません。

少しでも早く、効率のよいコーディングを行うためにお気に入りに入れておくことを
オススメするサイト・ツールを紹介します。

今回取り上げた内容

Zen-coding

[browsershot url="http://code.google.com/p/zen-coding/" width="400"]

Zen-coding - Set of plugins for HTML and CSS hi-speed coding

コードをHTMLをできるだけ早く正確に書くためには必須の機能です。

僕はもはやコレなしではコーディングできない体質になっています…。
例えば、

body>div#wrapper>(div#left_box>table>tr4>td2)+(div#right_box>ul>li*5>a>img[src="sample_$.jpg" alt="$"])
と、このように書いてあげて、文末で特定のキーを押すと、 

<body>
    <div id="wrapper">
      <div id="left_box">
        <table>
          <tr>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <div id="right_box">
        <ul>
          <li><a href=""><img src="sample_1.jpg" alt="1" /></a></li>
          <li><a href=""><img src="sample_2.jpg" alt="2" /></a></li>
          <li><a href=""><img src="sample_3.jpg" alt="3" /></a></li>
          <li><a href=""><img src="sample_4.jpg" alt="4" /></a></li>
          <li><a href=""><img src="sample_5.jpg" alt="5" /></a></li>
        </ul>
      </div>
    </div>
  </body>

なんとたったの一行でここまで書くことが出来ました！！
画像のurlの部分も連番を適応することができ、
かなりの時間を削減することが出来ますね。

zen-codingの導入は制作に利用しているソフトの拡張機能としてインストールします。
Dreamweaverをはじめ、Coda、Espresso、Vimなど主要ソフトには大体対応しているのが嬉しいですね。

・ zen-codingチートシート

・ Zen-Codingで楽々コーディング! + コツ1つ

コメントを手早く挿入

ソースコードにDivが増えてくるとソースが見難くなります。
すこしでも管理のしやすいコードにするために、閉じDivの前に

という具合にコメントを書くことも多いかと思います。
これをショートカットキーで出力させるようにします。

[browsershot url="http://design.kayac.com/topics/2010/05/dreamweaver-extention.php/" width="400"]

　・コメントを生成して挿入するDreamweaver用の拡張機能を作成しました

こちらのDWの拡張機能をインストールすることでDWのコマンドメニューに
「閉じタグコメントを挿入」をという項目が出るようになります。
これを閉じタグの手前や後で実行すると、先ほどのようなコードが挿入されるようになります。

このままでも十分便利なのですが、もっと便利に活用するために、
このコマンドをショートカットキーに割り当ててみましょう。

Dreamweaver -> キーボードショートカット -> コマンド -> 閉じタグコメントを挿入

ここで好きなショートカットキーを設定することでサクサクコメントを挿入できるようになります。
ちなみに僕はＣｔｌ ＋ Ｅｎｔｅｒキーに割り当ててます。

CSS Selector Generator

HTMLをサクサクっと書き上げた後はCSSですね。
CSSも書く人によって見やすさにかなり差が出てきます。
CSSも後のことを考えたら見やすいほうがいいに決まってますよね。

[browsershot url="http://css.bashalog.biz//" width="400"]

・CSS Selector Generator

これも本当にお世話になっているツールです。
これはHTMLのコードからCSSのフォーマットを出力してくれるツールです

例えば、先程zen-codingで吐き出したHTMLを使って実行してみると…


  @charset "UTF-8";

  /* ///////////////////////////////////////////////////////////////////

  [wrapper]
    [left_box]
    [right_box]

  /////////////////////////////////////////////////////////////////// */

  a:link {
  }
  a:visited {
  }
  a:hover {
  }
  a:active {
  }

  /* =========================================================
  wrapper
  ========================================================= */
  div#wrapper {
  }

  /* =========================================================
  left_box
  ========================================================= */
  div#wrapper div#left_box {
  }

  div#wrapper div#left_box table {
  }

  div#wrapper div#left_box table tbody {
  }

  div#wrapper div#left_box table tbody tr {
  }

  div#wrapper div#left_box table tbody tr td {
  }

  /* =========================================================
  right_box
  ========================================================= */
  div#wrapper div#right_box {
  }

  div#wrapper div#right_box ul {
  }

  div#wrapper div#right_box ul li {
  }

  div#wrapper div#right_box ul li a {
  }

  div#wrapper div#right_box ul li a img {
  }

このようなコードを吐き出してくれます！！
ただこれ、html要素もid、class名も全部吐き出してて処理重くなりそう…
って心配な方は、

id、class セレクタからHTMLの要素タイプ名を省略
id セレクタを複数記述しない

にチェックを入れることでコードの出力を最低限に抑えてくれます。

先ほどのコードを今度は『HTMLの要素タイプ名を省略』にチェックを入れて再出力してみましょう。

  @charset "UTF-8";



  /* ///////////////////////////////////////////////////////////////////



  [wrapper]
    [left_box]
    [right_box]



  /////////////////////////////////////////////////////////////////// */



  a:link {
  }
  a:visited {
  }
  a:hover {
  }
  a:active {
  }



  / =========================================================
  wrapper
  ========================================================= /
  #wrapper {
  }



  / =========================================================
  left_box
  ========================================================= /
  #wrapper #left_box {
  }



  / =========================================================
  right_box
  ========================================================= /
  #wrapper #right_box {
  }

今度はすっきりしました。
Divの構造も最初に把握することができるので、
別な制作会社さんが作成したサイトを引き継いだ時に、
こんなふうに綺麗に書かれていたら気分がイイですよね。

CSSのコードを軽量化する

<p>先ほどのように見やすいコードは大事なのですが、<br />
  スマートフォンなどのいかに描写速度をあげるかといったことが重要視されるサイトの場合、<br />
  できるだけ無駄なコメントは削除して、軽量化を図りたいです。</p>
  <p>
  [browsershot url="http://sassience.com/" width="400"]</p>
<p>
    ・<a href="http://sassience.com/">SASSIENCE ～ 世界が嫉妬するCSSへ</a>
  </p>
  <p>おや？どこかで聞いたことのあるキャッチフレーズ…<br />
    …いや、きっと気のせいですね。<br />
    コードのインデントを綺麗にして出力し直してくれるサイトです。<br />
    出力のタイプは『しっとりリッチタイプ』と『軽やかスムースタイプ』があり、<br />
    後者を選択すると、各プロパティを一行で書いてくれます。<br />
    先ほどのコードに少しCSSを書き足してみました。</p>



      / =========================================================
      wrapper
      ========================================================= /
      #wrapper {
        width:960px;
        border:1px solid;
        background-color:black;
        font-size:14px;
      }



  /* =========================================================
  left_box
  ========================================================= */
  #wrapper #left_box {
    float:left;
    width:70%;
    background:url("sample.gif") repeat-x 0 0;
  }

  /* =========================================================
  right_box
  ========================================================= */
  #wrapper #right_box {
  width:30%;
  font-size:75%;
  }
  </pre>

<p>これを出力させてみます。</p>
<pre class="css" name="code">
  /* =========================================================
  wrapper
  ========================================================= */
  #wrapper { width: 960px; border: 1px solid; background-color: black; font-size: 14px; }

  /* =========================================================
  left_box
  ========================================================= */
  #wrapper #left_box { float: left; width: 70%; background: url("sample.gif") repeat-x 0 0; }

  /* =========================================================
  right_box
  ========================================================= */
  #wrapper #right_box { width: 30%; font-size: 75%; }
 </code></pre>

<p>おおお！一行になりました！！<br />
  先ほどのCSS Selector Generatorと併せて利用することで綺麗で軽量化されたコードに仕上げることができそうですね。</p>

グラデーションはCSSで作りたい

[browsershot url="http://www.colorzilla.com/gradient-editor//" width="400"]

Ultimate CSS Gradient Generator

<p>中の文字がベタ打ちだけど、背景はグラデーションのボタンの時などに、<br />
困るのが文字サイズを変更した際にデザインが崩れてしまうことですよね…<br />
かといってCSS3でグラデーションを書くのも面倒だし…という時に使えるツールです。<br />
クロスブラウザに対応したコードを吐き出してくれるのでとても便利です。</p>

ベンダープレフィックスを書く手間を省く

[browsershot url="http://prefixmycss.com/" width="400"]

prefixMyCSS

コメント、インデントの有無などをオプションで設定できます。

このようなツールをうまく使うことでコーディングをサクサクっと仕上げて、
ドヤ顔で納品していきましょう。

他にもこんなツールがあるよとかあれば是非教えていただきたいです。