Dreamweaver CC うれしい新機能 CSS デザイナー

新機能 CSS デザイナー

新しいDreamweaver(以下DW)になって、嬉しい気のは、CSSデザイナーです。この機能を使えば簡単に、グラフィカルなCSSプロパティを作成できます。

FireworksCSS3 GENERATORを使えば、実現できていましたが、DW単体で実現可能になりました。

20130707v

実施例

私のサイトは、1週間前までは、FWで作成した画像をペタッと貼り付けていました。右側のサイドバーみだし

h2green

そして、その上にテキストを置いていました。

画像を使うデメリット

  • 2行表示にできない
  • 画像ファイルを使用する分、データが大きくなる
  • 文字の大きさにあわせて、画像の大きさを変えるのが困難
  • 横幅の変更が簡単ではない

今は、画像を使わずに、このようになっています。

20130707w

CSS3のデメリット

  • IE8(XPユーザー)で、参照できない

このデメリットに関しては、FireFoxやChromeなどを使うと解決できること。参照自身には、問題がないことから許容するのが一般的です。

実施方法

とても簡単です。DWを起動します。

次に新規作成グループの中の「HTML」を選択します。

すると、HTML5のひな形があらかじめ挿入されています。「分割」と「ライブ」を押して、反映結果を閲覧できるようにします。

20130710a

つぎに、カーソルを<body>タグの中に移動し、[Ctrl]+[1]を押したあと、みだしと入力します。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
<h1>みだし</h1>
</body>
</html>

右側の「CSSデザイナー」タブのソースの「+」から「ページで定義」を選択

20130710

すると以下のようにスタイルタグが追加されます。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css">
</style>
</head>
<body>
<h1>みだし</h1>
</body>
</html>

次にスタイルタグの中にh1{}と入力します。


<style type="text/css">
h1{
}
</style>

あとは、右側の「プロパティ」で設定します。

20130710c

私のお気に入りは、gradient指定です。クリックすると。

20130710b

細かくグラデーション指定できます。

20130710c

雛形がないと大変ですね...

私が設定したのは、以下の設定

</pre>
h1{
 background-color: #00B300;
 border-radius: 6px;
 padding-top: 6px;
 padding-left: 15px;
 font-size: 16px;
 line-height: 1;
 border-width: 0;
 /* Firefox v3.6+ */
 background-image: -moz-linear-gradient(50% 0% -90deg,rgb(255,128,0) 0%,rgb(255,147,38) 100%);
 /* safari v4.0+ and by Chrome v3.0+ */
 background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,121,0,1.00)),color-stop( 100% , rgba(0,140,0,1.00)));
 /* Chrome v10.0+ and by safari nightly build*/
 background-image: -webkit-linear-gradient(270deg,rgba(0,121,0,1.00) 0%,rgba(0,140,0,1.00) 100%);
 /* Opera v11.10+ */
 background-image: -o-linear-gradient(-90deg,rgb(255,128,0) 0%,rgb(255,147,38) 100%);
 /* IE v10+ */
 background-image: -ms-linear-gradient(-90deg,rgb(255,128,0) 0%,rgb(255,147,38) 100%);
 background-image: linear-gradient(180deg,rgba(0,121,0,1.00) 0%,rgba(0,140,0,1.00) 100%);
 /* Firefox v3.5+ */
 -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.30);
 /* Safari v3.0+ and by Chrome v0.2+ */
 -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.30);
 /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
 box-shadow: 2px 2px 2px rgba(0,0,0,0.30);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff8000,endColorstr=#ffff9326,GradientType=0)
 progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#a5000000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff8000,endColorstr=#ffff9326,GradientType=0)
 progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#a5000000,Positive=true);
 color: #FFFFFF;
 margin-top: 5px;
 margin-bottom: 5px;
 padding-top: 5px;
 padding-bottom: 5px;
}

まとめ

新機能 CSS デザイナーを使うことによって、簡単にプロパティを変更できます。まだ、ひな形を使う概念がないようです。別のツールから作ってコピペそして修正が良さそうです。

関連本

Dreamweaver+HTML5&CSS3レッスンブック

関連記事

Dreamweaver CC 使い方

Adobe Creative Cloudの導入方法

   このエントリーをはてなブックマークに追加