DreamweaverでのCSS操作

質問

CSSの勉強をしているのですが、
他サイトのCSSを見ていると
<ul id="navi">との記述があるのですが、
Dreamweaverでどのように操作すればこのような記述ができるのでしょうか？

私の操作方法では、
タグセレクタで<ul>を選択
<div>の挿入
新規CSSルール作成
の流れなので、
<div id="navi">
<ul>
</ul>
</div>
となってしまい、全体を見ると<div>だらけになってしまいます。
先にCSSルールで"navi"をクラスで作成して、
プロパティインスペクタから適用すると
<ul class="navi">
とはできるのですが…。

勉強のために見る他サイトのCSSは
h1#○○ や dl#○○
と言う記述を沢山見かけるし、
CSSを見た時に分かりやすいなと思います。

学校の先生はCSSを手打ちなんてしないよ。
ミスの元だし…と言われていましたので、
手打ちをせずに出来る方法が知りたいです。
それとも、後でCSSを打ち変えてるだけなのでしょうか？
解答よろしくお願い致します。

また、分かりにくい説明ですみません。

回答No.1

RedPiyoyo · ベストアンサー

><ul id="navi">との記述があるのですが、
>Dreamweaverでどのように操作すればこのような記述ができるのでしょうか？

通常、id名やclass名は自分で付けるものです。
DWのテンプレートや、先にCSSファイルで定義されている場合は、
すでに書かれていたり、入力補完で定義されたid名などが出てきます。

>全体を見ると<div>だらけになってしまいます。

ご質問の内容だけでは判断はしづらいのですが、
ブロック要素に不要なブロック要素を付けてませんか？

***
以下間違っていたらすみません。

どうやらDWに頼りすぎている、もしくは、
振り回されているように感じられます。
DWはあくまでエディタです。

まずは、
・CSSとは何か？
・CSSの記述方法
などといった基本的な部分を勉強していってはどうでしょうか？

経験から言いますと、
基本からやっていったほうが後々楽になりますよ。

お礼

DWに振り回されてる…その通りだと思いました。
結局、コードビュー側で
<h1>に<h1 id="headTxt">と手打ちし、
新規CSSルールの作成から"h1#headTxt"を
セレクタタイプ詳細設定で定義で出来ました。
(最初の投稿時セレクタタイプをタグで定義してました）

あくまでエディタ。
完全にDWの機能を使って～なんて考えず、
出来る所、出来そうにない所？を臨機応変に対応していきたいと思います。
ありがとうございました。

補足

ありがとうございます。

私はもともと手打ちしてたのですが、
「CSSなんてそんな手打ちしないよ」と言われまして。
こんな便利なんだからもっと活用しなさいと言う事だったので、
どうやったら書きたい様に操作できるかを試していました。
<div>が多くなる～の件ですが、
<h1>説明文</h1>
に"headTxt"と言うIDを定義したくても
<div>の挿入ボタンからしか定義できなくて
<div id="headTxt">
<h1>説明文</h1>
</div>
となってしまうのです。
<h>タグはブロック要素なので、わざわざ<div id="">に入れ子せずに、
<h1 id="headTxt">説明文</h1>
と書きたいのです。
(<h1>タグの再定義自体は出来るので除きます)

あくまでDWの操作方法として、
出来るのか？出来ないのか？？が知りたいです。

またプロの仕事では、実際は手打ちで対応する事が多いのでしょうか？

回答No.3

noname#119957

なるほど、divだらけが気になるんですね。。
それなら。。
<div id="navi">
<ul>
</ul>
</div>
この場合はＨＴＭＬタグにＩＤとかＣＬＡＳＳを定義します。
■HTML
<ul id="navi">
　<li></li>
　<li class="cl1"></li>
　<li></li>
　<li class="cl1"></li>
</ul>

■css
#navi{{
#navi li{}
#navi .cl1{}

このように定義してみてください。
DIVは最小限にする方がいいですよ。

お礼

ありがとうございます。
そうなんです。
<div id="navi">
<ul>
<li></li>
</ul>
<div>
ではなく、
<ul id="navi">
<li></li>
</ul>
としたかったんです。

コードビューのタグにIDを手打ちで追加。
CSS新規ルール作成ボタンでul#naviを設定。
で、出来ました！！
タグにIDを定義したい場合は、
直接コードに打つしかないのかもしれませんね。

ありがとうございました。

回答No.2

noname#119957

(1)DWでＣＳＳエディタを起動する方法。
<div id="navi">
<ul>
</ul>
</div>
ソースビューで"nani"をクリックして始めること。
それでウィザードが走る。

■ＣＳＳの書き方
h1 #○○ や dl #○○
は、自分の好きなようにすれば良い。
ネストのさせ方で、適用範囲が変わるので注意。

お礼

ありがとうございます。
(1)のやり方は上に記述している通り、
いつもやっているやり方です。

CSSの書き方も命名規則で悩んでいるわけではありません。

補足

CSSの命名に関しては、私のDWの操作方法が違っていました。
新規CSSルールの作成画面で、セレクタタイプをタグにして
h1#○○と定義するからはねられていただけで、
ID(詳細設定)の方でやれば定義できました。
ありがとうございました。