tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/985/css-nite-in-ginza-vol-49%e3%80%8c%e3%83%90%e3%82%b7%e3%83%a3%e3%83%ad%e3%82%b0-live%e3%80%8d/’;Check会社が早く終わったので、css niteが行われるApple Store銀座に久々に潜入。きょうはバシャログの中の方たちによる「バシャログLIVE」。業界10年というベテランのディレクターさんを中心とする中の方３名から、現場で使えるWebデザイン+コーディングのTipsを惜しげもなく伝授いただいた、大変貴重な一時間。 デザイン編 デザインのテンプレート化による効率アップ。幅960pxのFireworksファイルを使用。 シンボル・スタイルの活用。どんどん自分で登録しカスタマイズすることで、簡単にデザインテイストを比較し作りこんでいくことができる。 Fireworksの矩形スライスでパーツの書き出し。これぞFireworksの隠れた真骨頂。 デザインの時点でスライスを見据えたレイヤーわけをしておくと、作業がスピーディーになる。 コーディング編 原稿テキストには■（画像を入れたいテキスト）と#（リンクを張りたいテキスト）を入れ、正規表現で一気に置換。DWではよく使う正規表現も登録／呼び出しが可能。 横並びのグローバルナビゲーションの実現には、display:table-cellを使用。これはfloatに比べ、解除(clear)の指定が要らないので、cssが簡潔になる。IE6,7対応にはハックも仕込む必要あり。 スニペットの活用。 パンくずリストの実装では、先頭の不要なアイコンをネガティブマージンとoverflow：hiddenで消している。これだとhtmlに余計なクラス名などを入れないで済む。

Continue reading about CSS Nite in Ginza, Vol.49「バシャログ LIVE」