THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
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時の色を同じにしてはダメ。

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

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

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

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

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

第2回勉強会を検討中

次回は参加者を今回とは別な人で、再度同じような内容を開きたいなと検討中。
講師の人と時間を調整しつつ、来月もしくは年明けくらいには行なおうかなと思います。
次回も変わらず人数は少数しか募集できないと思います。

公募するかは未定ですが、参加したい人はご検討しておいてください。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。