最初のセクションのみ横幅、高さとも一杯に表示、背景画像有り(background-attachment:fixed)で固定、他は中央配置(max-width:960px)、高さは非固定、全体をボーダーで囲むような感じのデザイン(参照画像 / 緑 : ボーダー / 青 : 背景画像 / 赤 : 各セクション)を作ろうとしているのですが思うようにいきません。
背景を変え、ボーダーなどを付けて確認したのですがheight:100%の入れ子(最初のセクション)を作った際(body > #border > #background > .section)の.sectionでbody内の要素は全てと判定されてるみたいで(.section:last-childを付けて確認)途切れてしまいます。

参照画像のようにするためにはどうすればいいでしょうか?

以下ソースです

*HTML部分

<body>
<div id="border">
<div id="background">
<div class="section">
<p>Section-1st</p>
</div>
</div>
<div class="section">
<p>Section-2nd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</div>
<div class="section">
<p>Section-3rd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</div>
<div class="section">
<p>Section-4th<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</div>
<div class="section">
<p>Section-Last<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</div>
</div>
</body>

*CSS部分

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body,
html {
width: 100%;
height: 100%;
}

body {
border: dotted 5px #95a5a6;
}

#border {
width: 100%;
height: 100%;
min-height: 100%;
margin: 0 auto;
border: solid 5px #34495e;
}

#background {
width: 100%;
height: 100%;
background: #3498db;/*本来なら画像が入ります*/
display: table;/*文字が見やすいように、削除可*/
}

#background > .section {
height: 100%;
display: table;/*文字が見やすいように、削除可*/
background: none;
}

.section p {
display: table-cell;/*文字が見やすいように、削除可*/
text-align: center;/*文字が見やすいように、削除可*/
vertical-align: middle;/*文字が見やすいように、削除可*/
}

.section {
max-width: 960px;
width: 100%;
margin: 0 auto;
background: #fff;
border: solid 5px #2ecc71;
}

body .section:last-child {
border: solid 5px #e74c3c;
}

「height:100%を使用した入れ子の」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (4件)

「ソースの#borderで全てを囲むボーダー線は出せないのか」ということですが、先の私の書いたhtml/cssで実現してません?私がしたことは#borderを.wrapperに変えただけです。



