ドリームウィーバーを便利なエディタとして使う方法

Dreamweaverでのスタイルシートの使い方というブログを更新していますが、その中のネタより・・・
ソースコードでCSSデザイン（4）スニペットを使ってコードを入力について、もうちょっと詳しく解説してみます。




この動画では、よくつかうスタイルを、スニペットに登録しておいて、コードに貼り付けしてみる方法を紹介しています。
登録したスタイルは、写真の右寄せスタイル。
こうしていろんな場面で使い回すようなよく出現するスタイルを登録しておくと便利です。

スニペットは元からいろんなものが登録されてるので、利用することもできます。
（私は自分で登録したもの意外使ったことないんですが・・）
よく使うJavaScriptや、メタタグ、なども登録しておくと便利です。

＜写真を右寄せ簡単CSS＞
.photoR{
display:block;
float:right;
margin-left:10px;
}
これをスタイルに追加してから、写真に
class="photoR"
を適用させれば、簡単に右回り込み写真になります。
タグでいうと
＜img src="img/kagami_top.jpg" width="120" height="152" class="photoR" /＞

もしくは、＜p＞か＜div＞に class="photoR"を適用してもいいですね。
＜div class="photoR"＞＜img src="img/kagami_top.jpg" width="120" height="152" /＞＜/div＞

imgは、インライン要素なので、フロート指定は本来できないんですが、
display:block;を入れることで、ブロック要素にできるので、フロートさせることもできるし、マージンなどを指定することもできます。

同じ要領で、
.photoL（左に回り込みさせたい場合）
.phtoC（中央揃えにしたい場合）
こんなのを作ってスニペットに登録させておくと、作業中にこういうレイアウトが出現したときに手間をかけずにすぐにスタイルを適用させることができますね。

※ブログの中でタグが有効になっちゃうんで、＜＞は全角で記述してあります