BLOG
【Dreamweaver 2025】CSSデザイナーパネルを使用する
こんにちは。POMEMOです。
年も明けて早一ヶ月、もうすぐ節分ですね。いかがお過ごしでしょうか。
今回はDreamweaverの機能について、紹介したいと思います。
前回の記事はこちら ▼ ▼ ▼
Dreamweaver：CSSデザイナーパネル
CSS デザイナーパネル（ウィンドウ／CSS デザイナー）は、CSS スタイル、ファイル、設定済みプロパティ、メディアクエリーを「視覚的」に作成できる CSS プロパティインスペクターです。
直感的・視覚的に作成できるため、CSSにはじめて触れる方がコードに慣れるために使用してみるのも良いかと思います。
ソース
HTMLに関連付けられた CSS ファイル。
セレクター
ソースで選択したメディアクエリー（CSS）に関連付けられたセレクター。
プロパティ
選択したセレクターに関連付けられたプロパティ。
ここで直感的・視覚的に、適用するCSSのスタイルの種類を編集できます。
セレクターで選択した部分のプロパティを見ると
displayにflex、上下左右にpadding（余白）が1.5remに設定されていることがわかります。
値をクリックして値を入力すれば、見た目（CSS）にも反映されます。4 つの値をすべて同時に同じ値に変更する場合は、中央にあるリンクアイコンをクリックします。
他にも背景や文字なども設定できますので、コードを理解するための足がかりにしてみてもいいかもしれません。
弊社は印刷だけでなく、パンフレットやwebサイトなどのデザイン制作もしています。
漠然としたイメージはあるけれど、形にできない…とお困りの際はぜひ弊社にご相談ください。
制作実績はこちら