他回答者さんが「デザインの為にhtmlは書かない」という話があったので、.wrapperを削る場合は以下のようになると思います(これに関しては単に.wrapperっていう名前が悪いだけで、#mainとかいう名前だったらいいんじゃないのかなとか個人的には思うんですが・・・)。

とにかく、以下のポイントが分かればどのような書き方もできるんではないでしょうか?
・height:100%はブラウザウィンドウのサイズに対して100%で固定。
・min-heightは可変だが最低限の高さを指定する。

```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body{
margin: 0;
}
html{
height: 100%;
}
body{
min-height: 100%;
box-sizing: border-box;
border: solid 5px red;
}
.footer{
height: 50px;
background-color: lightgray;
}
.section{
height: 0;/*500pxとかに変えてみて*/
width: 100%;
border: solid 5px blue;
}
</style>
</head>
<body>
<div class="section">Hello1</div>
<div class="section">Hello2</div>
<div class="section">Hello3</div>
<div class="section">Hello4</div>
<div class="section">Hello5</div>
<div class="footer">コンテンツが足りなくても、html,body{height:100%}と、ここがせり上がらない。</div>
</body>
</html>
```
    • good
    • 0
この回答へのお礼

お返事遅くなってすみません
ちょっと質問の仕方が悪かったのでソース変えてもう一度質問します。
もし宜しければ
http://oshiete.goo.ne.jp/qa/8784003.html
までお願いします。

お礼日時:2014/10/09 02:54

>上のページのソース等見たんですが空divをいくつか使って擬似的に囲むもしくは一番下の要素に背景色をつけpaddingを使ってボーダー線のようにするといった風に対応してるようなんですが


 それでしたら、一目瞭然、
・内容を書き換えるときはどうするのだろう・・・
・デザインを変更するときは大変だろうな
  例えばPC用はこのデザイン、スマホ横置きはこのデザイン、
  スマホ縦なら・・、印刷にはこのデザイン、スクリーンリーダーには・・
  検索エンジンにも正しく理解して欲しいし
   なんて夢のまた夢(^^)

★とにかく、せっかく『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』のためにスタイルシート使う意味がない!!!
※ されたいことが未だに良く分からないのですが、headerを含めてborderで囲むこともできますが、今回はheader以外をborderで囲んだ。
※ HTMLには文書構造しか書いてないので、デザインは自由に変更できる。ちなみに下記は印刷や携帯電話には適用されない。
※ HTMLもスタイルシートもこんなに簡単・・

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 のDATA(右上)で確認済みHTML5+CSS2.1(一部CSS3rgba())です。
★タブは_に置換してあるので戻す。

<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<style media="screen">
<!--
html{margin:0;padding:0;width:100%;/* position:relative;*/}
body{margin:0;padding:0;width:100%;border:solid green 2px;/* position:relative;*/}
header{position:relative;width:90%;height:100%;background-color:aqua;position:fixed;top:5px;left:5%;}
section,body>footer{width:600px;margin:0 auto;padding:5px;border:5px ridge gray;}
section,body>footer{position:relative;z-index:10;}
section{border-width:5px 5px 0 5px;}
section+section{border-width:0 5px;}
footer{border-width:0 5px 5px 5px;}
section{background-color:yellow;}
section+section{background-color:rgb(255,255,160);}
section+section+section{background-color:rgba(255,255,255,0.4);}
footer{background-color:silver;}

-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<p>アイウエおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをん</p>
_</header>
_<section style="min-height:300px;">
__<h2>A smaller heading1</h2>
__<p>段落記事</p>
_</section>
_<section style="min-height:500px;">
__<h2>A smaller heading2</h2>
__<p>段落記事</p>
_</section>
_<section style="min-height:300px;">
__<h2>A smaller heading3</h2>
__<p>段落記事</p>
_</section>
_<footer style="min-height:300px;">
__<h3>A nice footer</h3>
_</footer>
</body>
</html>



 
    • good
    • 0
この回答へのお礼

お返事遅くなってすみません
ちょっと質問の仕方が悪かったのでソース変えてもう一度質問します。
もし宜しければ
http://oshiete.goo.ne.jp/qa/8784003.html
までお願いします。

お礼日時:2014/10/09 02:56

 デザインのためにHTMLは決して書かない!!。

スタイルシートを導入する最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」なのですから。
<body>
 <div class="header">
  <h1>タイトル</h1>
 </div>
 <div class="section">
   <h2>本文</h2>
  <div class="section">
   <h3>項</h3>
   <p>HTML4.01では文書構造はclass名で</p>
  </div>
  <div class="section">
   <h3>項</h3>
   <p>段落</p>
  </div>
  <div class="section">
   <h3>項</h3>
   <p>段落</p>
  </div>
 </div>
 <div class="footer">
  <h3>文書のフッタ</h3>
 </div>
</body>

HTML5だと
<body>
 <header>
  <h1>タイトル</h1>
 </header>
 <section>
   <h2>本文</h2>
  <section>
   <h3>項</h3>
   <p>HTML5ではDIVは原則使わない</p>
  </section>
  <section>
   <h3>項</h3>
   <p>段落</p>
  </section>
  <section>
   <h3>項</h3>
   <p>段落</p>
  </section>
 </section>
 <footer>
  <h3>文書のフッタ</h3>
 </footer>
</body>

>最初のセクションのみ横幅、高さとも一杯に表示、背景画像有り(background-attachment:fixed)で固定、他は中央配置(max-width:960px)、高さは非固定、全体をボーダーで囲むような感じのデザイン(参照画像 / 緑 : ボーダー / 青 : 背景画像 / 赤 : 各セクション)を作ろうとしているのですが思うようにいきません。

 意味が分からないのですが、文書構造とデザインは独立して考えないとうまく行くはずがありません。
 HTMLが上記だとして

 確認ですが
・headerは背景も表示ウィンドウ全体に合わせて一杯に表示
・section1~はheaderに続いているのか
・スクロールして読み進むとheaderは固定されたままなのか
・ウィンドウ幅が狭い、スマホ縦置きの場合は背景画像は伸縮して画面を覆うのか
「height:100%を使用した入れ子の」の回答画像2
    • good
    • 0
この回答へのお礼

説明が下手で申し訳ございません。
やろうとしてる事は
ttp://terminalplanning.aero/
ttp://www.emmamethod.com/
ttp://www.jenslehmann.com/#/ambassador
ttp://mageredavid.fr/
上記のようにボーダー線で全てを囲み尚且つヘッダーのみ画面一杯に表示といった感じなのですが
上のページのソース等見たんですが空divをいくつか使って擬似的に囲む
もしくは一番下の要素に背景色をつけpaddingを使ってボーダー線のようにする
といった風に対応してるようなんですが
今回質問したかったことはソースの#borderで全てを囲むボーダー線は出せないのかといった事です。(bodyに付けてるborder: dotted 5px #95a5a6;は確認のために付けたものなので消してもらって構いません)

お礼日時:2014/10/08 14:59

うまくいかない部分はどこのことですか?bodyにかけたborderが画面最下部のコンテンツまですべて内包して欲しいのでしょうか?


それであれば以下のようにwrapperで全体を囲み、そこにborderを設定するといいです。bodyとhtmlに対するheight:100%は、body内のすべてのコンテンツがブラウザのウィンドウサイズ以下であった場合にブラウザウィンドウサイズの高さを確保するためのものです。コンテンツの高さは基本的にはブラウザウィンドウの高さを超えるので、ブラウザウィンドウの高さを超えた分を包むのは.wrapperの仕事です。

以下コピペで確認してみてください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body{
height: 100%;
margin: 0;
}
.wrapper{
box-sizing: border-box;/*もしくはborderの上下の合計値をmargin-bottomから更に引いてもいい*/
min-height: 100%;
border: solid 5px red;
margin-bottom: -50px;/*footerの高さ分*/
/*box-sizingをしない場合*/
/*margin-bottom: -60px;*/
}
.footer{
height: 50px;
background-color: lightgray;
}
.section{
height: 0;/*500pxとかに変えてみて*/
width: 100%;
border: solid 5px blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="section">Hello1</div>
<div class="section">Hello2</div>
<div class="section">Hello3</div>
<div class="section">Hello4</div>
<div class="section">Hello5</div>
</div>
<div class="footer">コンテンツが足りなくても、html,body{height:100%}と、ここがせり上がらない。</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

説明が下手で申し訳ございません。
やろうとしてる事は
ttp://terminalplanning.aero/
ttp://www.emmamethod.com/
ttp://www.jenslehmann.com/#/ambassador
ttp://mageredavid.fr/
上記のようにボーダー線で全てを囲み尚且つヘッダーのみ画面一杯に表示といった感じなのですが
上のページのソース等見たんですが空divをいくつか使って擬似的に囲む
もしくは一番下の要素に背景色をつけpaddingを使ってボーダー線のようにする
といった風に対応してるようなんですが
今回質問したかったことはソースの#borderで全てを囲むボーダー線は出せないのかといった事です。(bodyに付けてるborder: dotted 5px #95a5a6;は確認のために付けたものなので消してもらって構いません)

お礼日時:2014/10/08 14:59

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでbackground-colorがうまく設定できない。

初心者すぎてどうやってもわからなかったので質問させて頂きました。

以下のHTMLのタグ?(テキストナビ?のつもり)に背景色を付けたいのですが、CSSでバックグラウンドカラーを設定すると、背景色の高さが、ページの一番上まで伸びてしまいます。背景色の高さを調節したいのですがどうすればよいのでしょうか?

<div id="navi">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</div>

この下のタグには文字に背景色が文字の高さ分、普通に表示されました。(上のタグの下にあります。)
<div id="pagetitle">
<a class="midasi">Inside </a>
<a class="komidasi"> - サイト概要 -</a>
</div>

原因が分からないので関係あるのかわかりませんが、ページの一番上には、リストで作ったメニューバーがあります。このリストはmargin-topで下に下げてあります。その下に最初のタグが並んでいます。単独では問題ないと思うのですが、リストで作ったメニューバーの影響のような気がするのですが、よくわかりません。

どうやって質問したらよいのかわからなかったので、このようになりましたが、情報不足でしたら補足しますので、よろしくお願いします。

初心者すぎてどうやってもわからなかったので質問させて頂きました。

以下のHTMLのタグ?(テキストナビ?のつもり)に背景色を付けたいのですが、CSSでバックグラウンドカラーを設定すると、背景色の高さが、ページの一番上まで伸びてしまいます。背景色の高さを調節したいのですがどうすればよいのでしょうか?

<div id="navi">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</div>

この下のタグには文字に背景色が文字の高さ分、普通に表示されました。(上のタグの下にあり...続きを読む

Aベストアンサー

Opera 対応, IE 対応が、どうにか出来たと思う
改良版をご提示致します。


=== CSS ===

body{
margin-top:0px;
}
.sdvDummy1{
margin-top:125px;
margin-left:0;
padding:0;
background:#cccc00;
float:left;
clear:both;
line-height:1px;
}
.sdvDummy2{
clear:both;
line-height:9px;
}
.contents{
color:#330000;
background:#ffffcc url("image/title.jpg") no-repeat top;
margin-right:auto;
margin-left:auto;
border-top:solid 0px #330000;
border-right:solid 25px #330000;
border-bottom:solid 25px #330000;
border-left:solid 25px #330000;
width:606px;
}
ul#menu{
clear:both;
margin:0;
padding:0;
}
ul#menu li{
background:#cccc00;
float:left;
white-space:nowrap;
list-style-type:none;
}
ul#menu a{
display:block;
color:#cccc00;
background-color:#330000;
margin:0 0 0 1px;
width:120px;
height:30px;
font:12px/30px normal;
text-decoration:none;
text-align:center;
}
#menu a:hover{
color:#ffcc00;
background:#cccc00;
}
#menu a:active{
color:#ffffcc;
background:#cccc00;
}
#menu span{
color:#ffffff
display:none;
}
#menu .current{
color:#ffcc00;
}
#menu .line{
border-right:1px solid #cccc00;
}
#navi{
color:#ffffcc;
background-color:#cccc00;
padding-right:20px;
clear: both;
font-size:11px;
text-align:right;
}
#navi a{
color:#330000;
margin-top:0;
margin-left:0;
font-size:11px;
text-decoration:none;
}
#navi a:hover{
color:#ffcc00;
}
#navi a:active{
color:#ffffcc;
}
#pagetitle{
padding:10px 0 0 20px;
}
.midasi{
color:#330000;
font-size:18px;
font-weight:bold;
margin:0;
}
.komidasi{
color:#cccc00;
font-size:14px;
font-weight:bold;
}


