サエない日々にさよならを。

Fireworks CS6の角丸設定で「CSSプロパティ」を使うならここに注意!

引越しとか手続きとかでバタバタ状態でしたが、何とか落ち着きましたんで、今のうちに1つ、またFireworks小ネタをUPします。

今回のネタは、デザイナーさんに対してのちょっとした注意を。
特に、デザイン後にコーダー(マークアップエンジニア)さんにファイルを渡す際には気をつけた方が良いかと思います。


CSSプロパティは本当に便利過ぎて泣ける。


Fireworks CS6から『CSSプロパティ』という機能が付きました。
ウィンドウ→『CSSプロパティ』(Ctrl+F7)で小さなウィンドウが出てきますが、
長方形などの図形を選択すると、そこに自動的にCSSコードが出てきます。



角丸とか、グラデーションとかは、いちいち自分で調べて書かなくても、
図形を選択するだけで、コード部分をコピー→CSSファイルに貼り付けでOKという
何とも非常に便利な機能のため、重宝しています。

しかし、ここでひとつ落とし穴を発見。

長方形ツールで角丸設定した図形で、「グループを解除」した時に問題が。

角丸長方形、長方形ツールで角丸設定した図形を用いてほぼ同じように図形を書き、それを「グループ解除」(Ctrl+Shift+G)します。(見分けつけやすいように色は変更してます)

角丸長方形を「グループ解除」した場合。



グループ解除すると…↓



グループ解除されても表示は変わらないです。

長方形ツールでプロパティで角丸設定した場合。



グループ解除すると…↓



グループ解除すると角丸部分がなくなっている!!

角丸調整は今後はこの方法がベストかな?

私はよく、長方形ツールを書いて、プロパティで角丸設定していて、デザイン変更で縦の長さを変える必要が出てきた際、グループ解除して、パスパネル等でパス部分選択→長さ調整してました(拡大・縮小だと角丸が崩れてしまうのでその防止策で)。

しかし、今後はコーダーさんに対して、非常に不便になることが判明。
今後、角丸図形を描いて、グループ解除しないといけない状況がある部分は…

という方法になるかなーと思います(現在、私はきんくまデザインさんコマンドを使用してます)。

いいデザインを作るのも大事ですが、デザイン後にバトンタッチするコーダーさんには、(予想もしてないことも含め)いろいろ負担がかかってくるものです。少しでもストレスなくコーディングをしていただけるように、細かいことにも気を配れたらいいなぁと思っています。


以上、今回もFw小ネタでした。
ちなみにこのネタ、相方から指摘されたものです。ネタ提供感謝です。


More read

改めて見積りトラウマに向き合う。-『フリーランスのための"お見積"の考え方勉強会』に参加してきました。

さくらのレンタルサーバーのMySQLもVer.5.5→5.7に変更+a-blog cms設定メモ。

さくらのレンタルサーバのPHPバージョンとa-blog cmsのバージョンを同時に変更対応したメモ。

《さくらのレンタルサーバ》BlogのSSL証明書を有料SSLから無料SSLに設定変更を行ったメモ。

私が2017年に参加したセミナー・イベントまとめ。《7月〜12月編》

私が2017年に参加したセミナー・イベントまとめ。《1月〜6月編》

Profile Illust

brightflavor

フレーズライン ・ Webデザイナー・グラフィックレコーダー

愛媛県松山市でWebデザイン、UIデザインのお仕事を主に、イラストやアイコン制作、グラフィックレコーディングなども対応中。

制作使用アプリ…Adobe Photoshop、Illustrator、Adobe XD(元Adobe Fireworks Loverなので、今でもご要望があれば使用)。

また、ディレクションとプロジェクトマネジメント系の知識も進行上大事と考えて勉強しているおかげで、デザイナー視点からの提案依頼や進行管理のお仕事も徐々に増えつつあり。

ねことコーヒー、マイナーなマンガと心理学、真相追求系のお話、料理とダンナが好き。気になるセミナー・イベントがあれば、お金と時間と体力が許せば大抵行く。

Entry list

Caterogy list

Tag croud

RSS 2.0 Login