XHTML＆CSSコーディングハンズオン勉強会に参加した

2008/11/10

カテゴリ：: CSS

タグ：: XHTML; CSS; コーディング

XHTML＆CSSコーディングハンズオン勉強会に参加してきた

先日の日曜日、コーディングを専門としている企業の方と僕と共同して、
「XHTML＆CSSコーディングハンズオン勉強会」というのを行ってみた。

講師はそのコーディング専門の企業の方で、
年間100サイト以上をコーディングを行うという凄腕の方。
今も数百ページにも及ぶサイトのコーディングを行っているとか・・・
僕からしてみたら恐ろしいくらいのスピードでコーディングしている方で、
その方を講師として、今回実践形式の勉強会を開催しました。

コーディングの実践についてなので、まとめることも少ないですが、
勉強会で学んだことなどをメモしておこうと思います。

XHTML＆CSSコーディングメモ

今回の内容も、ざっくりとメモ程度にまとめます。

■メモ

・ソースはテンプレートを作成しておく。
　・必要なことは全てあらかじめテンプレート化。
・業務管理はエクセルなど表計算ソフトを使うと便利
　・必要ページ項目や仕様などを入れておく。
　・使い方によっては最強の管理ツールとなる。
　・チーム内コミュニケーションのきっかけともなるのでは？
　・自分ではどうしても解決できない問題などはToDoリスト化して記入。
・XML宣言はまだしなくていいよね。
・divなどの囲いを示すコメントを入れる場合は、</div>の直前がいい。
　・これはコメントによるバグを回避するため。
・CSSの管理はモジュール事がいい。headerやfooterなど。
・リセットCSSはなくてもいいけど、大量作業のときはあるとはやい。
・Dreamweaverのコードヒントを書き換えると作業がとてもスピーディー
　・例えばfont-sizeの相対値などが簡単にでるようになど
　・Dreamweaverをただ使うよりは使いやすいようにカスタマイズ！
　・Dreamweaverの入力補完機能はやっぱり便利。
・floatとpositionは基本的に知っておく必要があることだけど難しい。
　・floatした場合は必ずwidthとdisplay:inlineを使おう
・floatの高さ確保のclear、うまく行かないときはclearfixの技を使え！
・positionを使う場合は親要素にposition:relative。
・作業をスピーディーにするにはクリップボードの活用はあるといい。
・imgを使った画像置換をする際は背景の指定と、imgにvisibility:hidden。
　・でもそれだけでだめ、imgを囲うaに:hoverでbackground-color指定。
　・ただし、背景指定時の色とhover時の色を同じにしてはダメ。

いかにバグを発生させないように且つスピーディーにできるか、
それがポイントになるけど、それは知っているかどうかによる。

作業をスピーディーにするために

作業をスピーディーにして、１ページ１時間くらいで終わらせるのがベストらしいが、
そのためにはツールの活用は必須となるようだ。

例えばDreamweaverをそのまま使っているよりは、
自分なりにカスタマイズをすると作業スピードはかなり早くなる。
今回の例でいうなら、コード補完部分のカスタマイズなどではないだろうか。
他にもクリップボードを活用して、毎回使うような内容はそこに書いておくといい。
clearfixの事だったり、画像置換時に使うプロパティだったりと、
毎回でてくるようなソースや、普段は使わないけど、いざとなったら必要なソースなど、
そういうのを登録しておくといちいち調べなくてもよくなる。

最初の初期投資に費やす時間が増えてしまうということもあるが、
その後の作業の効率を考えると、設定したりすることは無駄な時間ではないと思う。
Dreamweaverを普段使っているような人は、カスタマイズしてみてはどうだろうか。