=== HTML ===

<body>
<div class="contents">
<div class="sdvDummy1"></div>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a class="current" href="inside.html">Inside</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="request.html">Request</a></li>
<li><a class="line" href="contact.html">Contact</a></li>
</ul>
<div class="sdvDummy2"></div>
<div id="navi" style="clear: both;">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</div>
<div id="pagetitle">
<a class="midasi">Inside </a>
<a class="komidasi"> - サイト概要 -</a>
</div>
<!--罫線-->
<hr color="#cccc00" size="1px">
</div>
</body>


=== ポイント ===

背景は、既定値は継承でなく透過だったと思うのですが・・・。
OL や UL のリスト要素に指定してもその指定がうまくいかない様で
LI 要素に指定すると期待する結果が得られる様で。

リストを横に Opera でも表示するには、
OL や UL のリスト要素に float:left; を指定しない方法を探さないといけない様で
かといって今回は、 float:left; 含みで margin-top を指定して上からの位置を指定したい物がある。
という事で、位置指定を別要素で行う様に分離しました。
HTML の記述上ではあまり綺麗な記述ではありませんが、
とりあえず、文法はクリアしている上に
各ブラウザに対応しているという実用の上からは
適切な記述になっていると思います。


以上でなんとか、実用的にも知識的にもクリアできたと思います。
また何かございましたら、ご質問下さい。

