最初のセクションのみ横幅、高さとも一杯に表示、背景画像有り(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と関連する良く見られている質問

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;
}

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。


人気Q&Aランキング

おすすめ情報