Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

台風こわい、@cappeeです。

6月18日に Adobe Creative Cloud のソフトがメジャーアップデートし、 Dreamweaver や Photoshop、Illustrator などが「CC」 にバージョンアップしました。

今後はアプリのように「CC」内の機能をアップデートする形になるので、バージョン名はずっと「CC」のままということになります。

ということは、バージョンアップによる移行作業はこれが最後!です。きっと。

といってもある程度自動で設定を引き継いでくれていたので、 移行作業はとても楽でした。

サイト管理も引き継がれます!

これから移行するという方のために手動で私が行った作業をメモしておきます。

はじめに

以前投稿して好評だった「Dreamweaver CS6 でオススメの拡張まとめ」でご紹介した拡張も現時点では「CC」でほぼ使えません。

使えないというのもありますし、拡張を入れなくとも「Emmet(Zen-Codingから名称変更)」でカバーできるものが多く必要なくなった機能もあります。

今回は「Emmet」の機能導入と「CC」の各種設定について主にご紹介します。

Emmet(Zen-Coding)の拡張機能

なにわともあれ「Emmet」がないとコーディングが始まらないので真っ先に拡張を探しました。

「Emmet(エメット)」はバージョンアップに伴い「Zen-Coding」から名称変更しています。

インストール方法は、下記のGitHubの画面下の方にある「Installation」の「Emmet.zxp」から拡張ファイルをダウンロードします。

Emmet for Dreamweaver

emmet Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「Emmet.zxp」を開くと、「Acobe Extension Manager CC」が立ち上がりますのでそのまま画面に従って進めば導入が可能です。(まだの方は Acobe Extension Manager CC もインストールしておいてくださいね)

extension 300x224 Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「Acobe Extension Manager CC」に「Emmet」が追加されていればインストール完了です。

「Dreamweaver CC」を開いてコマンドに追加されているか確認します。

emmet1 300x149 Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

念のため「Ctrl+E」(Win)で展開できるか確認してみましょう。
(ちなみに私は押しづらいのでショートカットを「Ctrl+.」に変更しています。)

また、「Emmet」は自分なりに展開する文字列をカスタマイズすることができます。設定用のファイルは下記です。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\Commands\Emmet\snippets.js

私が行ったカスタマイズに関してはこちらをご覧ください。
Zen-Codingを自分なりにカスタマイズしてさらに効率化する方法

コードカラーリングの変更

私はコードカラーをカスタマイズしていますので、その設定ファイルを移行します。

カスタマイズ方法はこちらに記載しています。

[Dreamweaver]コードカラーリングをカスタマイズする

その「Colors.xml」ファイルを下記のフォルダに上書きすれば完了です。(一応バックアップも残しておいてください。)

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\CodeColoring

スニペットの移行

「CS6」など以前のバージョンで作成したスニペットは、「CC」にcsnファイルをコピペすることでそのまま移行することができます。

以前のバージョンのスニペット

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\Snippets

CCのスニペット

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\Snippets

キーボードショートカットの移行

キーボードショートカットの設定ファイルである「Menus.xml」を以前のバージョンのから「CC」へコピペしてみました。

Dreamweaverで設定画面を開いたところメニュー名が文字化けしていたので、これに関しては手動で設定しなおした方が安全かもしれません。

[編集]→[キーボードショートカット]から編集してください。

環境設定

環境設定はほぼ以前のバージョンと同じでしたが、一部だけ変更しました。

自分なりの設定があると思うので、比較してみてください。

ちなみに「CS6」と「CC」は同時に開けません!(Extension Manager は開けました。)

ファイルタイプ/エディター

Dreamweaver Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「Dreamweaverに関連付けるファイルタイプ」を選択します。

また、「コードビューで開く」は以前のバージョンのものをコピペします。私は最近だと「.scss .rb」を追加しました。

同期の設定

同期がクラウド化されてから発揮される便利機能ですね。

Adobe Creative Cloud はPC2台までソフトのインストールが可能なので、環境設定とサイト設定を常に2台で同期することができます!

最初に「CC」を開いた時にも同期についてアラートがでたかと思いますが、環境設定でより細かい設定をします。

Dreamweaver1 Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「自動同期を有効」にしておいた方が楽なのでチェックを入れます。