Opera 対応, IE 対応が、どうにか出来たと思う
改良版をご提示致します。


=== CSS ===

body{
margin-top:0px;
}
.sdvDummy1{
margin-top:125px;
margin-left:0;
padding:0;
background:#cccc00;
float:left;
clear:both;
line-height:1px;
}
.sdvDummy2{
clear:both;
line-height:9px;
}
.contents{
color:#330000;
background:#ffffcc url("image/title.jpg") no-repeat top;
margin-right:auto;
margin-left:auto;
border-top:solid 0px #330000;
border-right...続きを読む

Qheight100%=最初に表示される画面の高さ?

はじめまして。
CSSで教えてほしいのですが・・・
今回はたとえ、1行2行のコンテンツでも背景(ブロック)がブラウザの一番下までいき、スクロールしてもブラウザの下までぴったり背景が続いているものを作りたく思っています。
ただ、何度試しても短いコンテンツにはしたまで表示されるのですが、長めのコンテンツだとはじめに見えてるブラウザの枠より下はいっさい背景が表示されません・・・

これをなんとかコンテンツのボリュームに合わせて、つまり、
最低はブラウザ目一杯の縦幅、最大は可変を実現したいのですが・・・

教えてください。

Aベストアンサー

背景画像(たとえばimageフォルダにあるback.gif)として埋め尽くすだけなら、
BODY {
background-image: url(image/back.gif);
background-repeat: repeat;
}
でやれば1つの画像によって背景全部がその画像が敷き詰められてズラズラ並びます。

イラスト(300px*300px)などを100%指定しても、
画像の100%の大きさ、300px*300pxでしか表示されません。

Qオンマウスにしたときのborder-colorの指定(CSS)

スタイルシートで立体的に見せるボタンを作成しています。

.menu05 ul{
list-style-type: none;
line-height: 170%;
}

.menu05 li{
border-top: solid 2px #ffffff;
border-right: solid 2px #c0c0c0;
border-bottom: solid 2px #c0c0c0;
border-left: solid 2px #ffffff;
display: block;
float: left;
}

.menu05 a:hover{
border-top: solid 2px #c0c0c0;
border-right: solid 2px #c6c6c6;
border-bottom: solid 2px #c6c6c6;
border-left: solid 2px #c0c0c0;
color:#ff0000;
display: block;
}
で、
HTMLの記述は、

<div class="menu05">
<ul><li><a href="#">ご案内</a>
<li><a href="#">プラン</a>
<li><a href="#">プレゼント</a></ul>
</div>

です。

オンマウスにしてもborder-colorが変わりませんが、どこを修正したらよいでしょうか?

スタイルシートで立体的に見せるボタンを作成しています。

.menu05 ul{
list-style-type: none;
line-height: 170%;
}

.menu05 li{
border-top: solid 2px #ffffff;
border-right: solid 2px #c0c0c0;
border-bottom: solid 2px #c0c0c0;
border-left: solid 2px #ffffff;
display: block;
float: left;
}

.menu05 a:hover{
border-top: solid 2px #c0c0c0;
border-right: solid 2px #c6c6c6;
border-bottom: solid 2px #c6c6c6;
border-left: solid 2px #c0c0c0;
color:#ff0000;
displa...続きを読む

Aベストアンサー

#3 です。

> ちなみにdisplayのinline;とは何ですか?

端的に言ってしまうと、

display: block; ==> 段落
display: inline; ==> 段落を形成する要素

かな。(上手く表現できない)

【例文】

 1).
   <p>語句の組み合わせ</p>
   <p>語句の組み合わせ</p>
 2).
   <p><em>語句の組み合わせ</em>
   <em>語句の組み合わせ</em></p>

