HTMLでCSSでボーダーが表示されない理由と解決方法
- HTMLでCSSでボーダーが表示されない理由として、ボーダーの指定が不足している可能性があります。特に、#right_content要素にボーダーのスタイルを指定していないことが原因となっている可能性が高いです。解決方法としては、#right_content要素にborder属性を追加し、ボーダーのスタイル、幅、色を指定することです。
- また、ボーダーをfooterの上まで引きたい場合は、#right_content要素の高さを調節する必要があります。例えば、#right_content要素の高さを100％に指定することで、footerの上までボーダーを引くことができます。
- HTMLでCSSでボーダーが表示されない場合は、ボーダーの指定が正しくされているか、親要素の高さが適切に設定されているかを確認することが重要です。
- ベストアンサー
HTMLでCSSでボーダーが表示されません。
HTMLでCSSでボーダーが表示されません。 右サイドバー（right）の左にボーダーを表示させたいのですが、 画像のように文字を記述したところまでしかボーダーが表示されません。 ボーダーをfooterの上まで引きたいのですが、 わかる方いらっしゃいましたら回答宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"> <div id="right_title"></div> <div id="right_content"></div> </div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #right { float: left; height: auto; } #right_title { } #right_content { border-left-width: 1px; border-left-style: solid; border-left-color: #000; }
- aaiok
- お礼率34% (35/101)
- HTML
- 回答数9
- ありがとう数5
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
【以下長いです。】 ＞上記のようにした場合、ボーダーはfooterの上まで引くことは可能なのでしょうか。 はい、この場合、rightには、常に親コンテナブロックよりも短い行数になるのでしたら、height:100%が使えます。(absoluteは、floatと異なり親コンテナブロックのサイズを参照できます。) 下記にごく簡単なサンプルをHTML4.01strictで作成したものをあげておきます。マークアップは、私がテンプレートとして使用しているものを流用したものなので、aaiokさんのものとは、異なりますが、参考になると思います。 [ポイント]は、 absoluteするブロックのheight:100%です。 ★とりあえずブラウザはfirefox3.58、IE8、Opera9.26、Safari4.04で確認。 ★整合性は、下記で検証 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ★本文テキスト幅はせまくしてあります。 ・・・・・・div.footのborderのためだけに書き直したので、ウィンドウが極端に小さいときはずれます。・・・・ ★★下記ソースは、視認性のためタブを全角スペース２個で置換してあります。表示確認するときは、タブに戻してください。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- /* default.css */ html,body{margin:0px;padding:0px;background-color:gray;} p{text-indent:1em;margin:0.2em 1em;} /* screenShape.css */ h1,h2{ text-align: center;} div#Top{margin:0px 20%;line-height:60px;} div#Top h1{ font-size: 40px;margin:0px;} div.bodyText{ margin: 40px 20% 0px 20%; position:relative; min-height: 400px;min-width:400px; padding-right: 12%; } div.documentInfo ul#siteNav{ display:block;width:60%;min-width:400px; margin:0px 20%;padding:2px; position:absolute;top: 60px;left:0px; } div.documentInfo ul#siteNav li{ display:block;list-style:none; float:left;line-height: 24px; width:19%;min-width:60px;font-size: 16px; border-style:solid;border-width: 2px; } div.documentInfo ul#siteNav li a{ display:block; width:100%;height:100%; color:white;text-align:center; } div.bodyText div.memo{ font-size: 0.7em; } div.bodyText div.memo h2{ margin: 0.1em 1em; } div.bodyText div.foot{ position:absolute; width: 20%; top:0px; right:0px; border-style: solid; border-width: 0px 0px 0px 2px; height: 100%; } div.documentInfo{ margin:-15px 20% 0px 20%; min-width:400px; } /* colorScheme.css */ div.documentInfo ul#siteNav{ background-color: rgb(180,180,180); } div.documentInfo ul#siteNav li{ border-color: gray; background-color: rgb(100,100,100); } div.documentInfo ul#siteNav li a{ color:white; } div.documentInfo ul#siteNav li a:visited{ background-color: rgb(200,200,200); } div.documentInfo ul#siteNav li a:focus, div.documentInfo ul#siteNav li a:hover{ background-color: white; color:black; } div.documentInfo ul#siteNav li a:active{ background-color: red; } div.bodyText{ background-color: white; } div.bodyText div.foot{ border-color: blue; } div.documentInfo{ background-color: white; font-size: 0.9em; } --> </style> </head> <body> <div id="Top"> <h1>サンプル</h1> </div> <div class="bodyText"> <h1>質問内容</h1> <p> HTMLでCSSでボーダーが表示されません。 </p> <p> 右サイドバー（right）の左にボーダーを表示させたいのですが、画像のように文字を記述したところまでしかボーダーが表示されません。ボーダーをfooterの上まで引きたいのですが、わかる方いらっしゃいましたら回答宜しくお願い致します。 </p> <div class="memo foot"> <h2>脚注</h2> <p> 脚注部分に本文高さにわたってborderを引く </p> </div> </div> <div class="documentInfo"> <ul id="siteNav"> <li><a href="./index.html">Top</a></li> <li><a href="./info.html">Infomation</a></li> <li><a href="./product/index.html">Product</a></li> <li><a href="./sample1.html">SiteMap</a></li> <li><a href="./contactus.html">Contact</a></li> </ul> <h2>更新履歴</h2> <dl class="document-version"> <dt id="FIRST-PUBLISHED">First Published</dt> <dd>2005-06-10</dd> <dt id="LAST-MODIFIED">Last Modified</dt> <dd>2005-06-10 12:00:00 (JST)</dd> </dl> </div> </body> </html>
その他の回答 (8)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず最初に ＞CSSを上達できるようになるには、どういうサイトもしくは参考書などを見れば宜しいのでしょうか。 それは、直接仕様書を参照することです。仕様書自体はそんなに大きな量ではないですし、知りたいことがすべて書いてあるはずです。参考書にしろウェブ上のものにしろ、そのほとんどは「孫引き」や「孫孫引き」で直接仕様書を見ているとは思えません。 REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) 極論すれば、これ以外に見なくてもない(笑) CSSとは、Cascading Style Sheetsのことです。Cascading(継承される)と書かれているのに、詳細度や子孫セレクタなどセレクタを活用していないマニュアルなんておかしいですね。何でもかんでも#で指定してある時点で、そのマニュアルはおかしい!!たぶん、オーサリングツールを使うと、そうするしか指定方法がないためでしょう。 以下簡単に (1)スタイルシート上でこのように追記できるのですか？ 6.4.1 カスケード処理の順序 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascading-order )の4. (2)div.bodyText div.footのような記述方法。 5.5 子孫セレクタ（Descendant selectors） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#descendant-selectors ) (3)div.documentInfo ul#siteNavのような記述方法。 同上 (4)liを使用した横並びメニューは、 CSSの仕様、HTMLの仕様には関係ない。とはいってもHTML4.01以降 (5)/* default.css */のhtml,bodyという記述方法は、 5.2.1 グループ化（Grouping） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#grouping ) (6)<div class="memo foot">という表記は、 これはHTMLの仕様 class = cdata-list [CS] ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-class ) (7).footと表記せずにdiv.bodyText div.footと長い表記するのは何か理由があるのでしょうか？ 6.4.3 セレクタの詳細度を計算する（Calculating a selector's specificity） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#specificity ) （また、div.bodyTextとdiv.footの間の半角スペースは「～の内ブロックの」という意味でしょうか？ (2)(3)に同じ ★基本的に#の指定は行いません。classや詳細度、子孫セレクタ、兄弟セレクタ・・を駆使すれば、基本的に不要というか、邪魔 たとえば本文ブロック内のメモブロックについては、すべてフォントサイズを0.8emとする場合、div.mainText div.memo で済む。 ★仕様書を通しで見ながら、ひとつずつ試してみる。それが一番の早道です。
お礼
回答して頂き有難う御座います。 また、色々教えて頂き感謝しています。 質問のボーダーについては背景画像やpositionを利用することで解決できるという事を学ぶことが出来ました。また、CSSの記述方法など教えて頂いた内容は一朝一夕にはいきませんが、今後理解していきたいと思います。
- tkmojo
- ベストアンサー率50% (105/207)
＞rightに背景画像を使用しても ＞途中までしか表示されないのではないでしょうか。 floatしたボックスではなく、その親ボックスに背景を指定します。 すると当然親ボックスの下まで背景が表示されます。 今回の場合はcontainerですね。
補足
containerにボーダーの背景画像を使用するということは rightの高さが増加すれば当然背景画像のボーダーも その都度訂正しなくてはならないということでしょうか。
- infinity38
- ベストアンサー率25% (1/4)
<div id="container">にボーダーの背景画像を指定します。 そうすればfooterの上まで表示させられます☆
補足
containerにボーダーの背景画像を使用するということは rightの高さが増加すれば当然背景画像のボーダーも その都度訂正しなくてはならないということでしょうか。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<div id="container"> <div id="left"></div> <div id="right"> <div id="right_title"></div> <div id="right_content"></div> や #right { float: left; } このHTMLとしては奇妙なマークアップ、最近本当によく上がってくるのですが、皆さん何を参考にしているのでしょう。 ★floatは、本来はコンテナブロック内に画像などのブロックの周囲に他のブロック要素・インライン要素を回り込ませるためのプロパティですから、当然 1) そのブロックが短ければ、【そこで終了して】他の要素は回り込んで本来の位置に戻る 2) 長ければ、解除されない限りすべての要素はfloatする。 3) 【親コンテナブロック】【後続する要素】のサイズを引き継がない・無視する が期待されています。 どすから、本来は、本文やメニューなどを配置するものではなく、あくまで本文中の画像の周囲に本文を回り込ませる用途に限定して使用するものです。 そんな使い方をしたら、本文中に画像があってfloatさせ、どこかで解除したら、すべてずれてしまう。 このような２カラムや３カラムの配置に使用すべきではありません。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ この場合、コンテナブロックをrelativeでいったん指定してから、各カラムをabsoluteで指定すると、(親コンテナブロックがstatic以外に指定されていると)親ブロック内のサイズも参照してくれる。
補足
HTML4.01までは本来floatの使用方法は画像のみに使用していましたが、 HTML5やXHTMLではサイトのデザインは基本的にCSSで作ることを推奨ということで、 Tableタグを使用しないで、大手ブログのテンプレートやホームページで多用されている floatでデザインする方法しか思いつきませんでした。 floatではそもそも質問にあるようなボーダーの記述は無理と言うことですが positionプロパティを使用すれば可能と言うことでしょうか？ positionプロパティでrelativeを使用するデザイン方法は、 まだ使用したことがありません。質問なのですが、 containerにposition:relative;width:800px;とし rightにposition:absolute;top: 10px;left:600px;width:200px;、 rightt_titleにposition:absolute;top: 10px;left:600px;width:200px;height:20px;、 right_contentにposition:absolute;top: 30px;left:600px;width:200px;height:auto; border-left:solid 1px #000000; というようにrightのpositionをしていするということでしょうか。 （分かりやすいように余白等は省略しています） 上記のようにした場合、ボーダーはfooterの上まで引くことは可能なのでしょうか。 宜しくお願い致します。
- tkmojo
- ベストアンサー率50% (105/207)
floatというのはそういうものです。 そういう場合は背景画像で対応するのが一般的だと思いますが、 背景画像では駄目なのですか？
補足
rightに背景画像を使用しても 途中までしか表示されないのではないでしょうか。
- TanakaHiro
- ベストアンサー率62% (247/396)
横幅固定か横幅可変かによって違ってきますが、横幅固定でしたら・・・ #wrapper { width: 800px; } #left { float: left; width: 600px; } #right { float: left; width: 200px; } #footer { clear: left; } みたいな感じにすると、うまくいくかもしれません。
お礼
回答有難う御座います。 そのように記述していたのですが できませんでした。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
float自体がそういう仕様なので、無理です。 そもそもマークアップが適切でない。 relative内でabsoluteで指定する。高さは100%・・
補足
回答有難う御座います。 relativeではできませんでした。
- totomac
- ベストアンサー率53% (53/99)
to-RさんのheightLine.jsを組み込んでみたらどうですか？
お礼
回答有難う御座います。 機会があれば使用してみたいと思います。
関連するQ&A
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- HTMLのfooterの設定がうまくいきません
HTMLのfooterの設定がうまくいきません 画像のようにleftがrightよりも高さが大きく、 以下のように記述しましたがfooterがうまく ページの最下位に表示されません。 現在は画像の左のような状態で、 右の画像のようにしたいです。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #left{float:left;} #right{float:right;} わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- floatをfooterに指定すると正しく表示ができない。
floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!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=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>
- ベストアンサー
- HTML
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
- CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
- CSSレイアウト(2列型)に関して
お世話になります。2列の左列がメインで右列がサイドバーというCSSレイアウトに関してご質問します。 以下のような構造のCSSレイアウトを作成しました。 body | |-- #wrapper | | | |-- #content | | | | | |-- #main | | | | | |-- #sidebar body { background: yellow; } #wrapper { width:700px; background: white; } #content { width: 700px; background: white; } #main { float: left; width: 500px; background: white; } #sidebar { float: right; width: 200px; background: blue; } ※padding: 0;margin: 0;を実際には全てに追加してあります。 ----- 以下HTMLファイル ----- <body> <div id="wrapper"> <div id="content"> <div id="main"> <p> ・・・・・・ </p> </div> <div id="sidebar"> <p> ・・・・・・・ </p> </div> </div> </div> </body> 上記においてIE6ではメイン(#main)の高さがサイドバー(#sidebar)の高さより高い場合、サイドバーの下部は#contentで指定した白になります。しかしFirefoxではサイドバーの下の部分がbody要素に指定したyellowになってしまいます。※Firefox1.07で試しています。 メイン(#main)やサイドバー(#sidebar)の高さを指定していないためと考えますが、メイン及びサイドバー共に高さを可変にするため固定値を設定したくない場合は、FirefoxでIEのように#contentの背景色(白)を反映するにはどうすればよいのでしょうか。 質問が長くなりましたが、手がかりでもつかめればと思っています。どうぞ宜しくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- CSSのborderが実際の領域より上に表示される
お世話になります。 CSSのborder-bottom指定のことでどうしても分からないことがあります。 div#contensにborder-bottom指定をしてその直下のdiv#footerと区別したいと考えています。 本当はdiv#footerにborder-top指定すればいいのでしょうが、footerはbackground-imageが2500pxあり、border-topすると、2500px分表示されます。 実際のコンテンツ領域は800px分なので、800pxだけのborderがほしいのです。 ところが、div#contensにborder-bottom指定すると、実際の情報量より上にborderが表示されます。これはどうしてでしょうか？ いろいろ考察したところ、どうやらmin-height:800px;の指定が原因で適用されているようです。min-heightはページによって情報が少ない場合でもある程度の高さを確保するために設定していますが、800px以上の情報量となる場合は、その情報量に沿ってきちんとborderも可変してほしいのです。解決法をどうか教えていただけないでしょうか。 よろしくお願いします。 CSS--- body { background-image:url(../images/site-body.jpg);←この画像が2500pxあります。 background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin:0px; } div#header { width:800px; height:150px; margin-left:auto; margin-right:auto; } div#contens { border-bottom:1px dotted #333333; width:800px; height:auto !important; min-height:800px; margin-left:auto; margin-right:auto; } div#footer { background-image:url(../images/footer-bg2.jpg) ;←この画像も2500pxあります。 background-repeat:no-repeat; background-position:bottom; height:100px; } HTML--- <body> <div id="header"> ～省略～ </div> <div id="contens"> <div id="leftmenu"> ～省略～ </div> <div id="rightmenu"> ～省略～ </div> </div> <div id="footer"> ～省略～ </div> </body>
- ベストアンサー
- ホームページ作成ソフト
- このHTMLとCSSをひとつにするのはどうすれば？
WordpressのAddQuickTagを使うために別れたままでは使うことができません＞＜ https://saruwakakun.com/html-css/reference/box ちなみに１９番のカギカッコを使いたいと思っています。 何卒よろしくお願いいたします！！ HTMLが・・・ <div class="box19"> <p>ここに文章</p> </div> CSSが・・・ .box19 { position: relative; padding:0.25em 1em; } .box19:before,.box19:after{ content:''; width: 20px; height: 30px; position: absolute; display: inline-block; } .box19:before{ border-left: solid 1px #5767bf; border-top: solid 1px #5767bf; top:0; left: 0; } .box19:after{ border-right: solid 1px #5767bf; border-bottom: solid 1px #5767bf; bottom:0; right: 0; } .box19 p { margin: 0; padding: 0; }
- 締切済み
- HTML
- div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
補足
無駄のない綺麗な記述でお手本のようで大変参考になりました。 positionプロパティとheight:100%;を利用したボーダーを 理解することができました。 スタイルシートの記述方法は目から鱗でした。 見たことのない記述方法で驚きました。 以下に疑問点が残りましたので回答の方宜しくお願い致します。 (1)div.bodyTextやdiv.bodyText div.footが2回出てくるのですがスタイルシート上でこのように追記できるのですか？ (2)div.bodyText div.footのような記述方法。（divのclass=bodyText内にあるdivのclass=footのスタイルシートは…という意味ですか？） (3)div.documentInfo ul#siteNavのような記述方法。（divのclass=documentInfo内にあるulのid=siteNavのスタイルシートは…という意味ですか？） (4)liを使用した横並びメニューは、inlineを使用してXHTMLでしかできないと某CSSの雑誌で学んだのですが、実際質問者様がHTML4.01でliで横並びのメニューをdisplay:block;を利用して作成しているので、できるのですか？ (5)/* default.css */のhtml,bodyという記述方法は、どういう時にbodyの前にhtml,を付けるのでしょうか？ (6)<div class="memo foot">という表記は、divにmemoというclassとfootというclassを２つ指定しているのでしょうか？では、仮にclassにclass="A B C D"という４つのclassも指定可能なのでしょうか？ (7).footと表記せずにdiv.bodyText div.footと長い表記するのは何か理由があるのでしょうか？（また、div.bodyTextとdiv.footの間の半角スペースは「～の内ブロックの」という意味でしょうか？ その都度、質問などをして理解するようにはつとめているのですが、CSSを経験した年数に比べると、まだまだ私はCSSを理解していないと思います。質問者様のようにCSSを上達できるようになるには、どういうサイトもしくは参考書などを見れば宜しいのでしょうか。 宜しければ教えてください。