デザインとコーディングの連係プレイ (2007/1/28記)
某F社さまのホームページの、メニュー部分ですが、一応CSSにより、背景画像の位置を指定する方法によるロールオーバー効果(いわゆる画像置換)をつけていたものの、現状の方法よりもっとCSSコードを軽く出来る方法を思いついたので、それを試してみることにしました。
この方法だと、メニューボタンの画像も比較的簡単に作成できるし、HTMLの構造的にも特に問題も起きず、SEOの効果も期待できます。
今までは、メニュー項目ごとにリストタグに個別のIDを振って、CSSもa属性とa:hoverにそれぞれbackground-imageのpositionを設定するなど、ややこしくてCSSコードが重くなりがちでしたが(こうやって書くだけでもややこしい)、今回の場合は、aもa:hoverもひとつづつ書けばいいので、ずいぶんと楽です。
デメリットとしては、どんなデザインのボタンでも使えるわけではなく、この方法でいくことをあらかじめ想定したデザインを考えなくてはならないことです。
こういう部分では、私のように、デザインとコーディングの作業を両方やっている場合に連携がスムーズですね。というか、スムーズもなにも・・・自分でやってるんだから。(笑)
つまり、コーディングの都合を考えながら(コーディングしやすい)デザインをしていくことが可能ですよね。
もしこれが、デザインとコーディングを別々の担当者がやっているとしたら、お互いの意思の疎通が充分になされていなければ、うまく仕事が進まず、大きなロスにつながります。
すみません。今回は専門用語が多数出現してますので、一般の方には少々わかりづらい内容となってしまいました。m(_ _)m