上記の例文をブラウザで表示すると、

(1)は、
  語句の組み合わせ
  語句の組み合わせ

(2)は、
  語句の組み合わせ 語句の組み合わせ

のように表示され、改行の違いがありますよね。
これは、<P> が“block”要素に用いるダグ、<EM> が“inline”要素に用い
るダグと最初から決まっているからです。

p { display: inline } とすれば、<P> 要素は段落を形成する一要素になり、
em { display: block } とすれば、<EM> 要素は、それ自体が段落となります。

これで分かりますかね!?

因みに、li { float: left } と指定しているのを見て、<LI>要素を改行なし
で横に並べたいんだと解釈して、先の投稿となりました。
“float”と“display”指定の違いは、前後の要素に及ぼす影響などを、い
ろいろ実験してください。

#3 です。

> ちなみにdisplayのinline;とは何ですか?

端的に言ってしまうと、

display: block; ==> 段落
display: inline; ==> 段落を形成する要素

かな。(上手く表現できない)

【例文】

 1).
   <p>語句の組み合わせ</p>
   <p>語句の組み合わせ</p>
 2).
   <p><em>語句の組み合わせ</em>
   <em>語句の組み合わせ</em></p>

上記の例文をブラウザで表示すると、

(1)は、
  語句の組み合わせ
  語句の組み合わせ

