DreamweaverでCSSの「div id」設定方法
- DreamweaverでCSSの「div id」の設定方法について教えてください。
- DreamweaverMXを使ってCSSを独学している初心者ですが、「div id」の設定方法がわかりません。
- また、CSSのセレクタタイプやスタイルの適応方法についても教えていただけると助かります。
- ベストアンサー
DreamweaverでCSSの「div id」設定方法
DreamweaverMXを使ってCSSを独学している初心者です。OSはWindowsXPです。 以下のようなタグを使って作る時 <div id="aaa">の部分を、コード部分に直接タグを挿入する以外の、Dreamweaverの使い方があれば、お教えいただますでしょうか。 （煩雑になるのでタグの<title>より上は省略して載せています） <style type="text/css"> <!-- #aaa { background-color: #CCFFFF; width: 600px; } --> </style> </head> <body> <div id="aaa"> <p>表題</p> <p>例文ああああああああああああ</p> <p>事例</p> <p>例文いいいいいいいい </p> </div> </body> </html> 「#aaa」というスタイルは「CSSスタイル」パネルから新規CSSスタイルのセレクタタイプを「詳細（ID，コンテキストセレクタなど）を選択し、セレクタに「#aaa」と入力してスタイル定義で設定しました。 ・スタイル名が「.aaa」ではダメで「#aaa」でなくては出来ない点と、 <div id="aaa">部分が<div id="#aaa">ではダメな理由の知識もありません。 ・<p class="bbb">というスタイルの設定を、セレクタタイプを「クラス（すべてのタグに適用可能）」にして「.bbb」という名前にして設定したスタイルは 「文章のスタイルを適応したい部分を選択→スタイルを選択して右クリック→適応」で<p class="bbb">例文ううう</p>のようなタグが挿入されますが 「div id」の場合は同じような手順では出来ないのでしょうか？ 私が持っているDreamweaverMXの解説書にはこのあたりのことが記載されていません。もしお勧めの本があれば そちらもお教えいただけると幸いです。 どうぞよろしくお願いいたします。
- fuyur
- お礼率96% (56/58)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
>スタイル名が「.aaa」ではダメで「#aaa」でなくては出来ない点 私も詳しくないので、身も蓋もない言い方をしてしまうと… 「.aaa」はクラスセレクタで 「#aaa」はIDセレクタだから #aaaで記述されているものを指定するにはIDでの指定でなくては出来ないということです。 ><div id="aaa">部分が<div id="#aaa">ではダメな理由 #で記述しているのがIDですよ～という事を表しているのだから… <div id="aaa">はaaaというIDを指定というか呼び出す記述なので、タグへ指定する際#はいらないんじゃないでしょうか。 <div id="aaa">＝<div #="aaa"> #aaaに書いてある設定を呼び出す呪文：IDセレクタ <div class="aaa">＝<div .="aaa"> .aaaに書いてある設定を呼び出す呪文：クラスセレクタ 上手く説明できないんですが…私はこう解釈してます。 IDの挿入の仕方ですが MXではどうだったか…８に乗り換えてしまったので記憶が少々怪しいですが。 挿入ツールバー「一般」に「DIVタグの挿入」というのがあったと思うのですが。 適応したい範囲を選択しておいて「DIVタグの挿入」をクリックするとクラスとIDの指定ダイアログが出ると思います。 そのファイル内でまだ何処にも適応していないIDであれば選択してOKを押せば<DIV id="aaa"></div>に挟まれた状態になります。 MXでも出来たと思うのですが…実は私もこのやり方は乗り換え直前から始めたばかりなので、MXにもあったか８からなのか記憶が怪しいです。 一度ツールバーを見てみて、あったらやってみて下さい。
関連するQ&A
- CSS・DIVについて
CSS初心者ですが、質問させていただきます。 ＜やりたいこと＞ 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え ＜私が作成したもの＞ （関係ない部分は省略しています。） （実際は、(1)(2)の部分は半角英字の名前をつけています） <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center; } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> ＜表示のされ方＞ (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。
- 締切済み
- CSS
- javascriptで特定のオブジェクトのCSSの書換え
javascriptでCSSの書換えをしたいと思っているのですが、うまくいきません。 例えば、 <div class="aaa" style="z-index:0;">aaa</div> <div class="aaa" style="z-index:1;">bbb</div> <div class="aaa" style="z-index:2;">ccc</div> <div class="aaa" style="z-index:3;">ddd</div> <div class="bbb">111</div> <div class="bbb">222</div> <div class="bbb">333</div> このようにあったときに、≪z-indexの要素が1以上≫のclass="aaa"のオブジェクトを探して、該当するものの≪z-indexの値から-1する≫というような関数を作りたいのですが、ループの記述で困っています。 （prototype.jsを使うので、getElementsByClassNameは使えます。） 詳しい方、ご教授いただければ幸いです。
- ベストアンサー
- JavaScript
- CSSのID名に配列を使えませんか？
以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1～に該当するID名を、配列として定義することってできませんか？ <style type="text/css"><!-- #a1 { display:none; } #a2 { display:none; } #a3 { display:none; } // --></style> <script type="text/javascript"><!-- function disp(aaa) { obj = document.getElementById(aaa); if( obj.style.display =="block" ){ obj.style.display ="none"; }else{ obj.style.display ="block"; } } function create(bbb){ document.write(bbb); } // --></script> <body> ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br> いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br> うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>
- ベストアンサー
- JavaScript
- dreamweaver☆背景画像の繰り返し
dreamweaverMX2004で、作っております。テーブル内の背景画像の繰り返しをしたくないのですが、ＣＳＳスタイルをタグをtable、セレクタタイプをタグを選択し、新規作成をして、背景を繰り返さないにしたのですが、ページの中にある全てのテーブルに背景画像が出てしまいます。特定のテーブルだけに設定する方法はありませんか？どうぞ宜しくお願い致します。
- ベストアンサー
- CSS
- ＣＳＳで、ＩＤとＣＬＡＳＳを同時に設定することは可能ですか？
<div ID="main" CLASS="sub"></div>のように スタイルシートで、IDにメインのスタイル CLASSにサブのスタイルを設定してみて、 とりあえず、firefox、IE6、で確認してみたところ、うまく動きました。 しかし、グーグルで”ＩＤ ＣＬＡＳＳ 同時”等で検索してみても、 同時に使えることが解説されたサイトが大変少なく、 果たして、同時使いは、CSSの構文違反にならないのか不安になり 質問させていただきました。 <div ID="main" CLASS="sub"></div>のようなセレクタ同時使いは、 やっても大丈夫なものなのでしょうか？ サポートされていないブラウザがあったりすることはないのでしょうか？
- ベストアンサー
- HTML
- CSSの継承
ＨＴＭＬに挑戦してから１年が経ちます。 少しずつ勉強してようやく形になってきましたが 継承のことについてよく分からないままきたので質問いたします。 スタイルシートの本には継承されない属性の方が多く書かれています。 例えば代表的なbackground-colorとかがありますが、 私のパソコンでは何故か継承されてしまっているようなのです。 環境はWindowsXP Pro、ブラウザはIE6で試しています。 例えば以下のようなソースです。これをコピペでメモ帳に貼り付けて下さればテストできます。 継承されないのなら<P>タグの背景色は初期値の白のままだと思います。 これって私の継承の理解が間違っているんでしょうか。 それとも他に原因があるのでしょうか。未だに謎なのでよろしくお願いします。 <style type="text/css"> <!-- div {background-color:red} --> </style> <div>aaa <p>継承していません</p> aaa</div>
- ベストアンサー
- HTML
- Dreamweaver MX 2004でのCSSスタイルのタイプの違い
DWで新規CSSスタイルの設定時のセレクタタイプ 1.クラス(すべてのタグに適用可能) 2.タグ(特定のタグの外観を再定義) 3.詳細(ID,コンテキストセレクタなど) 以上3つの違いは何でしょうか。またどうやって使い分けるので仕様か。ヘルプやいろいろな文献を参照しましたが、いまいち分かりません。初心者にも分かりやすくお教えできる方、宜しくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- タグを変えずに改行をなくすにはどうすればいいでし
cssを何も設定してない状態で <p>aaa</p><div>bbb</div> <span>aaa</span><div>bbb</div> とすると、 ******************** aaa bbb aaa bbb ******************** となってしまいます。 理想は、 ******************** aaabbb aaabbb ******************** です。 <div> の前は必ず開業になってしまうのでしょうか？ タグを変えずに改行をなくすにはどうすればいいでしょうか？
- ベストアンサー
- HTML
- ■divにid指定して子供タグに適応(ソース付)
みなさん、よろしくお願いします。 上の段と下の段を表示上同じ結果にしたいと思います。 現在、上の段のようにdivタグ以下の全てのタグに、GrayMojiを 指定しています。 本番のソースでは、これが大量にあるので、簡潔に書きたいと思っています。 そこで、下の段のように、１つだけidを指定しただけで、divタグに含まれている 全タグにGrayMojiを適応させたいと思っています。 でも、このソースでは、同じ結果が得られません。 どのようにすれば、良いかアドバイスをいただけないでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> <!-- a:link{ color: #0033EE;} #GrayMoji {color: #666666;} --> </style> </head> <body> <div> <a id="GrayMoji" href="main/about.html">div-AタグClass</a> <p id="GrayMoji">div-pタグClass</p> </div> ------------------------------------ <div id="GrayMoji"> <a href="main/about.html">divタグClass-A</a> <p>divタグClass-p</p> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでのブロック要素に囲み線
下記、記述では#lineと#headerがぴったり重なると思うのですが、ブロック要素（#lineの部分）にborderを設定するとマージンができてしまうのですが、なぜでしょうか？border部分を削除するとぴったり重なります。 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- #line { background-color:yellow;border:1px solid #808080;} #header { background-color:#23819e;text-align:center;} --></style> </head> <body> <div id="line"> <div id="header"> <p>aaa</p> </div> </div> </body> </html>
- ベストアンサー
- HTML
お礼
DreamweaverとCSSを使いこなしたいと試行錯誤していますが、お答え本当にありがとうございました。 タグの挿入のほうはさしあたり、コード部分のほうを選択して右クリックからでなんとか使えるようなりました。 kagamin様のご説明は 私のような素人にはわかりやすく 大変ありがたく存じます。また何かありましたときにはぜひお願いいたします。