XHTML&CSS超高速コーディング術 LIVE!
株式会社スキルパートナーズ
大藤 幹＆大杉 充
- 会社ロゴは沖縄だからってゴーヤじゃないよ！
- 通称「スキル大杉」と呼ばれている
- おすすめ本：「７つの習慣」
- 今までで一番影響をうけた本
- きこりのエピソード。「歯を研ぐ時間がないために能率が落ちている」
きょうのなかみ
- コーディング作業が長引く原因と情報の管理
- コーディング作業の流れとポイント
- スキル大杉のコーディング逆Tips
コーディング作業が長引く原因と情報の管理
- はやくコーディングするには？
- 速度をあげる
- ムダな作業をはぶく
→2番が非常に大事
- 作業が長引く原因
- 仕様構成の変更
- 原稿素材の変更
- 情報の管理方法が不適切
- 作業手順が不適切
- スキルが低い
→「手戻りを最小限におさえる」Minimizing Reworking
[サイト管理ファイルの活用]
- １案件１エクセルで管理しきる！！ へー！！
- 作業工程一覧
- 終わったら丸をつけてカウントして、進捗状況を集計する
- 担当者別に色分け
- より共通する部分から先につくる
- テンプレート作成
- ページテンプレートの作成
- 基本的テキスト要素のCSS設定
- パーツテンプレートの作成
- 各ページ作成
- ページテンプレートからファイルを作成
- パーツテンプレートを組み込む
- テンプレート化されていない部分を作成
- テキスト・画像の流し込み
＃わかっちゃいるけどこれが上手くいかないのよ
- ShadowCording （大杉さんの造語）車道でコーディング！
→実際に始める前に脳内で一度コーディングする
「すべてのものは２度作られる by７つの習慣」
デモ：9ページのサイト
- パーツテンプレート作成デモ
- パーツの割り出し：共通のパーツを割り出す
- シャドーコーディングとスライス
- コーディング
- チェック
コーディング作業の流れとポイント
スキル大杉のコーディング逆Tips
- classはふたつつけるな class="classA classB"
.classA {}
.classA .classB{}
のときにIE6で.classBしか認識されない
- div要素を無理に減らすな
きょうのポイント
- きちんと記録してわかるように示す
- より共通する部分から順に作る
- シャドーコーディングをする
設計が大事で、ZenCordingなんかで打つスピードだけあげてもだめ
質疑応答
- EXCELの共有について
→共有設定、GoogleDocumentなどを使いましょう
＜まとめ＞
FWで数字を決めて一気にCSSを組むべし。
＜感想＞
コーディングを実演してくれたのがとても参考になりました。で、思ったほど高速じゃない！（笑）。このくらいできれば「コーディング専門のプロ集団」「高速コーディング」を名乗っていいのか〜とコーディング能力に自信のない私も安心しました。
スライスはFWにおまかせ！は素晴らしい…けど、後からこまごまPSD修正が入るときどうするのかなあ。
デモで制作したのがごくベーシックなサイトでまだダミーテキスト＆画像という例なのが、ややがっかり。そのレベルならどうやってもそう苦労なくコーディングできるやん…。地模様あり透過ありとかハミダシデザインとか、デザインで気をきかせたら超めんどくさくなるときの高速コーディング術が知りたかったです。