(2)は、
  語句の組み合わせ 語句の...続きを読む

Q入れ子にしたテーブルをheight100%にする

お世話になります。
以下のソースで、table2の高さを100%にしたいです。
この書き方では、firefoxではうまく表示できるのですが、
IEではだめでした。どこがいけないのでしょうか??
----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
html {height:100%;}
body {height:100%;}
.th100 {height:100%;}
-->
</style>
</head>

<body>
<table width="600" border="1" cellpadding="0" cellspacing="0" class="th100">
<tr>
<td width="300" rowspan="2">
長いテキスト
</td>
<td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td>table1</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100">
<tr>
<td>table2</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

お世話になります。
以下のソースで、table2の高さを100%にしたいです。
この書き方では、firefoxではうまく表示できるのですが、
IEではだめでした。どこがいけないのでしょうか??
----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
html {height:100%;}
body {height:100%;}
.th100 {height:100%;}
-->
</style>
</head>

<body>
<table width="6...続きを読む

Aベストアンサー

こちらではうまく再現できないのですが、CSSの設定を次のようにしてみてください。

body {height:100%; margin: 0; padding: 0;}
.th100 {height:100%;}

これでも駄目なら。

table, tr, td {margin: 0; padding: 0;}

を追加してみる。

Qbackground-color css

あるテーブルの<td>タグに2色のbackgroundcolorを指定し、Aの場合はA色のbackgroundcolorを指定し、Bの場合はA色の上にB色のbackgroundcolorを重ねたいですが、ソースは下記の要となっていますが、私にわかるのが<div>での指定しか分からなくて、それ以外の方法があれば教えていただきたいです。<!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=windows-31j" />
<title>新規予約</title>
</head>
<body>
<style>
.test{
position:relative;
width:100px;
height:100px;
z-index:2;
background-color:rgb(255,0,255);
}
.test_2{
position:relative;
top:-20px;
width:50px;
filter: alpha(opacity=50);
opacity:0.5;
}
.test_3{
position:relative;
color:rgb(255,255,255);
height:100px;
background-color:rgb(0,0,255);
z-index:1;
}
.test_4{
position:relative;
color:rgb(0,0,0);
weight:100px;
z-index:2;
}
</style>
<div class="test">
<div class="test_4">
<a href="test">テスト</a>
</div>
<div class="test_2">
<div class="test_3">
</div>
</div>
</div>
</body>
</html>

あるテーブルの<td>タグに2色のbackgroundcolorを指定し、Aの場合はA色のbackgroundcolorを指定し、Bの場合はA色の上にB色のbackgroundcolorを重ねたいですが、ソースは下記の要となっていますが、私にわかるのが<div>での指定しか分からなくて、それ以外の方法があれば教えていただきたいです。<!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-T...続きを読む

Aベストアンサー

HTMLソースの一部しか示されていないので、質問の内容が読み解けません。
A,とかBは何のことですか?
テーブルのタグと書かれていますが、table内の、td要素の内容のことだとは思いますが、HTMLソースにそれらしきものはありません。
そもそもdixは汎用ブロック要素なのでこのような使い方はしません。きちんとセレクタを使えば必要ないと思います。

 簡単でよいですから、該当部分のHTMLを記載してください。

・table(表)でないものをtableでマークアップするのは良くないです。
・charset=windows-31jは、Windows環境でないと利用できない可能性があるので、せっかくのXHTMLですから、UTF-8(unicodeにしましょう。

Qdiv入れ子による height100%

お世話になります。

親要素のdivは縦100%になるのですが、
入れ子のdivが縦100%にならず困っております。

検証ブラウザは、IE6、IE7、FF2、Safariです。

お分かりの方、ご教授をお願いいたします。

▼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>test</title>
<style type="text/css">
<!--
html { height:100%; }
body { height:100%; margin:0; padding:0; }

#wrapper {
background: #99CC00;
width:500px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}
#wrapper-inner {
background:#CCFF00;
width:450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}
#contents {
background: #FFFFCC;
width:400px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}

