- 締切済み
CSSコーディングの際に…
CSSコーディングの際に… たとえば <div id="container"> <div id="main"> <div id="menu"> <div id="info"> </div> </div> </div> </div> のようなhtml構造がって たとえば #info に何らかのCSSを適用したい場合に、 #container #main #menu #info { font-weight: bold; } などと書く場合があると思うのですが、 この例でいえば、#info を内包するすべてのタグ構造や、そのid、classネーム（#container #main #menu）を 自動的に抽出してくれるようなツールや方法はないでしょうか。 意味不明でしたら加筆しますのでよろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- goldfox
- ベストアンサー率49% (123/249)
- naokita
- ベストアンサー率57% (1008/1745)
Firefox用アドオン（かなり便利） https://addons.mozilla.jp/firefox/details/1843 これで、 HTMLを表示 → 表示タブ → 左右に並べる HTMLの <div id="info"> を見つけ div をクリックすると右にCSSが表示される。 それを検索で info を探しても同じ。 HTML側を見て内包・外包を見ればすぐにわかる。 って意味じゃなく？
お礼
ご回答ありがとうございます。 すみません、そういう意味じゃないです。。 firebugと本例を例に出すならば、 たとえば、本例のHTMLの <div id="info"> をクリックした瞬間に #container #main #menu #info という文字列が クリップボードに格納されるとか。。 たとえば、そういう便利なツールは無いですか、という意味です。 意味不明でしたら加筆しますのでよろしくお願いします。
関連するQ&A
- CSSでの2段組レイアウトでdiv#containerを導入する理由
CSSでの2段組レイアウトでdiv#containerを導入する理由 CSSを使って2段組みレイアウトを構成する場合、次のようにdiv#containerを導入したマークアップをよく目にします。 <body> <div id="container"> <div id="header"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div> </body> また、div#containerを導入せずにbody要素の直下に#header, #mainなどの領域を設けている場合も目にします。 body要素直下ではなく、div#containerを導入するのはどのような理由からなのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- CSSの正しい記述の仕方
CSSの記述の仕方なんですが、下記のような書き方は正しいのでしょうか？ .f14 {font-size: 14px;} .bold {font-weight: bold;} .red {color: #FF0000;} <p class="f14 bold red">あいうえお<div> HTMLには構成要素、CSSにはデザイン要素のみを記述と考えると正しくない気がしますが、 何度も使うような場合は、この方がCSSが短くなるので使っています。 どうなんでしょうか？ 気にしすぎでしょうか。
- ベストアンサー
- HTML
- cssで横にテキストとその背景を並べる方法を教えてください。
cssで横にテキストと背景を並べる方法を教えてください。 下記のようなCSS記述と、HTMLタグがあります。 【CSS】 #menu01 { width:210px; height:30px; background-image: url(http://abc.com/img/123.gif); background-repeat:no-repeat; font-size:12px; font-weight:bold; flort:left; } 【HTML】 <div id="menu01">「ここにメニュー内容が書かれています」</div> <div id="menu01">「ここにメニュー内容２が書かれています」</div> <div id="menu01">「ここにメニュー内容３が書かれています」</div> <div id="menu01">「ここにメニュー内容４が書かれています」</div> このように書くと、左に寄って縦にずらりとメニューが並びます。（右側は空白になってしまいます。） 現状 □ □ □ □ という風に並ぶ上記メニューを、 □□ □□ という感じで並べたいのですが可能でしょうか。 制約としては、MTで書き出されるものなので、メニュー毎にidを変えるなどはできません。。 また、display:inline;なども使ってみましたが、何故か重なってしまい（文字は重なりません）、 思っているものにはなりません。。 本当に分かりません！よろしくお願いします！
- ベストアンサー
- その他（プログラミング・開発）
- FIREFOXでのCSS表示
よろしくお願いします。 CSSのレイアウトで、よくある２カラムのオーソドックなもの 左側にメニュー、右側にメインコンテンツ、上下にヘッダ・フッタ <div id="wall"> <div id="header"></div> <div id="menu"></div> <div id="main"></div> <div id="footer"></div> </div> のような構造の場合、メインコンテンツは各ページによってボリュームが違うので、wall部分もmainのボリュームにあわせて変化させたいです。 IEならば問題ないのですが、FIREFOXだとmenuやmainの部分が増えると、wallの上から重なるように表示されてしまうケースがありました。はみ出ています。 このような場合、それぞれのheightの設定など、どのようにしたら良いのでしょうか？ mainの長さにあわせて最後にwallを1250pxのように具体的な長さ指定すると、見た目にはfirefoxでもうまく表示はされています （ただし、このやり方だと各ページのコンテンツの長さにあわせて、１つ１つ設定しないといけない） floatの設定なども含めて、どういった記述をすれば良いのか、どなたか教えてもらえませんでしょうか。
- ベストアンサー
- ホームページ作成ソフト
- CSS #containerについて
えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に１００％にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです＞＜ どなたか原因がわかる方、対処法わかる方 いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }
- 締切済み
- CSS
- クリックした際にCSSが変更できない jQuery
jQueryについて詳しい方教えていただけませんでしょうか？ クリックをした際、スライドさせるように作っているのですが、同時にspanのCSS変更（arrowFD→arrowFR）もやりたいのですがなぜかうごきません・・・ ＜jQuery＞ $(window).load(function(){ $('#faq .answer').not(':first').hide(); $('#faq .question').click(function() { if($(this).next('.answer').is(':visible')) { $(this).next('.answer').slideUp(300); $("span.arrowFD").html('<span class="arrowFR"></span>'); //★ホントは、CSSだけ変更したい } else { $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300); } }); });//]]> ＜CSS＞ .question { padding:5px; font-weight:500; font-family: メイリオ; font-size:14px; border:1px solid #ddd; background:#eee; cursor: pointer; } .answer { padding:25px; font-family:MS UI Gothic; font-weight:500; font-size:13px; border:1px solid #ddd; } /* 三角矢印を前（Front）に（右向き：Right）でつける */ .arrowFR { position:relative; top:0; left:0; padding-left:18px; } .arrowFR:before { content: ""; position: absolute; top: 3px; left: 2px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #000000; } /* 三角矢印を前（Front）に（下向き：Down）でつける */ .arrowFD { position:relative; top:0; left:0; padding-left:18px; } .arrowFD:before { content: ""; position: absolute; top: 3px; left: 2px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #000000; } ＜HTML＞ <div id="faq"> <div class="question" id="tenmetsu"> <span class="arrowFD"></span> <span style="font-weight:bold">｜</span> 香川真司 </div> <div class="answer">Answer 01<br />Answer 01<br />Answer 01<br />Answer 01<br /></div> <div class="question"> <span class="arrowFR"></span> <span style="font-weight:bold">｜</span> 長友佑都 </div> <div class="answer">Answer 02<br />Answer 02<br />Answer 02<br />Answer 02<br /></div> <div class="question"> <span class="arrowFR"></span> <span style="font-weight:bold">｜</span> 本田圭佑 </div> <div class="answer">Answer 03<br />Answer 03<br />Answer 03<br />Answer 03<br /></div> </div>
- ベストアンサー
- JavaScript
- IE8でCSSハックが効かないです。
IE8でCSSハックが効かないです。 IE8のCSSハックを使用したくて、下記のように指定したのですが、 IE8で見るとIE8用に記述したCSSハックが効かないです。 ちなみにIE6用のハックとデフォルトで指定したクラスはきちんと表示されます。 記述方法が原因なのでしょうか。それとも他に原因があるのでしょうか。 教えて欲しいです。 ■サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="keywords" content="キーワード1,キーワード2"> <meta name="description" content="ディスプリクション"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #main_contents p.test_style { font-weight: bold; color: #000; } /* IE6対策 */ *html #main_contents p.test_style { font-weight: bold; color: #ff0000; } /* IE8対策 */ html>/**/body #main_contents p.test_style { font-weight /*\**/: bold\9; color: #0033ff\9; } </style> <title>IE8表示テスト</title> </head> <body> <div id="main_contents" class="reset"> <p class="test_style">デフォルトのテキスト 黒で表示されます。</p> <p class="test_style">IE6用(css hack)のテキスト IE6で見ると赤で表示されます。</p> <p class="test_style">IE8用(css hack)のテキスト IE8で見ると青で表示されます。</p> <!--/main_contents--></div> </body> </html>
- 締切済み
- HTML
- CSSについて
CSSについて質問させてください。 CSSをタグの中に直接書き込む場合 <div style="color:#ffa500; font-size:20pt; font-weight:bold; text-decoration:underline;"> このような場合のstyle="部分は、styleタグと呼んで いいのでしょうか？ divタグの中に記述しているので、styleプロパティと 呼ぶのでしょうか？ CSSのリファレンスにはstyleプロパティはありません。 ということは、やっぱりdivタグのstyleプロパティで CSSを指定していると考えるのでしょうか？
- 締切済み
- HTML
- CSSでの背景色の出し方でつまりました。
独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> <div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、 なぜ出ないのか教えていただければと思います。 ブラウザはオペラです。 サイドバーのグリーンしかつきません。 過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。 お願い致します。
- ベストアンサー
- CSS
- cssでコーディング レイアウト重なってしまう
たすけてください かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで 重なり作業ができません。positionの設定がいけないのはわかっています。。。 上から順にheader→nav→a→ｂ（c1,c2）→footerです。 jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、 navがうごくようになったら他の<div>がきゅっとうえによってしましました。 他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。 空が白みはじめたのであきらめましたが配置ができないと次に行けず途方にくれています。 以下にソース書きます。 お願いいたします。 <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var dy=$(this).scrollTop(); console.log(dy); $("#nav").css("top",150+dy/8); }); }); </script> <body> <div id="wrap"> <div id="header" class="box"></div> <div id="nav" class="box"></div> <div id="a"></div> <div id="b" class="box"> <div class="c_box" id="c1"></div> <div class="c_box" id="c2"></div> </div> <div id="footer"></div> </div> </body> <style type="text/css"> .box { margin:0 auto; width:1260px; position:fixed;} #wrap { weidth:1260px;} #header { height:145px; background:#fcc; } #nav { height:69px; background:#ccc; top:150px; } #a { width:1285px; height:522px; background:#ccf; } #b { height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;} .c_box { width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; } #c1 { position:absolute; left:24px; top:308px; } #c2 { position:absolute; left:465px; top:308px; } #footer { height:100px; background:#fac; } </style>
- ベストアンサー
- CSS
お礼
すみません、これはあくまで例なので、そのあたりの意味は気にしなくていただきたく。。 #container #main #menu #info のように連なる場合、という意味として、例を出した次第です。 なので、これがたとえば #container #main #menu .info であっても良いですし、、 そのあたりの意味は今回の質問には関係しないと 思っていただければ幸いです。 よろしくお願いします。