[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まとめ

[Dreamweaver]CS6にスニペットとショートカットキーを移行する方法(Win7)

こんにちは、@cappeeです。

やっと私も「 [Dreamweaver]CS6にスニペットとショートカットキーを移行する方法(Win7)Adobe Creative Cloud」にしました!

DreamweaverやFireworksがCS6で使えるわけです。

年間プランだと月額5,000円ですが、なんといっても新しいバージョンがでたら月額費用内でアップデートできるのが嬉しい。嬉しすぎますね。

古いバージョンのソフトでカスタマイズしたスニペットやショートカットは効率化の宝物ですので絶対CS6に移行しないとですね。

Dreamweaver CS6 にスニペットを移行する

以下のフォルダにスニペットが格納されているので、旧バージョンからCS6にコピペしてください。

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

デフォルトで表示されているスニペットが必要ない場合は以下のスニペットフォルダにあるデータを念のためローカルにバックアップをとってから削除してください。

C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\Snippets

Dreamweaver CS6を起動するとスニペットが変更されているかと思います。

Dreamweaver CS6 に設定したショートカットキーを移行する

Dreamweaverは「編集」→「キーボードショートカット」でショートカットをカスタマイズすることができます。

旧バージョンから設定を移行する場合は以下のフォルダにあるファイルを新バージョンのフォルダにコピペしてください。

デフォルトの「Menus.xml」ファイルは必ずローカルにバックアップをとっておきましょう。

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

以上です。

エクステンションのインストールも忘れずに!

私はエクステンションがCS6に対応していない場合もあると思ったのでひとつひとつ手動でインストールしなおしました。

あと、使ってないエクステンションの見直しもかねて。

それではまた。

Pocket
article clipper [Dreamweaver]CS6にスニペットとショートカットキーを移行する方法(Win7)