* html #wrapper { height: 100%; }
* html #wrapper-left { height: 100%; }
* html #wrapperA { height: 100%; }

-->
</style>
</head>
<body>

<div id="wrapper">
<div id="wrapper-inner">
<div id="contents">
テスト
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>

</body>
</html>

お世話になります。

親要素のdivは縦100%になるのですが、
入れ子のdivが縦100%にならず困っております。

検証ブラウザは、IE6、IE7、FF2、Safariです。

お分かりの方、ご教授をお願いいたします。

▼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>test</title>
<...続きを読む

Aベストアンサー

こんにちは。

勘違いだったらすみません。もしもdivを3重にしているのが背景のためなら多分下のでいけると思います。


<!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>test</title>
<style type="text/css">
<!--
html {
height:100%;
}

body {
height:100%;
margin:0;
padding:0;
text-align:center;
background:url(イメージ名.jpg) center repeat-y;
}

#contents {
width:400px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
-->
</style>
</head>
<body>
<div id="contents">
テスト
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
テスト
</div>
</body>
</html>

これで横500px、縦1pxとかで画像を用意して、ソースのイメージ名のところをその画像名にしてやればいけるとおもいます。
(上だと拡張子がjpgになってます)

こんにちは。

勘違いだったらすみません。もしもdivを3重にしているのが背景のためなら多分下のでいけると思います。


<!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>test</title>
<style type="text/css">
<!--
html {
height:100%;
}

body {
height:100%;
margi...続きを読む

Qcss backgroundcolorプロパティについて

お世話になります。
backgroundcolorプロパティはコンテント領域に適用されるんでしょうか?それともパディング領域まででしょうか?

教えてください。お願いします。

Aベストアンサー

borderの範囲と内側
よってpaddingを含む

backgroundcolorの影響を及ぼさない空白を取るにはmargin


・・・の筈。後はブラウザの挙動?

Q外側のdivの高さを入れ子のdivの高さに自動的に合わせたい

外側のdivの高さを入れ子のdivの高さに自動的に合わせたい

添付画像のようなコンテンツを作成しています。
外側のdiv(contents_box)内にcontents_imgとcontents_textのdivを配置しています。
このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう?
高さをautoですとただの棒のようになってしまい、ダメでした。
どうぞよろしくお願い致します。

xhtml

<div id="contents_box">
<div id="contents_img">ここに画像</div>
<div id="contents_text"> ここにテキスト</div>
</div>

css
#contents_box {
height: auto;
width: 805px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333;
}

#contents_img {
height: auto;
width: 300px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
float: left;
}

#contents_text {
height: auto;
width: 485px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
float: right;
text-align: justify;
}

外側のdivの高さを入れ子のdivの高さに自動的に合わせたい

添付画像のようなコンテンツを作成しています。
外側のdiv(contents_box)内にcontents_imgとcontents_textのdivを配置しています。
このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう?
高さをautoですとただの棒のようになってしまい、ダメでした。
どうぞよろしくお願い致します。

xhtml

<div id="contents_box">
<div id="contents_img">ここに画像</div>
<div ...続きを読む

Aベストアンサー

クリアーしていないって事かな・・・ 色々方法はあるけど。
----------------

<div id="contents_box">
<div id="contents_img">ここに画像</div>
<div id="contents_text"> ここにテキスト</div>
<hr /> <!-- 追加 -->
</div>



#contents_box {
width: 805px;
}
#contents_box hr { clear: both;} /* 追加 */

#contents_img {
width: 300px;
margin: 10px 0;
float: left;
}

#contents_text {
width: 485px;
margin: 10px 0;
float: right;
text-align: justify;
}

