質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

6610閲覧

ヘッダーとフッターをつくりたい

hpd

総合スコア32

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/08 19:06

ヘッダーとフッターを次の画像のように
画面いっぱいに拡大したいです。

理想

ところが、下図のように
ヘッダーは下以外すべてに空白ができ、
フッターは上下左右すべてに空白ができ、
文字が上にぴったりとくっついてしまいます。
現実

どこを直せば、上図のように
ヘッダー、フッターの空白がなくなって
画面いっぱいにひろがり、
文字はヘッダー、フッターの中央に入りますでしょうか?
よろしくお願いします。

HTML

1<body> 2 <header> 3 <p>header</p> 4 </header> 5 6 <wrapper> 7 <p>wrapper</p> 8 </wrapper> 9 10 <footer> 11 <p>footer</p> 12 </footer> 13</body> 14

CSS

1 2header { 3 background-color: rgb(10,10,10); 4 height: 100px; 5 width: 100px; 6} 7 8header p{ 9 text-align: center; 10 color: rgb(0,0,0); 11} 12 13 14body { 15 background-color:rgb(200,200,200); 16 } 17 18.wrapper{ 19 background-color:rgb(240,240,240); 20 width: 640px; 21 display: block; 22 margin: 0 auto; 23} 24 25footer { 26 background-color: rgb(10,10,10); 27 height: 100px; 28 width: 100& 29} 30 31footer p{ 32 text-align: center; 33 color: rgb(0,0,0); 34} 35

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

main要素があるのでそれを使うのも良いと思います。

<body> <header> <p>header</p> </header> <main> <p>wrapper</p> </main> <footer> <p>footer</p> </footer> </body>

投稿2016/09/09 01:47

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

CSSの冒頭で各要素のリセットをしていないなら、とりあえず何かreset.cssをかませておきましょう。
一旦リセットしておき、そこから各要素のレイアウトに必要なプロパティを追加していくようにすると
意図しない崩れはだいぶ少なくなります。

またborderもpaddingもついていない親要素の場合、
kei344さんが指摘しているように子要素についているmarginが親要素の外側に出てしまいます。
clearfixするかoverflow:hidden;する以外には、

・親要素にpaddingまたはborderをつける
・子要素にmarginではなくpaddingをつけて余白を確保する

といった方法でもクリアできるかと思います。通常コンテナとなっている要素の内側には一定の余白を取るのがデザインの定石ですので、「親要素側にpaddingをつける」というのが一番素直かと思いますね。

投稿2016/09/08 19:32

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

wrapper要素は無いので、div要素でも使いましょう。

HTML

1<div class="wrapper"><p>wrapper</p></div>

ヘッダーなどは、中の要素(p)のmarginが外に漏れるため、clerfixするかoverflow: hidden;するかすれば解決できると思います。

CSS

1body { 2 margin: 0; 3} 4header, 5.wrapper, 6footer { 7 overflow: hidden; 8}

【clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix | コリス】
http://coliss.com/articles/build-websites/operation/css/css-latest-clearfix.html

投稿2016/09/08 19:14

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問