Fireworks CS6の角丸設定で「CSSプロパティ」を使うならここに注意!
引越しとか手続きとかでバタバタ状態でしたが、何とか落ち着きましたんで、今のうちに1つ、またFireworks小ネタをUPします。
今回のネタは、デザイナーさんに対してのちょっとした注意を。
特に、デザイン後にコーダー(マークアップエンジニア)さんにファイルを渡す際には気をつけた方が良いかと思います。
CSSプロパティは本当に便利過ぎて泣ける。
Fireworks CS6から『CSSプロパティ』という機能が付きました。
ウィンドウ→『CSSプロパティ』(Ctrl+F7)で小さなウィンドウが出てきますが、
長方形などの図形を選択すると、そこに自動的にCSSコードが出てきます。
角丸とか、グラデーションとかは、いちいち自分で調べて書かなくても、
図形を選択するだけで、コード部分をコピー→CSSファイルに貼り付けでOKという
何とも非常に便利な機能のため、重宝しています。
しかし、ここでひとつ落とし穴を発見。
長方形ツールで角丸設定した図形で、「グループを解除」した時に問題が。
角丸長方形、長方形ツールで角丸設定した図形を用いてほぼ同じように図形を書き、それを「グループ解除」(Ctrl+Shift+G)します。(見分けつけやすいように色は変更してます)
角丸長方形を「グループ解除」した場合。
グループ解除すると…↓
グループ解除されても表示は変わらないです。
長方形ツールでプロパティで角丸設定した場合。
グループ解除すると…↓
グループ解除すると角丸部分がなくなっている!!
角丸調整は今後はこの方法がベストかな?
私はよく、長方形ツールを書いて、プロパティで角丸設定していて、デザイン変更で縦の長さを変える必要が出てきた際、グループ解除して、パスパネル等でパス部分選択→長さ調整してました(拡大・縮小だと角丸が崩れてしまうのでその防止策で)。
しかし、今後はコーダーさんに対して、非常に不便になることが判明。
今後、角丸図形を描いて、グループ解除しないといけない状況がある部分は…
- 角丸長方形を用いて描く。
- 長方形ツールでプロパティで角丸設定して、どうしても図形の長さを変えないといけない場合は、ひとまず先に図形の長さ(大きさ)変更→「きんくまデザイン」さんが配布している「Fireworksでくずれた角丸を元通りにするコマンド」を使う
という方法になるかなーと思います(現在、私はきんくまデザインさんコマンドを使用してます)。
いいデザインを作るのも大事ですが、デザイン後にバトンタッチするコーダーさんには、(予想もしてないことも含め)いろいろ負担がかかってくるものです。少しでもストレスなくコーディングをしていただけるように、細かいことにも気を配れたらいいなぁと思っています。
以上、今回もFw小ネタでした。
ちなみにこのネタ、相方から指摘されたものです。ネタ提供感謝です。