「同期する設定」は自分の利用状況に合わせてチェックをしてみてください。

いかがでしょうか?

これから楽しい「Creative Cloud」ライフの始まりです。

Pocket
article clipper Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

[Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

こんばんみ、@cappeeです。

今回はFireworksの超便利機能、「9スライス」をご紹介したいと思います。

「9 スライス」機能とは

ef334fcdf01cd7f0ffeffcd8644b78f7 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

角丸の矩形や矩形の中にテキストが入っている場合など、その重要な要素はそのままで、幅や高さを自由に変形できる機能です。

言葉だけだと伝わりにくいかと思うので、「9 スライス」機能を使う2つの方法をご説明します。

9 スライスの拡大・縮小ツール

faad99340de6020c98711453db90b5e6 300x140 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

矩形を選択し、画面左のツールにある「拡大・縮小ツール」の中から「9 スライスの拡大・縮小ツール」を選びます。

f0ef09d874cee86417c9172ea33e667d [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

矩形に4本の破線が表示されるので、もし角丸が破線の内側に入ってしまっている場合は、外側になるように破線をドラッグして調整してください。

b7348c619ea4c8594bd3b746b474f7b7 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

そして周りの黒い点をドラッグして矩形を拡大・縮小したとしても角丸はキレイなまま保たれます。とても便利ですね。

シンボルの9 スライス

023e2e6d22763b9a8028dc6488808036 300x103 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

矩形をシンボルに変換する際に表示されるオプションで「9スライスの拡大・縮小のガイドを有効にする」にチェックをいれます。

矩形の中にテキストなど他の要素も一緒にシンボル化してしまって大丈夫です。

ef334fcdf01cd7f0ffeffcd8644b78f7 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

シンボルをダブルクリックすると破線が表示されますので、角丸に合わせて調整してください。

調整後もう一度ダブルクリックしてもとの画面に戻ったら、“普通の”拡大・縮小ツールで変形してください。

ef334fcdf01cd7f0ffeffcd8644b78f71 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

9スライスのシンボルを使わないと上のように潰れてしまいますが、9スライスのシンボルを使えば図の下のように角丸とテキストはキレイに保たれます。

もし角丸やテキストが崩れたら…「変形を解除」で解決

4919b637981077d6e95cd44f7f8a4b8f 300x162 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

9スライスを使うのを忘れてしまって角丸の矩形を変形してしまった場合、崩れた角丸やテキストは右クリックの[変形]か、画面上ツールバーの[変更]→[変形]から[変更を解除]を選択します。

矩形の場合、拡大・縮小後のサイズのまま角丸が調整されるのではなく、キレイな角丸が適用されていたサイズに戻ってしまうので注意が必要です。

4919b637981077d6e95cd44f7f8a4b8f1 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

上にある潰れた矩形とテキストを選択して「変更を解除」すると、こんな感じで矩形を引き伸ばす前に戻ります。

9スライスの機能がついてからデザインするスピードがかなり早くなったのは間違いないです。

Fireworksにこんなありがたい機能が今後も追加されることを期待してます。

[参考サイト]Fireworks / 9 スライスの拡大・縮小

Pocket
article clipper [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

[Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

どうも、@cappeeです。

私はWebデザインをする時にFireworksを使っています。

グラデーションやフォームなどよく使うデザインのパターンってありますよね。

これ毎回つくっていると、たとえつくるのに1分だとしても、10回つくったら10分、100回つくったら100分、、、とトータルで考えると非効率ですし時間がもったいない。

よく使うデザインは蓄積しておくこと!

それが素早くデザインするコツだと私は思っています。

ということで、Fireworksにある便利な機能な使わないと損です。

スタイル

style [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

例えば、HTMLのテキスト、グラデーション、写真の枠などよく使うデザインやベースになるものは「スタイル」に登録しておきます。

デフォルトで登録されているものは使わないデザインも多いので、スタイルウィンドウの右上にあるメニューから自分だけの「スタイルライブラリを保存」しておくと便利です。

スタイルウィンドウが表示されていない場合は、ツールバーの[ウィンドウ]→[スタイル]で表示できます。

16857944f6e21bec667b3a69a3f9a805 300x143 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

デザインを保存するには、保存したいパーツを選択してスタイルウィンドウの右上か下にある「新規スタイル」を選びます。

塗り、フィルター、ストローク、テキストなどどのプロパティを保存するか細かく選べるのでとても便利ですよ。

スタイルを活用すれば作業が1.5倍は早くなるんではないでしょうか。

共有ライブラリ

67644ee90467df423d5a4a0366200979 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

input や select などフォーム系のパーツやボタンなどは「共有ライブラリ」に登録しておきます。

デフォルトで用意されているライブラリを使ってもいいですし、新しくフォルダをつくって自分でつくったパーツを登録しておくこともできます。

パーツを共有ライブラリに登録する場合は、まずパーツをシンボル化(F8)してその時に表示されるウィンドウの「共有ライブラリに保存」にチェックします。

72be56defad0a82dde289720295ed4eb 300x158 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

共有ライブラリを使えばフォームのデザインが1.7倍は早くなるんではないでしょうか。

リッチシンボル

b3be6f0a1704dab9be403afebe34e064 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

共有ライブラリをさらに便利に使えるのが「リッチシンボル」です。

例えばテキストありのプルダウンを共有ライブラリに登録したとします。

リッチシンボルの特徴は、中のテキストを「シンボルプロパティ」から変更することができてしまうのです。

登録はちと面倒ですが最初だけですし地味に便利な機能と言えます。

リッチシンボルの登録方法はこちらに詳しく書かれてありますのでご覧ください。
【Fireworks 】地味に便利なリッチシンボルと共有ライブラリ

リッチシンボルを使えばフォームのデザインが1.1倍は早くなるんではないでしょうか。

せっかくFireworksにある機能ですので、たまには立ち止まって一度機能をおさらいするのもいいかもですね。

デザインもよく使うパターンは蓄積して、効率化した分早く家にかえりましょう。

Pocket
article clipper [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

Dreamweaver CS6 でオススメの拡張まとめ

【お知らせ】Dreamweaver CC の設定についてはこちらをご覧ください。
Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

こんにちは、@cappeeです。

リカバリ後、後回しにしていたDreamweaverの拡張機能のことを思い出して色々と調べてみました。

調べたところたくさん記事はあるのですがDreamweaverの対応しているバージョンが古かったり、CS6にはすでにデフォルトで機能があったりと整理が必要そうだったので、Dreamweaver CS6 でオススメの拡張を自分なりにまとめました。他にオススメがあればぜひ教えてください!

コーディング効率化:Zen-Coding

なにわともあれまずZen-Codingは入れておかないと始まらないですね。コーディングの効率化には必須の拡張です。

下記の一覧より「Zen Coding for Dreamweaver(バーション)」をダウンロードし、mxpファイルをダブルクリックすると「Adobe Extension Manager」が開くので、承諾してインストールすればOKです。

Zen Coding for Dreamweaver をダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

さらなる効率化のために以前Zen-Codingの展開後のコードをカスタマイズした記事も私の方で公開しているのでぜひそちらもご覧ください。

Zen-Codingを自分なりにカスタマイズしてさらに効率化できた

 Dreamweaver CS6 でオススメの拡張まとめ

文字列からリストを作成

文字列からリストを作成するコマンドです。
原稿があって後からulやolなどのリストタグを追加したい時にとても便利です。

上で紹介したzen-cordingでも簡単にリストを作成出来ますのでzen-cordingを使っていない方はどうぞ。(でも使うことをオススメします!)
ちなみにzen-cordingでリストタグを追加するには、文字列のどこでもいのでマウスを置くかドラッグで選択し、「ul>li*」で展開すれば文字の行毎にliタグが付きます。

コマンドの方に話を戻すと、こちらはmxpファイルではなく、直接コマンドフォルダに下記よりダウンロードしたhtmファイルを追加します。

リストを作成.htmをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

htmファイルは下記の場所、コマンドフォルダに入れてください。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\Commands

画像サイズをリセット

imgタグの画像サイズを簡単に挿入してくれるコマンドです。
プロパティからも画像サイズはリセットできますが、ソースコードを選択すれば部分的にや一括でリセットしてくれるのがとても便利です。

上記と同じくコマンドフォルダにダウンロードしたhtmファイルを入れてください。

画像サイズをリセット.htmをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

画像サイズを半分にリサイズしてRetina対応

imgタグの画像サイズを半分にリサイズしてくれるコマンドです。
スマホサイトの制作でRetina対応する場合、画像を倍で制作してソースコードにその半分のサイズで記載する必要があるので非常に便利です。

上記と同じくコマンドフォルダにダウンロードしたhtmファイルを入れてください。ファイル名が「image_reset_half.htm」となってますので、わかりやすく「画像サイズを半分(Retina).htm」などと変えてしまっても大丈夫です。

image_reset_half.htmをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

閉じタグコメントを生成&挿入:End comment

コードの量が多くなるとミスを防ぐためにも閉じタグにどのIDまたはClassの閉じタグかをコメントしておくとわかりやすくなります。そんな閉じタグのコメントを挿入し、自動でIDまたはClass名を入力してくれる拡張機能です。

End_commentをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

閉じタグ漏れを防ぐ:Close Tags

上記の閉じタグコメントでもどうにもならなくなった時に使う拡張機能です。閉じタグがなかくてデザインが崩れたりした経験はみんなありますよね。その閉じタグ漏れを防ぐいでくれます。

ダウンロードにはAdobe ID が必要です。下記の黄色い「Download」ボタンよりダウンロードし、Zen-Codingと同じくmxpファイルを開いてインストールしてください。

Close Tags をダウンロード

機種依存文字・全角半角変換:character.mxp

以前はフィーチャーフォンの携帯サイト制作でカタカナ→カタカナに変換するために重宝された拡張ですが、それ以外にもWindows用の機種依存文字をMacで文字化けしないように別の文字に置き換えたり、全角数字を半角に変換(もちろん逆も可)したりとても便利です。

Dreamweaver CS3と記載されていますが、CS6でも問題なく使うことができます。ただし、「コマンド」の「その他」に追加されるのでご注意ください。また、色んな拡張を追加していくと表示されなくなる場合がありますので、再度インストールしなおせば大丈夫です。

機種依存文字・全角半角変換をダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

外部リンクのチェック:External Link Checker

外部リンクが有効かをチェックしてくれる拡張機能です。インストールするとコマンドにこれでもかというほど項目が追加されるので注意してください。。使い勝手もあまり良くないので、改善してもらえるとありがたいのですが。

External Link Checkerをダウンロード

ちなみに上記までのオススメの拡張を入れると、Dreamweaverのコマンドにこのように表示されますので、拡張を使うときはコマンドから選択するか、ショートカットを設定してください。

dw extension1 300x281 Dreamweaver CS6 でオススメの拡張まとめ

WordPress用のコードヒント:WordPressCodeHints

私はWordPressをよく使用するのでこのコードヒントはありがたいですね。phpファイルでCtrl+スペースを押すとコードヒントが表示されます。

WordPressCodeHintsをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

MovableType用のコードヒントはこちら。

Movable Type タグライブラリ for Dreamweaverをダウンロード

CSSコードヒントのカスタマイズ

こちらは拡張機能というよりは、DreamweaverのデフォルトであるCSSのコードヒント(CodeHints.xml)をカスタマイズしてコーディングをより効率化するというものです。

例えば、デフォルトだと「w」を入力するとよく使う「width」プロパティを出して欲しいのに「windows」がでちゃうので、そういったのを防いでよく使うプロパティが表示されるようにカスタマイズします。

すでにカスタマイズ済みのCSSコードヒントがないか調べてみると、「widowsプロパティの誤入力を防ぐCodeHints.xml|カラクリエイト」がよく紹介されているのですが2006年公開と古かったので、CS6対応のものを探していたらちょうど公開されたばかりのものがありました。ありがたいですね。

下記よりCSSのコードヒント(CodeHints.xml)をダウンロードしてください。

DreamweaverのCodeHints.xmlをカスタムして入力しやすくする

 Dreamweaver CS6 でオススメの拡張まとめ

コードカラーリングのカスタマイズ

ソースコードが一番見やすいカラーにカスタマイズします。ちなみに私は黒背景にSublime Text2と同じ配色で設定しています。
最初は違和感があるかもしれませんが、色が明確でわかりやすいです。

Dreamweaverのコードカラーリングをカスタマイズする

 Dreamweaver CS6 でオススメの拡張まとめ

スニペットのカスタマイズ

コーディングを効率化させるにはzen-cording+スニペットのショートカットを使うのが一番早いです。HTMLやCSSでよく使うコードを登録しておきます。

私のは配布できるほど整理できてないので、今のところは下記などを参考にしてください。

Dwでコーディングがちょこっと早くなる小技
Dreamweaverのスニペットに登録して作業効率が上がるCSS3まとめ

コード表示のフォント

環境設定を見るとデフォルトでは「MS ゴシック」になっているかと思いますが、最近公開されたAdobeのコード用フォント「Source Code Pro」や「Miguフォント」などに変更してもいいと思います。

個人的には「Source Code Pro」だと見やすいのですが日本語を変更する際の挙動が少しおかしかったり、「Miguフォント」だと少し太く感じだので結局デフォルトに戻してます。。

ただ、試してみる価値はあると思うので下記などを参考にしてみてください。

[速報] ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開
コーディング用フォント

ちなみにCS6で追加しなかった拡張

  • HTML5のタグを表示する拡張(HTML5非対応のCS4以前用のため):html5_tag_suites
  • iPhone向けサイトのテンプレート(最新のiPhone非対応のため):iPhone site extension for Dreamweaver CS4/5
  • CSS3コードヒント(デフォルトのコードヒントもCSS3の規約に伴いアップデートされているため):CSS3_CodeHints

以上になります。

コーディングはスピードが命ですので拡張をうまく利用して効率化したいですね!

Pocket
article clipper Dreamweaver CS6 でオススメの拡張まとめ

_notesフォルダを完全に消す手順

徹夜明けで寝ようか迷っている@cappeeです。

私は普段FireworksとDreamweaver(どちらもCS6)を使用して作業をしていますが、コーディングをしているとつくった覚えのない「_notesフォルダ」が何者かによって勝手に生成されてしまいます。結構邪魔だし、データで納品する場合一度生成されたフォルダを削除するのは面倒です。

notes3  notesフォルダを完全に消す手順

「_notesフォルダ」を生成しない方法が書かれている記事はよく見ますが、デフォルトで生成する指定になっているので、気づいたら大量のフォルダができてしまっていた、、なんてこともあるかもしれません。

すべての「_notesフォルダ」を一気に削除するには設定する”手順”が重要になってきます。今回はその手順も一緒にご紹介します。

1)dwsync.xmlファイルを生成しない

まず、「_notesフォルダ」にある「dwsync.xml」が生成されないようにする設定を行います。

dwsync.xmlとは、ローカルとリモート(サーバー)にあるファイル情報を同期してくれます。同期を行うともしローカルとリモートの更新日時が相違があった場合、ファイルをアップする前に警告してくれます。同じパソコンで同じDreamweaverを使っている場合は警告がでません。

同期の使用目的としては、複数人でファイルを更新する可能性がある場合、誰かがアップしたのと同じファイルをダウンロードせずに修正してアップしようとすると警告がでるので、誤った上書きを防ぐことが可能です。

ただ、必要ない人にとってはかなり邪魔ですし、データをフォルダごとアップするケースもたくさんありますから自動で生成されたファイルがあると困りますもんね。

設定方法(CS6の場合)

[サイトの定義]→[サーバー]→指定したFTP情報を開く→[詳細設定]→「同期情報の保持」のチェックを外す

notes1  notesフォルダを完全に消す手順

チェックを外すと「警告でなくなるけどホントにいいの?」と聞いてきますので、自信を持って[はい]を選択します。

notes2  notesフォルダを完全に消す手順

これで「_notesフォルダ」にあった「dwsync.xml」は生成されなくなります。

2).mnoファイルを生成しない

「_notesフォルダ」にある「.mnoファイル」とは、Fireworksを使ってデザインしている場合にできるDreamweaverとの連携用の設定ファイルです。Dreamweaverで画像を選択してプロパティインスペクターで「編集」をクリックすると、Fireworksで画像が開くというものですが、必要性を感じたことは今のところないですし、それ以上に_notesフォルダが嫌なので、この設定も解除します。

設定方法

[サイトの定義]→[詳細設定]→[デザインノート]→「デザインノートの保持」のチェックを外す

notes4  notesフォルダを完全に消す手順

これで「_notesフォルダ」にあった「.mnoファイル」は生成されなくなります。(引き続き同じ画面で設定するのでウィンドウはそのままで)

 3)生成されてしまった「_notesフォルダ」を全削除

次にやるのがすでに生成されてしまった「_notesフォルダ」をすべて削除するやり方です。

削除方法

上記と同じく[デザインノート]→[デザインノートのクリーンアップ]ボタンを押す

notes5  notesフォルダを完全に消す手順

上記(1)と(2)をやってからクリーンアップしないと削除されませんので手順通りに設定してくださいね。

以上で「_notesフォルダ」がきれいさっぱりなくなったはずです!スッキリ

Pocket
article clipper  notesフォルダを完全に消す手順

[Dreamweaver]スニペットに登録して作業効率が上がるCSS3まとめ

@cappeeです。

Dreamweaverのスニペットって便利ですよね。私はzen-cording+スニペットのショートカットを使うのがコーディングは一番早いと思っています。

そこでDreamweaverのスニペットに登録してあるCSS3の記述をまとめました。1.2倍は間違いなく早くなると思います。

角丸

 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 -o-border-radius: 3px;
 -ms-border-radius: 3px;
 border-radius: 3px;

グラデーション

background: -webkit-linear-gradient(top, #FFF, #CCC);
background: -moz-linear-gradient(top, #FFF, #CCC);
background: -o-linear-gradient(top, #FFF, #CCC);
background: -ms-linear-gradient(top, #FFF, #CCC);
background: linear-gradient(to bottom, #FFF, #CCC);
background: #CCC;

テキストのシャドウ

text-shadow: 0 1px 0 #FFF;

※text-shadowはベンダープレフィックスは必要ありません。

ボックスの黒シャドウ

 -moz-box-shadow: 1px 1px 5px #999;
 -webkit-box-shadow: 1px 1px 5px #999;
 -o-box-shadow: 1px 1px 5px #999;
 -ms-box-shadow: 1px 1px 5px #999;
 box-shadow: 1px 1px 5px #999;

ボックス内側の光彩(グロー)

 -webkit-box-shadow: inset 0 0 5px 0 #DDD;
 -moz-box-shadow: inset 0 0 5px 0 #DDD;
 -o-border-radius: inset 0 0 5px 0 #DDD;
 -ms-border-radius: inset 0 0 5px 0 #DDD;
 box-shadow: inset 0 0 5px 0 #DDD;

ボックス垂直にぼかしなしシャドウ

 -moz-box-shadow: 0 1px 0 #FFF;
 -webkit-box-shadow: 0 1px 0 #FFF;
 -o-box-shadow: 0 1px 0 #FFF;
 -ms-box-shadow: 0 1px 0 #FFF;
box-shadow: 0 1px 0 #FFF;

こちらも参考にご覧ください。

【CSS3】ドロップシャドウやグロー(光彩)をCSSで(box-shadow)
今から始めるCSS3プロパティ text-shadow

ベンダープレフィックスについて

今かなりのスピードで各ブラウザがバージョンアップをしている関係で、新旧幅広く対応させるならベンダープレフィックスはまだなくさない方がいいんじゃないかなという個人的見解です。ぜひ以前の記事もご覧ください。

最新FirefoxとOperaではCSS3のシャドウと角丸はプレフィックスいらないよ

Pocket
article clipper [Dreamweaver]スニペットに登録して作業効率が上がるCSS3まとめ

[Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

もっともっと効率的にコーディングしたい@cappeeです。

Fireworks CS6に「CSSスプライト」が簡単に書き出せる新機能が加わったというので、今回怒涛のコーディング中にどうしても気になって使ってみました。

とても便利です。

CSSスプライトの書き出し方

スプライト用のページをつくって適当に画像をならべてそれぞれスライスします。

css sprite [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

スライスの名前はクラス名をつけてください。

全選択か、書き出したいスライスのみを選択して右クリックし「CSSスプライトを書き出し」を選択します。

ファイル名はスプライト用の画像を読み込む background のクラス名と同じになります。

書き出す画像の形式を選ぶ場合は「オプション」をクリックしてください。

sprite [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

形式は「最適化プリセット」から選択することができますが、PNGの8bitを選択したい場合はデフォルトだと含まれていせんので、あらかじめ「最適化」ウィンドウで指定し、右上にある矢印から「書き出し設定を保存」しておきます。

sprite3 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

保存すると「最適化プリセット」の一覧に表示されるので選択することが可能です。

sprite2 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

任意のフォルダに書き出すと、適当に配置したはずの画像がきれいに配置されたPNGスプライト用のCSSができます。

sprite4 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

画像が多いとファイル名を付けるのに時間がかかったり、どの画像をまとめるのが効率的か考えながらやっていると最初は時間がかかりましたが、次回からは倍速以上で作業できると思います。

一度書きだした画像に追加するとまた配置は変わってしまいますが、スプライト用のCSSをコピペするだけなので楽ちんです。

ページ単位とかカテゴリ単位とか、無駄な画像の読み込みをしないようにどの画像をまとめるのかは最初に考えておいたほうが良さそうですね。

スプライト用のCSS

実際に書き出されたCSSはこちらです。(今回クラス名はデフォルトのままです)

.sprite{ background:url("sprite.png") top left no-repeat; }
 ._r4_c3{ width:152px; height:38px; background-position:-30px -30px; }
 ._r8_c4{ width:20px; height:20px; background-position:-30px -98px; }
 ._r2_c2{ width:137px; height:19px; background-position:-30px -148px; }
 ._r10_c6{ width:15px; height:15px; background-position:-80px -98px; }
 ._r6_c10{ width:12px; height:12px; background-position:-125px -98px; }

コツをつかめば作業倍速&表示スピードの改善にもなっていいことづくめです。

Adobeのサイトでも紹介されているのでこちらもぜひご覧ください。

CSSスプライト書き出し機能の使い方

Pocket
article clipper [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

[Dreamweaver]コードカラーリングをカスタマイズする

引き続き、コーディングに奮闘中の@cappeeです。

デザイナーのみなさんはDreamweaverのコードカラー指定していますか?

私は今までデフォルトで指定されていた色でやっていたのですが、エンジニアに憧れて黒背景のコードカラーに変更しました。これが結構見やすいです。もちろん色の選択次第ですが。

いつもお世話になっているWebデザインのタネさんで、「Dreamweaverのコードカラーリングまとめ」という記事があったので色々と試して自分なりにしっくりくるものを模索していました。今コレかなという設定をメモしておきます。

黒背景に最適なカラーコードリング

一番コードが見やすいと感じたのは、これまたいつもお世話になっているバシャログ。さんで配布されているSublime Text2と同じ配色のカラーコードリングです。

[Dreamweaver] コードビューを Sublime Textエディタ風な黒い画面になるようコードカラーリングを変更してみた

HTMLの画面

codecolor [Dreamweaver]コードカラーリングをカスタマイズする

CSSの画面

codecolor2 [Dreamweaver]コードカラーリングをカスタマイズする

女子的にはこのパッションピンクがなんともカワイイです。

最初少しどぎつく感じるかもしれませんが、色がはっきり要素で分かれているので探しているコードが目に入りやすくなりました。設定も簡単なので騙されたと思って一度試してみてください。

Dreamweaverのコードカラーリングの変更方法

こちらの配布先から「Colors.xml」をダウンロードしたら、下記の場所にある同じファイルを念のためバックアップとってから上書きします。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver (バージョン)\ja_JP\Configuration\CodeColoring

Dreamweaverを起動し、Ctrl+Uで「環境設定」を開き、「コードカラーリング」の「デフォルトの背景」を「#272822」に書き換えます。

codecolor3 [Dreamweaver]コードカラーリングをカスタマイズする

テキストのカラーを設定する

上記に加えてひとつだけ設定したのは「テキスト」のカラーです。同じく「環境設定」の「コードカラーリング」から、ドキュメントタイプの「テキスト」を選択し、「カラーリングスキームの編集」ボタンを押します。「テキストカラー」を白「#FFF」に設定して完了です。

codecolor4 [Dreamweaver]コードカラーリングをカスタマイズする

これで.htaccessも問題なく見えます。

Sublime Text2使いこなしたらカッコイイだろうなぁ。ぜひデモご覧になってください。
Sublime Text

Pocket
article clipper [Dreamweaver]コードカラーリングをカスタマイズする

[Fireworks]ショートカットをカスタマイズして効率化!絶対に追加すべきショートカット3つ

こんばんは、@cappeeです。

Fireworksのショートカットはデフォルトのままだとよく使うマスクが指定されてなかったりして不便です。必ずカスタマイズ、追加して作業を効率化すべきです。

先日パソコンの不具合によりリカバリしてしまったので、その時に設定したショートカットをメモしていきます。

ショートカットをカスタマイズ

Fireworksの[編集]から[キーボードショートカット]を選択して、「現在のセット」を右にあるアイコンから「複製」します。

下記は最低限追加で指定したほうがいいと思うショートカット3つです。この3つだけでも格段にスピードが上がります。

  • カンバスサイズ(C)… Ctrl+M
  • カンバスカラー(L)… Ctrl+,
  • マスクとしてグループ化(G) Ctrl+Alt+Shift+B

デフォルトも含めてショートカットマスターになればかなりさっくさくで作業できますね。私は最近ツールのショートカットも使うように気をつけてます。デフォルトも含めよく使うショートカットもまとめたいな。

ショートカット一覧

上記と同じく[キーボードショートカット]を選択して、右上にある「HTML形式でセットを書き出し」をすると設定されているショートカットの一覧が表になって見やすく確認することができます。忘れてしまった時など使えるかもしれません。

ショートカットのバックアップ

せっかく今までコツコツと指定してきたショートカットならそれもバックアップ取っておきたいですよね。私は突然やることになったリカバリを経験して、月1回必ずバックアップを取るようにしてます。CS6のショートカットデータはここにあるので必要ならバックアップも取っておきたいですね。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Fireworks CS6\Japanese\Keyboard Shortcuts

その他のバックアップをとるデータのリストはこちらをご覧ください。

月1回のバックアップデーにバックアップするものリスト

 

Pocket
article clipper [Fireworks]ショートカットをカスタマイズして効率化!絶対に追加すべきショートカット3つ

[Fireworks]線つき矩形の角丸をキレイに見せる方法

こんばんは、@cappeeです。

Fireworksで角丸のボタンをデザインするときに、外側に線を引いて、更に内側に1pxの線を引きたい場合のお話。

結論から言うと、一番外側の線を「内側」もしくは「中央」指定にすると角丸がジャギってしまうんです。①だけジャギっているのわかりますか?

kadomaru [Fireworks]線つき矩形の角丸をキレイに見せる方法

わかりやすいように拡大。

kadomaru2 [Fireworks]線つき矩形の角丸をキレイに見せる方法

こういうボタンを作りたい場合の一番角丸がキレイで簡単な方法は、

  1. 作りたいボタンのサイズから-2pxした矩形を作成。
  2. 一番外側の濃い線は「外側」指定してカラーを選択。
  3. 同じ矩形を複製して薄い線を「内側」指定して中にグラデーションをかける。

という具合です!

「Photoshopライブ効果」を使った方法

線を指定するには上記以外にも「Photoshopライブ効果」を使った方法もあります。「Photoshopライブ効果」の「線」の「内側」は角丸がキレイに表示されるのでこちらでも線分の幅を調整しなくてもいいので便利です。だた、上記のように二重線を引きたい場合は、「Photoshopライブ効果」の「外側」と通常の線の「内側」を指定する必要がありますが、矩形を複製せずに簡単にできるので追加でご紹介します。(2012.12.17追記)

  1. 作りたいボタンのサイズから-2pxした矩形を作成。
  2. 一番外側の濃い線は「Photoshopライブ効果」の「線」の「外側」指定してカラーを選択。
  3. 薄い線は通常の線の「内側」を指定して中にグラデーションをかける。

ちなみに、線自体にグラデーションがかけられる機能Fireworksにも早くほしいですよね。IllustratorにはCS6から新機能としてあるみたいですけどっ。

Pocket
article clipper [Fireworks]線つき矩形の角丸をキレイに見せる方法