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

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

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

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

Q&A

解決済

1回答

148閲覧

footerを下に固定したいです。

TakuyaUezu

総合スコア11

CSS

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

0グッド

0クリップ

投稿2019/05/13 06:05

webページの制作を行なっていて、footerを下に固定したいのですが、できなくて困ってます。
仕事で今、4時間ほどずっと止まった状態です。助けてください。
(footerは、box4です。)
HTMLコード

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ウェブサイト制作</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <div id="box0"> <header> <h1>令和新聞</h1> </header> </div> <body> <div id="box1"> <nav> <ul> <li><a href="top.html">TOP</a></li> <li><a href="from.html">お問い合わせ</a></li> </ul> </nav> </div> <div id="box2"> <nav> <ul> <li><a href="top.html">TOP</a></li> <li><a href="from.html">お問い合わせ</a></li> </ul> </nav> </div> <section> <div id="box3"> <article> <h2>太鼓の達人の太鼓部分盗まれる</h2> <img src="dontyan.jpg"> <p> 愛知県北名古屋市のスーパーの施設内にあるゲームコーナーで4月末、太鼓をたたいて遊ぶリズムゲーム「太鼓の達人」の太鼓部分が盗まれる被害があり、少年3人が自分たちが盗んだとして、出頭していたことが、県警への取材でわかった。西枇杷島署が窃盗容疑で捜査している。 署やゲームコーナーの運営会社によると、被害があったのは4月29日午後4時5~25分ごろ。店内の防犯カメラに、出頭した少年らとみられる複数の人物が、重さおよそ10キロ程度の太鼓部分を袋に入れて持ち去る様子が映っていた。太鼓部分はボルトで固定されていたという。 同社関係者が映像をツイッターで公開したところ、5月3、4日に3人が相次いで署に名乗り出た。盗まれた太鼓は分解されていたが、運営会社に返還された。いずれも、署の任意での調べに「欲しくて盗んだ」という趣旨の説明をし、転売目的については否定しているという。 運営会社の関係者によると、太鼓部分は、専門の知識があれば、改造して海賊版と接続し、自宅で遊ぶことが可能だという。このゲームコーナーでは3月にも太鼓の一部が盗まれる被害があり、同署に被害届を出していた。 </p> </article> </div> </section> <div id="box4"> <footer> <address>Copyright(C)ここに年 個人名or会社名,Allright Reserved.</address> </footer> </div> </body> </html> CSSコードがこちらです。 #box0 { width: 100%; height: 100px; background-color: hotpink; } #box1 { width: 100%; height: 100px; background-color: lightblue; } #box2 { width: 10%; height: 600px; background-color: antiquewhite; float: left; } #box3 { width: 90%; height: 600px; background-color: mediumaquamarine; float: right; } #box4 { width: 100%; height: 100px; background-color: green; } よろしくお願いします。

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

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

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

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

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

dit.

2019/05/13 06:16

質問者さんの言う「固定」とは、常にウィンドウの下部に出ていてほしい(スクロールしても変わらずその場にあってほしい)ということでしょうか? もう一つ、気になった点として<head>~</head>と<body>~</body>の間にbox0があるため、<body>~</body>内に入れていただいた方がいいかと思います。
kei344

2019/05/14 02:25

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答1

0

ベストアンサー

質問者さんの実現したいことは、 section 要素に overflow: hidden; を設定することで実現することが出来ると思います(動作確認用リンク)。

HTML

1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>ウェブサイト制作</title> 7 <link href="style.css" rel="stylesheet" type="text/css"> 8</head> 9 10<body> 11 <div id="box0"> 12 <header> 13 <h1>令和新聞</h1> 14 </header> 15 </div> 16 <div id="box1"> 17 <nav> 18 <ul> 19 <li><a href="top.html">TOP</a></li> 20 <li><a href="from.html">お問い合わせ</a></li> 21 </ul> 22 </nav> 23 </div> 24 <div id="box2"> 25 <nav> 26 <ul> 27 <li><a href="top.html">TOP</a></li> 28 <li><a href="from.html">お問い合わせ</a></li> 29 </ul> 30 </nav> 31 </div> 32 <section> 33 <div id="box3"> 34 <article> 35 <h2>太鼓の達人の太鼓部分盗まれる</h2> 36 <img src="dontyan.jpg"> 37 <p> 38 愛知県北名古屋市のスーパーの施設内にあるゲームコーナーで4月末、太鼓をたたいて遊ぶリズムゲーム「太鼓の達人」の太鼓部分が盗まれる被害があり、少年3人が自分たちが盗んだとして、出頭していたことが、県警への取材でわかった。西枇杷島署が窃盗容疑で捜査している。 署やゲームコーナーの運営会社によると、被害があったのは4月29日午後4時5~25分ごろ。店内の防犯カメラに、出頭した少年らとみられる複数の人物が、重さおよそ10キロ程度の太鼓部分を袋に入れて持ち去る様子が映っていた。太鼓部分はボルトで固定されていたという。 39 同社関係者が映像をツイッターで公開したところ、5月3、4日に3人が相次いで署に名乗り出た。盗まれた太鼓は分解されていたが、運営会社に返還された。いずれも、署の任意での調べに「欲しくて盗んだ」という趣旨の説明をし、転売目的については否定しているという。 運営会社の関係者によると、太鼓部分は、専門の知識があれば、改造して海賊版と接続し、自宅で遊ぶことが可能だという。このゲームコーナーでは3月にも太鼓の一部が盗まれる被害があり、同署に被害届を出していた。 40 </p> 41 </article> 42 </div> 43 </section> 44 <div id="box4"> 45 <footer> 46 <address>Copyright(C)ここに年 個人名or会社名,Allright Reserved.</address> 47 </footer> 48 </div> 49</body> 50 51</html>

CSS

1#box0 { 2 width: 100%; 3 height: 100px; 4 background-color: hotpink; 5} 6 7#box1 { 8 width: 100%; 9 height: 100px; 10 background-color: lightblue; 11} 12 13#box2 { 14 width: 10%; 15 height: 600px; 16 background-color: antiquewhite; 17 float: left; 18} 19 20#box3 { 21 width: 90%; 22 height: 600px; 23 background-color: mediumaquamarine; 24 float: right; 25} 26 27#box4 { 28 width: 100%; 29 height: 100px; 30 background-color: green; 31} 32 33section { 34 overflow: hidden; 35}

投稿2019/05/13 06:09

編集2019/05/13 06:20
s8_chu

総合スコア14731

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

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

s8_chu

2019/05/13 06:13

もしフッターを固定位置指定要素にしたいということであれば、 `#box4` に対して `position: fixed;` を指定すると良いと思います。 https://codepen.io/anon/pen/VOKvpY
TakuyaUezu

2019/05/14 01:57

s8_chuさんありがとうございます。 問題解決しました☺️
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問