- 締切済み
HTMLの初心者なのですが、divについて少し分からない事がありまして
HTMLの初心者なのですが、divについて少し分からない事がありまして質問します。 今まではデザインにテーブルぐらいしか使った事がなかったのですがスタイルシートを使ってみたいと 思いまして他のサイトの方の構成を見て勉強していたのですが、 <DIV class=A> <DIV> <DIV style="TEXT-ALIGN: left"><A title=あいうえお href="http://www.abcdefg">あいうえお</A> </DIV> </DIV></DIV> 上記の部分なのですが・・ <DIV class=A><DIV>~</DIV> この部分は~で挟まれた部分をクラスAで全てを定義するで合っていますでしょうか? また上記の場合「あいうえお」と表記されリンクが貼られている状況になりますが、 クラスAで文字の色を変えてみても実際には青いままとなります。(青文字で「あいうえお」と表記されます。文字の大きさや背景は変更できました) これはどうして変わらないのでしょうか。また「あいうえお」の上にマウスカーソルを 合わせると赤色になります。 このような(常に青文字表記、カーソルを合わせると赤色文字表記)定義がされている 所がまったく見当たりませんがどこに記載してあるのでしょうか。不必要なソースは 全て消してみてもさっぱり分かりません。 初歩的な質問だとは思いますがどなたかわかりやすく教えていただけると助かります。
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- metametamu
- ベストアンサー率51% (153/295)
関連するQ&A
- <div ~ </div> で囲まれたテキスト文字を取得する方法はあり
<div ~ </div> で囲まれたテキスト文字を取得する方法はありますか? 「 <div class="TEST" id="TEST">?</div> 」 上記のような、?部分の表示内容によって、処理を分けたいのです。
- ベストアンサー
- JavaScript
- html css div
スタイルシートCSSで以下のような、表示を表現するには、どうすれば良いですか? <table>ではなく、<div>でマークアップしたいです。 よろしくお願いします。 文字Aを<span>で背景色をclassで指定しても、周りに隙間ができてしまいます。
- ベストアンサー
- HTML
- スタイルシートのクラス定義について
.menuと.conというクラスが定義されていて もうひとつ .menuCourseというクラスを定義して、このmenueCourseで <div class="menuCourse"> <div class="menu"> ・・略・・ </div> <div class="con"> ・・略・・ </div> </div> という感じではさんだのですが、 .menuCourse { border-left:solid 5px darkblue; } 上記のクラス定義の通りにボーダーの色が表示されません 何が問題かわからないので、有識者の方教えてください。
- ベストアンサー
- HTML
- div にリンク
a:hover { background-color: #e0ffff; } div#input { font-size:15px; width:140; border:solid 2px #000000; padding:2px; margin:3px; list-style : none; } <div id="input"><a href="http://~" target="_blank">MAIL</a></div> 中の文字だけにリンクをしているところを、 <a href="http://~" target="_blank"><div id="input">MAIL</div></a> ・・と div 全体にリンクをすると、マウスポインタが変になります。 カーソルを合わせた時に指マークになりませんし、色も変化しません。 1クリックでリンク先には行けます。 どうしてでしょうか?また、通常どうりにはならないのでしょうか?
- ベストアンサー
- HTML
- div要素について。
div要素について。 <div id="style"> <?php if(function_exists('○○○')) { ○○○(); } ?> </div> <?php ?>の部分に任意の文字が呼び出されるのですが、 その文字量にしたがってdiv#styleの横幅を可変させたいのですが可能でしょうか? 文字が5文字の場合は5文字幅。 10文字の場合は10文字幅といったように可変させたいです。 何らかの方法がありましたらご教授いただきたいです。 よろしくお願いします。
- ベストアンサー
- HTML
- 子<DIV>で定義したのに、親<DIV>の定義が優先表示
CSS の 子<DIV>で定義したのに、親<DIV>の定義が優先表示されてしまう。 CSSファイルで #oya {font-size: 1em;} .kodomo {font-size: 20pt;} と定義。 HTMLファイルで <body> <div id="oya"> AAAAA <div class="kodomo"> BBBBB </div> </div> </body> としても、AAAAA と BBBBB は同じ文字サイズです。 BBBBBは、#kodomo 定義の文字サイズで表示したいのですが、 どうすればよいですか?
- 締切済み
- HTML
- 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の解説書にはこのあたりのことが記載されていません。もしお勧めの本があれば そちらもお教えいただけると幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- jqueryで特定の要素をdivで囲う
jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように2か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- float divの関係
ブロックdiv(Pとします)の中に、2つのブロックdivがあります。それぞれA、Bとします。 floatでA、Bを左寄せに並べた場合、Pに適用したスタイルシートがA、Bに反映されません。(文字サイズなど) 何が問題でしょうか? よろしくお願いします。 <div id="P-style"> <div id="A-style">aa</div> <div id="B-style">bb</div> </div>
- ベストアンサー
- CSS
- CSSでdivが縦にはみ出る問題
HTMLとCSSについての質問です <div class="wrapper"> <div class"first"></div> <div class"second"></div> <div class"third"></div> </div> このようなHTMLがあります。 その際にfirst,secondのクラスはwrapper内に収まるのですが、最後のthirdクラスのみwrapperクラスから下にはみ出て表示されてしまいます。 thirdクラスもwarpper内に収めたいのですが、どうすれば良いのでしょうか? ちなみに今はレスポンシブのcssを書いていますが、PC版のCSSではしっかりとwrapperクラス内にすべてのdivが収まっています。 CSSは以下の通りです。 .wrapper{ position:relative; } .first{ position:absolute; top: 0; left: 0; } .second{ height: 500px; } .third{ height: 500px; } アドバイスよろしくお願いします。
- 締切済み
- CSS