Qbackground-color 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=windows-31j" />
<title>表</title>
<style>
<!--
.open{
background-color:rgb(255,255,255);
}
.holiday{
background-color:rgb(166,166,166);
}
.rest_holiday{
position:relative;
filter:alpha(opacity=50);
background-color:rgb(255,0,0);
}
.rev{
background-color:rgb(185,205,229);
}
-->
</style>
</head>
<body>
<table border="1" cellspacing="1">
<tr>
<td valign="top">
<table border="1" cellspacing="0" width="60" >
<tr align="center">
<td height="23" >名前</td>
</tr>
<tr align="center">
<td ></td>
</tr>
<tr align="center"><td>田中</td></tr>
<tr align="center"><td>島村</td></tr>
<tr align="center"><td>喜田村</td></tr>
<tr align="center"><td>林義夫</td></tr>
</table>
</td>
<td valign="top" >
<table width="00" cellpadding="0" cellspacing="0" border="1">
<tr align="center">
<td width="100" height="23" colspan="2" >10時</td>
<td width="100" height="23" colspan="2">11時</td>
<td width="100" height="23" colspan="2" >12時</td>
</tr>
<tr >
<td width="25" height="23" valign="top" class="open"></td>
<td width="25" height="23" valign="top" class="open"></td>
<td width="25" height="23" valign="top" class="rest_holiday"></td>
<td width="25" height="23" valign="top" class="rest_holiday"></td>
<td width="25" height="23" valign="top" class="rest_holiday"></td>
<td width="25" height="23" valign="top" class="rest_holiday"></td>
</tr>
<tr >
<td width="25" height="23" valign="top" class="holiday"></td>
<td width="25" height="23" valign="top" class="holiday"></td>
<td width="25" height="23" valign="top" class="holiday"></td>
<td width="25" height="23" valign="top" class="holiday"></td>
<td width="25" height="23" valign="top" class="holiday"></td>
<td width="25" height="23" valign="top" class="holiday"></td>
</tr>
<tr >
<td width="25" height="23" valign="top" class="rev"></td>
<td width="25" height="23" valign="top" class="rev"></td>
<td width="25" height="23" valign="top" class="open"></td>
<td width="25" height="23" valign="top" class="rev"></td>
<td width="25" height="23" valign="top" class="rev"></td>
<td width="25" height="23" valign="top" class="open"></td>
</tr>
<tr >
<td width="25" height="23" valign="top" class="rest_holiday"></td>
<td width="25" height="23" valign="top" class="rest_holiday"></td>
<td width="25" height="23" valign="top" class="rest_holiday"></td>
<td width="25" height="23" valign="top" class="rest_holiday"></td>
<td width="25" height="23" valign="top" class="rest_holiday"></td>
<td width="25" height="23" valign="top" class="rev"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</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=windows-31j" />
<title>表</title>
<style>
<!--
.open{
background-color:r...続きを読む

Aベストアンサー

【訂正】
> また、透過色という方法はありませんが、特定の要素の背景に透過GIFで、背景色の上に重ねることは【不可能】です。もしくは、単純に重ねたような色をつけるしかありません。

 また、透過色という方法はありませんが、特定の要素の背景に透過GIFで、背景色の上に重ねることは【可能】です。もしくは、単純に重ねたような色をつけるしかありません。

>単純に重ねたような色をつけるしかありません。
 背景色をサンプルを作られたように変えるだけ

QDivの入れ子とHeight

こんにちわ。初歩的な質問かもしれませんがお願いします。
DivのContainerの中にPosition:Absoluteの3つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。
Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか?
こちらがコードです。

HTML CODE
<HTML>
<HEAD>
<link rel="stylesheet" href="hp.css" type="text/css" />
</HEAD>
<BODY>
<div class="container">
<div class="banner">
</div>
<div class="menu">
</div>
<div class="main">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
</div>
</BODY>
</HTML>

CSS CODE
*{margin:0;padding: 0;}
div.container{border:2px solid RGB(888888);
position:absolute;
top:20px;
left:50px;
width:900px;
height:auto;}
div.banner { position:absolute;
top:20px;
left:80px;
width:700px;
height:150px;
border:2px solid RGB(888888);}
div.menu{ position:absolute;
top:190px;
left:30px;
width:150px;
height:300px;
font-weight:bold;
border:2px solid RGB(888888);}
div.main{ position:absolute;
top:190px;
left:200px;
width:600px;
height:auto;
border:2px solid RGB(888888);}

こんにちわ。初歩的な質問かもしれませんがお願いします。
DivのContainerの中にPosition:Absoluteの3つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。
Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか?
こちら...続きを読む

Aベストアンサー

≫FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか?

 ありません。
 そのためのabsoluteです。

【参考サイト】
Visual formatting model details
  http://www.y-adagio.com/public/standards/tr_css2/visudet.html


人気Q&Aランキング

おすすめ情報