コーディングはWeb制作の最終工程になります。
特に、HTML・CSSコーディングは少しでも早く終わらせたいです。
かといってここでスピード重視でコーディングをささっと書いて、
後で修正が入った際に見直そうと思ったら自分ですら見辛くなっていて、
無駄に時間を取られてしまった…
ということになりかねません。
少しでも早く、効率のよいコーディングを行うためにお気に入りに入れておくことを
オススメするサイト・ツールを紹介します。
今回取り上げた内容
- ・Zen-coding
- ・コメントを手早く挿入
- ・CSS Selector Generator
- ・CSSのコードを軽量化する
- ・グラデーションはCSSでさくっと作りたい
- ・ベンダープレフィックスを書く手間を省く
[browsershot url="http://code.google.com/p/zen-coding/" width="400"]Zen-coding
Zen-coding - Set of plugins for HTML and CSS hi-speed coding
コードをHTMLをできるだけ早く正確に書くためには必須の機能です。
僕はもはやコレなしではコーディングできない体質になっています…。
例えば、
<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など主要ソフトには大体対応しているのが嬉しいですね。
コメントを手早く挿入
ソースコードにDivが増えてくるとソースが見難くなります。
すこしでも管理のしやすいコードにするために、閉じDivの前に
という具合にコメントを書くことも多いかと思います。
これをショートカットキーで出力させるようにします。
[browsershot url="http://design.kayac.com/topics/2010/05/dreamweaver-extention.php/" width="400"]
・コメントを生成して挿入するDreamweaver用の拡張機能を作成しました
こちらのDWの拡張機能をインストールすることでDWのコマンドメニューに
「閉じタグコメントを挿入」をという項目が出るようになります。
これを閉じタグの手前や後で実行すると、先ほどのようなコードが挿入されるようになります。
このままでも十分便利なのですが、もっと便利に活用するために、
このコマンドをショートカットキーに割り当ててみましょう。
ここで好きなショートカットキーを設定することでサクサクコメントを挿入できるようになります。
ちなみに僕はCtl + Enterキーに割り当ててます。
HTMLをサクサクっと書き上げた後はCSSですね。 [browsershot url="http://css.bashalog.biz//" width="400"] これも本当にお世話になっているツールです。CSS Selector Generator
CSSも書く人によって見やすさにかなり差が出てきます。
CSSも後のことを考えたら見やすいほうがいいに決まってますよね。
これは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名も全部吐き出してて処理重くなりそう…
って心配な方は、
にチェックを入れることでコードの出力を最低限に抑えてくれます。
先ほどのコードを今度は『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"]
コメント、インデントの有無などをオプションで設定できます。
このようなツールをうまく使うことでコーディングをサクサクっと仕上げて、
ドヤ顔で納品していきましょう。
他にもこんなツールがあるよとかあれば是非教えていただきたいです。