- 締切済み
スタイルシート
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- h1409brt
- ベストアンサー率42% (9/21)
※半角スペースはわかりやすいよう、_で表記します。 div_a{～}のときは、divに含まれるaはすべて対象となる。 一方、div>a{～}の場合、divの直下にある場合のみに対象になる。 例えば(hrefなど一部簡略化しますが)、 <div><a>abc</a><h3><a>cdf</a>ghi</div> のとき、<h3></h3>に含まれる部分は適用されません。 つまり、それよりも内側にカッコがある場合は、適用されないということです。 実際にhtmlとCSSを入力してみてみるといいかと思います。 一応参考までに写真を掲載しておきます。(HTMLの内容は気にせずに)
関連するQ&A
- fontタグとスタイルシートの相対値
CSSでこういう使い方はありえないかもしれませんが、 １は60ptですが、２，３は何ptですか？ このようにfontタグは一つ上のdivのスタイルシートに影響せずにfont sizeで完結していますが 値を相対的に変化させる（例えばdivの値の20%とか）ことはスタイルシートのしくみでありますか？ <style type="text/css"> <!-- .a { font-size:60pt; } --> </style> <!-- １ --> <div class="a">60pt</div> <!-- ２ --> <div class="a"><font size="-1">？px</font></div> <!-- ３ --> <div class="a"><font size="1">？px</font></div>
- ベストアンサー
- HTML
- スタイルシートについてお尋ねします
<div style="font-size:70px;"<p align="center"><font face="HGS行書体" color="#993333">文章 </font></p></div> とすると、「文章」のところに入力した文字はページの一番上のセンターにちゃんと表示されるのですが、 <div style="font-size:70px;"><p align="center"><font face="HGS行書体" color="#993333">文章 </font></p></div> と、70pxの後ろに>を入れると、ページの上から2cmほど下がったところに文字が表示されてしまいます。 形式としては後者の方が正しいと思うのですが、なぜ表示が下がってしまうのでしょう。 よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートでサイト作り
現在サイトをスタイルシートを使って作ってます。 まだまだ本＆辞書片手に勉強中の初心者です。 幅４５０px高さ１００％中央配置のテーブル内に ヘッダー部分に４５０px × １３０pxの画像 その左下にメニューバー 右にコンテンツ を作りたいと思います。 メニューバーは 幅１２８ｐｘ 高さ１００％です。 本を見ながらアレンジして作りました。次の通りです。 /* === サイドバー部分のスタイル === */ .side {width:128px; vertical-align:top; padding:0px; background-color:#999999} .side div {font-size:12px; font-weight:bold; letter-spacing:3px; border-bottom:solid 1px white} .side a {color:#333333; text-decoration:none; display:block; padding-top:5px; padding-bottom:5px; padding-left:13px} .side a:hover {color:ffffff; background-color:#666666} <!--=== サイドバー部分のソース ===--> <td class="side" rowspan="5" valign="top"> <div><a href="link.htm">about</a></div> <div><a href="link.htm">contents</a></div> <div><a href="link.htm">blog</a></div> <div><a href="link.htm">bbs</a></div> <div><a href="link.htm">link</a></div> </td> リンクにふれると色が変わるのが気に入ってます。 この「link」の下にコメントとリンクを入れたいんですが 「拍手」ボタン <form>・・・</form> 「返事はこちら」 というコメント（「こちら」部分がリンク） をセルで囲って、画面下までのばしたいです。 いろいろ試したんですが、新しく作ったセルが横に並んだり <side>の a の影響を受けてしまったりして思ったように出来ません。 どうぞ御指南お願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- スタイルシートを使用したサイト作りで
サイトページの真ん中に４５０ｐｘの白の柱に本文を入れ、周りをすべて黒というスタイルにしたく思ってます。 柱をウィンドウの上から下まで表示したいのですが、どうしてもうまくいきません。どうぞ御指南下さい！！作ったタグを載せます。 *{margin:0; padding:0; font:normal normal normal x-small/1.5em Verdana,"ＭＳ ゴシック",Osaka,Gothic,sans-serif;} body{ height:100%; background-color:#000000; color:#000000; cursor:default;} br{ letter-spacing:normal;} #body{margin:0px auto; width:450px; height:100%; background:#ffffff;} #header{padding:0px} #menu{padding:0px 0px 5px; text-align:center;} #main{padding:0px 10px;} #navi{text-align:right; padding:0px 10px;} #foot{height:123px; background:url(img/img2.gif) no-repeat 0% 0%;} .text{padding:0px 0px 10px;} p{padding:1px 0px;} h1,h2{font-weight:bold;} h1{text-align:center; color:#666666; font-size:190%; padding:10px 0px 0px;} h2{ text-align:left; color:#000000; font-size:100%; padding:0px 2px; margin:5px 0px;} サイトページ <body> <div id="body"> <div id="menu"> <h1 id="TOP">- ABOUT - </h1> </div> <hr class="none"> <hr class="none"> <div id="main"> <h2>test</h2> <div class="text"> <p>test</p> </div> <h2>test</h2> <div class="text"> <p> test </p> </div> </div> <div id="navi"> <p>INDEX // <a href="#TOP">PAGE TOP</a> // </p> </div> </div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシートが効かない
bodyに以下のスタイルを適用しています。 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: 'Arial', 'ＭＳ Ｐゴシック', sans-serif; font-size:12px; line-height:150%; color:#333333; } フォントサイズを12にしているのですが 別のフォントサイズとしてクラスで10pxを指定しても WindowsIEだと、10pxに表示されません。 また、bodyの12pxの指定をはずしても 10pxの指定が反映されませんでした。 ただし、16pxなど他のクラスだと反映されます。 10pxが反映されない理由が分かりません。 どなたかお分かりになる方 いらっしゃいましたら、ご教授願います。 よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- スタイルシートについて
スタイルシートでフォントサイズを指定する場合、 .style○○○ { size: 12px; }だと思うのですが、 次のリンクの３つをスタイルシートで上記のフォントサイズのようにあらわす場合どう表記すれば良いのでしょうか。 a:link { color: #0000cc; } a:visited { color: #000080; } a:active { color: #ff0000; } 一括でstyle○○になるのでしょうか。それとも３個しれぞれスタイルシートに登録するのでしょうか。 お願いします。
- ベストアンサー
- ホームページ作成ソフト
- 一部のパソコンでスタイルシートが読み込まない
こんにちわ 以下のスタイルシートを使っていますが一部のパソコンで読み込みにいかないような現象が起こっています。 相手のブラウザーはインターネットエクスプローラの６でOSはXPです。 サイトフォルダ内にCSSフォルダーを設けてその中のスタイルシートをいれています。 HTMLソース <LINK rel="stylesheet" href="css/body.css" type="text/css"> スタイルシート↓ h1 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; color:#FFFFFF; } h2 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } h3 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } h4 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } STRONG { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } em {font-size:12px;line-height:12px;font-weight : normal;normal;margin:0px;} .t0 {font-size:10px;} .t0h12 {font-size:10px;line-height:12px;} .t0h14 {font-size:10px;line-height:14px;} .t0h16 {font-size:10px;line-height:16px;} .t1 {font-size:12px;} .t1h14 {font-size:12px;line-height:14px;} .t1h16 {font-size:12px;line-height:16px;} .t1h18 {font-size:12px;line-height:18px;} .t2 {font-size:14px;} .t2h16 {font-size:14px;line-height:16px;} .t2h18 {font-size:14px;line-height:18px;} .t2h20 {font-size:14px;line-height:20px;}
- ベストアンサー
- HTML
- スタイルシートについて
宜しくお願い致します。 個人のホームページを作成しているのですが、ヘッダーの下にメニューボタンを横並びに置きたくて参考書通りにしているつもりなのですができません。ソースは HTMLソース <div id="content"> <p>what new</p> </div> <div id="sidebar"> <ul id="sidemenu"> <li><a href="link.html">トップページ</a></li> <li><a href="link.html">コンセプト</a></li> <li><a href="link.html">メニュー</a></li> <li><a href="link.html">ブログ</a></li> <li><a href="link.html">リンク</a></li> </ul> </div> CSSソース div#content{ font-size:0.75em; width:564px; } ul#sidemenu li{ list-style-type:none; float:left; } です。ど素人なものでどこが間違っているのかさえわかりません。 ご教授頂ければ幸いです。 どうぞ宜しくお願い致します。
- 締切済み
- グラフィックソフト
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
お礼
ありがとうございます。 理解できました！