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

会社が早く終わったので、css niteが行われるApple Store銀座に久々に潜入。
きょうはバシャログの中の方たちによる「バシャログLIVE」。業界10年というベテランのディレクターさんを中心とする中の方3名から、現場で使えるWebデザイン+コーディングのTipsを惜しげもなく伝授いただいた、大変貴重な一時間。

デザイン編

  • デザインのテンプレート化による効率アップ。幅960pxのFireworksファイルを使用。
  • シンボル・スタイルの活用。どんどん自分で登録しカスタマイズすることで、簡単にデザインテイストを比較し作りこんでいくことができる。
  • Fireworksの矩形スライスでパーツの書き出し。これぞFireworksの隠れた真骨頂。
  • デザインの時点でスライスを見据えたレイヤーわけをしておくと、作業がスピーディーになる。

コーディング編

  • 原稿テキストには■(画像を入れたいテキスト)と#(リンクを張りたいテキスト)を入れ、正規表現で一気に置換。DWではよく使う正規表現も登録/呼び出しが可能。
  • 横並びのグローバルナビゲーションの実現には、display:table-cellを使用。これはfloatに比べ、解除(clear)の指定が要らないので、cssが簡潔になる。IE6,7対応にはハックも仕込む必要あり。
  • スニペットの活用。
  • パンくずリストの実装では、先頭の不要なアイコンをネガティブマージンとoverflow:hiddenで消している。これだとhtmlに余計なクラス名などを入れないで済む。