- ベストアンサー
■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>
- kaihatu3
- お礼率3% (11/280)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#GrayMoji * {color: #666666;} ではどうでしょうか？ <div id="GrayMoji">内の要素すべてに灰色を与えるという意味です。 *はなんでもあり。トランプのジョーカー的な役割を果たします。 また、上のほうの <div> <a id="GrayMoji" href="main/about.html">div-AタグClass</a> <p id="GrayMoji">div-pタグClass</p> </div> のなかにid="GrayMoji"が2つありますが、文法的に間違いです。idは固有のものにつけることになっていますので、2回目がでてくるのは間違いです。グループ化が目的でしたらidに変えて、classを使われることをお勧めします。
その他の回答 (2)
- outbrave
- ベストアンサー率60% (231/380)
#GrayMoji {color: #666666;} #GrayMoji a:link{color: #666666;} まとめるといったら #GrayMoji , #GrayMoji a:link {color: #666666;} これしか思い浮かびません。
- outbrave
- ベストアンサー率60% (231/380)
<style type="text/css"> <!-- a:link{color: #0033EE;} #GrayMoji {color: #666666;} #GrayMoji a:link{color: #666666;} --> </style> 通常の文字色とリンクの文字色を同じにしたいということですかな。
関連するQ&A
- CSS適用ページで余分なDIVタグが要求される
CSS初心者です、質問させてください。 XHTMLに外部CSSを添付させています。 headerは３ブロック、 contentsは３ブロックに分けてから各ブロックに複数ブロックをいれています。それら複数ブロックはそれぞれ幅と高さを指定しています。 contentsとfooterには「clear: both;」をいれています。 ソースは以下の通りです。 <?xml version="1.0" encoding="Shift_JIS"?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>無題ドキュメント</title> <link href="affiliate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="a_Left"> <div id="a1">A1</div> <div id="a2">A2</div> </div> <div id="a_right"> <div id="a3">A3</div> </div> </div> <div id="contents"> <div id="conLeft"> <div id="b1">B1</div> <div id="b2">B2</div> <div id="b3">B3</div> </div> <div id="conCenter"> <div id="c1">C1</div> <div id="c2">C2</div> <div id="c3">C3</div> </div> <div id="conRight"> <div id="d1">D1</div> <div id="d2">D2</div> <div id="d3">D3</div> <div id="d4">D4<div> </div> </div> </div> </div> <div id="footer">E1</div> </body> </html> 明らかにid="footer"の上にある</div></div>は不要なのですが、入れないと表示がおかしくなります。 なぜかさっぱりわかりません。 どうすればいいのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- 以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに
以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに変更したところ ヘッダー フッターが崩れてしまいます。ie6.0 ie7.0 にて（ie8.0 firefox3）では問題なく表示されます。 というか、cssが聞かないのです。 utf-8に戻すと直るのですが、なにか設定が必要なのでしょうか。 メールフォームcgiの関係でeuc-8にする必要があるのです。 よろしくお願いいたします。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>タイトル</title> <meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <meta name="description" content="テキスト。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> <body> <div id="bodybox"> <div id="container"> <!-- main --> <div id="main"> </div><!-- /main --> <div id="header"> <div class="head-box"> <h1>テキストテキストテキスト</h1> <p class="oooo"><a href="../"></p> <p class="top-inquiry"><a href="../inquiry/"><span>問合せ</span></a></p> <ul class="top-navi"> <li><a href="../">HOME</a></li> <li><a href="../cy/">テキスト</a></li> </ul> </div> </div><!-- /header --> </div><!-- /container --> </div><!-- /bodybox --> <div id="footer"> <div id="footer-in" class="clearfix"> <div class="fnavibox"> <ul class="fnavi clearfix"> <li><a href="../index.html">テキスト</a></li> <li class="last"><a href="../works/">テキスト</a></li> </ul> <ul class="fnavi clearfix"> <li><a href="/">HOME</a></li> </ul> </div> <!-- /fnavibox --> <div class="banerbox"> <p class="fbox"><img src="../common/images/img-tel1.jpg" alt="" /></p> <p class="fbox-r"><a href="../inquiry/"><img src="../common/images/btn-toi.jpg" alt="テキスト" /></a></p> </div><!-- /banerbox" --> </div> <!-- /footer-in --> <div id="footer-in2" class="clearfix"> <div class="addressbox"> <p class="name">テキスト</p></p> </div><!-- /addressbox --> <!-- /footer-in --> <div id="footer-in3"> <p class="copyright">
- ベストアンサー
- ホームページ作成ソフト
- XHTML1.1でposition:relative指定したdivの挙動
XHTML1.1で、widthとheightをpx指定したdiv（divA）の中に、position:relative;を指定したdiv（divB）を配置した場合、 divAよりdivBの幅が広くなると、divBの内容がdivAの外側にはみ出して表示されてしまいますよね。 これを回避する方法はないのでしょうか。 以下簡単ですがサンプルです。 ----- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #divA { width: 200px; height: 200px; border: 1px solid #000; overflow: scroll; } .divB { position:relative; } </style> </head> <body> <div id="divA"> <div class="divB"> ************************************************************************************************************<br /> </div> </div> </body> </html>
- ベストアンサー
- CSS
- IE5*でもCSSで画像を横に並べる方法を・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml version="1.0" encoding="Shift_JIS" ?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><style type="text/css"> <!-- .box_a{ } .box_b{ } .box_c{ float:left; width:80px; background-color:#c8ffdb; } .box_d{ float:left; width:10px; background-color:#c8ffdb; } --> </style> </head> <body> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> </body> </html> 上記のコードをブラウザで見るとIE6では隙間なく並んでいるのですが、IE5.01,IE5.5で見ると画像の間に隙間が空いてしまっています。 IE5*でもCSSで画像を横に並べる方法をご存じの方、教えてください。 お願いします (_ _)人。
- 締切済み
- HTML
- ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。 上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
- 数秒毎に自動で画像をフェードイン・アウトする方法
以下のサンプルttp://www.geocities.jp/margin0px/sample/slideshow.html（javascript?）を使って自動で画像のフェードイン・アウトを行いたいのですが、コピペしても上手くいきません。誰かご教授下さるかたがいらっしゃいましたら、ご教授下さい。「▼▼メイン画像▲▲」の部分を画像が切り替わるようにしたいと思っています。画像のサイズは出来るだけ大きくしたいと思っています index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ttp://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>FLOWER GARDEN</title><!-- ▼▼ページタイトル▲▲ --> <link href="components/css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="head_logo"><a href="index.html"><img src="img/head_logo.gif" alt="head_logo" border="0" /></a></div><!-- ▼▼ロゴ画像▲▲ --> <div id="head_right"> <!-- ▼▼キャッチ＆案内テキストここから▼▼ --> <h1>想いを花に乗せて・・・・・・フラワーギフトのFLOWER GARDEN</h1> <h2>Tel.03-1234-5678｜営業時間 11:00～23:00</h2> <!-- ▲▲キャッチ＆案内テキストここまで▲▲ --> </div> </div> </div><!-- //wrapper --> <div id="main_vis"> <img src="img/img_01.jpg" alt="img_01" width="800" height="380" /></div><!-- ▼▼メイン画像▲▲ --> <div id="menubar"> <!-- ▼▼メニュー項目ここから▼▼ --> <div id="menubar_wrap"> <a href="index.html" class="menu_a"> <h2>Home</h2> </a> <a href="concept.html" class="menu_a"> <h2>Concept</h2> </a> <a href="pickup.html" class="menu_a"> <h2>Pick Up</h2> </a> <a href="menu.html" class="menu_a"> <h2>Menu</h2> </a> <a href="shop.html" class="menu_b"> <h2>Shop</h2> </a> <!-- ▲▲メニュー項目ここまで▲▲ --> </div> <!-- //menubar wrap --> </div> <!-- //menubar --> <div id="content"> <div id="content_wrap"> <!-- ▼▼コピーテキストここから▼▼ --> <h2>[ --- information --- ]</h2> <div id="copy"> 誕生日や記念日にフラワーギフトを贈りませんか？<br /> 当店ではオリジナルのフラワーアレンジメントを承っています。</div> <!-- ▲▲コピーテキストここまで▲▲ --> </div><!-- //content wrap --> </div><!-- //content --> <div id="footer"> 2009 FLOWER GARDEN</div> </body> </html>
- ベストアンサー
- JavaScript
- 外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまう
Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。
- ベストアンサー
- HTML
- Operaでズレない方法をご指導下さい
IE6、firefox1.5ではズレないのですが、 Opera9.1.0では <div id="main">テキスト</div> の箇所が左に1pxズレてしまします。 ブラウザの横幅を大きくしたら小さくしたりすると、 ズレない場合もあるのですが、最大にすると1pxだけズレます。 ズレない良い方法がありましたら、どうか教えて下さい。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { background-image: url(bg.jpg); background-repeat: repeat-y; background-position: center top; margin: 0; } #main { background-color: #00FFCC; width: 700px; margin:0 auto; } --> </style> </head> <body> <div id="main">テキスト</div> </body> </html>
- 締切済み
- HTML
- DreamWeaverでテーブルをCSSにした場合にずれます。
DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #wrap { width: 500px; } #content { float: left; width: 200px; background-color: #00CCCC; } #main { width: 300px; float: left; background-color: #99FF99; } #footer { clear: both; width: auto; background-color: #CCFF66; } --> </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。 ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。
- ベストアンサー
- HTML
補足
レスありがとうございます。 感謝でございます。 ひとつだけ、お願いなのですが... #GrayMoji {color: #666666;} #GrayMoji a:link{color: #666666;} この、color: #666666;が二箇所に出てくると思います。 これを一箇所にする方法はないでしょうか？ 例では、単純なのですが実際のソースは、凄いパターンが 多いのです。 その為、できるだけ重複部分を無くしたいのです。 ご面倒だと思いますが、よろしくお願いいたします。