コーダーさんは読むといいかも「XHTML&CSS超高速コーディング術」

買ってからだいぶ経つけどとてもいい本なので
紹介しておこうと思います。

気になるところや、すぐ使えそうなことが多く
高校生のとき以来、本にアンダーラインを引いたという。
それくらい実用的です。

蛇足ですが、牧野工房という社名がなんかいいですね。
ITっぽくないけど、職人気質が感じられる社名で。

コーディング時間を短縮させるには？

前半では、コーディング時間を短縮させるために
どれだけ「手戻り」を減らせるかが大切と訴えていました。

とはいえ、今自分の環境だと、
仕事の進め方、社内の体制を含めて考えても
なかなか現実的に難しい状況です。

むしろ、「手戻りはある」と意識して、
どんな無茶ぶりにも耐えられる柔軟なコーディングが
必要なんじゃないかと感じました。
遠回りではあるだろうけど、今はそれが最善ではないかと。

でも環境も少しずつ整えることも大切。
あと、シャドーコーディングで手戻りを減らす
っていうのは、個人の問題なので実践できますね。

ためになったこといろいろ

技術的な内容で、自分がためになったことの
一部を書いておきます。

ブログからソースを拾ってきて、
意味もわからず使っているような CSS も
説明を読んで納得できたものがいくつかありました。

CSSスプライト

これは説明不要でしょうか。
わかりやすかったです。

body に id と class

import.css ですべての HTML ファイルに CSS を適用。
そのときに body に id と class をふってセレクタがかぶるのを防ぐ。
というもの。

機械的につけていると、後々 CSS が触りやすくなります。

ネガティブマージンの使いどころ

崩れるのがこわくてあまり使ってなかったんですが、
けっこう大胆に使ってもいいことが判明。

デザインの幅が広がったり、無駄な div 無駄な float を
減らせます。

width と border を同時に使ってもだいじょうぶな方法

width と border の同時指定はダメ、と覚えていたのですが
ちゃんと理解していれば使えます。

CSS のファイル名とその役割

参考ファイルがダウンロードできるのですが、
そのサンプルの CSS ファイルがすごく参考になります。
これを自分用にカスタマイズして使ってます。

上下マージンの相殺

恥ずかしながら、知りませんでした。
なんか変だなくらいの理解でしたが、よくわかりました。

各ブラウザでテーブルをぴったりに

そこまで厳密にすることってあまりないですが、
1pxもずらさずに、ボーダーを設定できます。

HTMLを見通しよく → <!-- /#wrapper --></div>

これはコーダーさんの共通ルールにしてもいいんじゃないか
というほどのもの。

<div> の閉じタグの前にコメントを入れる。

id であれば、<!-- /#wrapper --></div>
class であれば、<!-- /.section --></div>

を必ずつける。

Dreamweaver の拡張機能で、このコメントを簡単に入れられるものを
作ってくれた人がいるみたいですが、どうやらぼくの環境だと
うまく動作してくれないみたいで、TextExpander でやってます。

参考：コメントを生成して挿入するDreamweaver用拡張機能を作成しました | Topics | DB - KAYAC Designer's Blog （カヤック デザイナーブログ）

少し古い技術を一番効率のいい方法でやる

どこにでてきたか忘れてしまったのでうろ覚えですが、
こんな言葉があったと思います。

少し冷たいような気もしてしまいますが、
実際のビジネスではその通りなんでしょうね。

CSS3 や HTML5 がコーポレートサイトに必要か
と言われれば、まだ ie6 も幅をきかせている時代では
必要ないでしょうし。

といっても、iPhone、ipad もあることだし、
ちゃんとやらなきゃと思いつつ、後回しに・・・

まとめ

初〜中級くらいでコードを書いている人には
とてもためになる内容ではないでしょうか？

また、手戻りを減らすためのファイル管理とか
ディレクターさんにもためになる内容かも知れませんね。

あと、ある程度コーディングをしたことがあって、
用語を知っていると純粋に楽しいと思います。

ぼくの場合だと、ストーリーものを読んでるみたいに
入りこんで読めました。