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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

2回答

826閲覧

CSSでfooterのサイト最下部の固定方法がわかりません。いろいろなサイトを見て調べているのですがうまくできません。

yuyuyu88

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2023/04/11 14:31

編集2023/04/13 09:32

ルールが分からずお手数かけます。
模写サイトで模写コーディングの練習をしています。
footerの位置をサイト最下部に固定したいのですが、最下部に固定でしません。
footerにposition:fixedを指定すると追従してきてしまい,position: absolute;でbottom:0や
stikyにすると画面の真ん中に固定されてしまいます。
フッターを最下部固定にするCSS設定方法 全6選
こちらのサイトで確認しました。
よろしくお願いします。)

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="style.css"> 8 <title>test</title> 9</head> 10<body> 11 <header> 12 <div class="Logo"><img src="image\logo (2).svg"></div> 13 <nav> 14 <ul> 15 <li><a href="#">About</a></li> 16 <li><a href="#">Works</a></li> 17 <li><a href="#">News</a></li> 18 <li><a href="#">contact</a></li> 19 <li><a href="#" class="insta"><img src="image\icon-instagram.png"></a></li> 20 </ul> 21 </nav> 22 </header> 23 <main> 24 <div class="wrapper"> 25 <div class="key-visual"><img src="image\mainvisual-pc.jpg"></div> 26 <section class="sec1"> 27 <h2 class="title">About</h2> 28 <ul> 29 <li class="sub-title">Xxxxx Ashley</li> 30 <li>2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</li> 31 <li>tel:000-0000-0000</li> 32 <li>url:www.xxxxxx.jp</li> 33 <li>mail:xxx@xxxxxx.jp</li> 34 </ul> 35 <p> 36 プロフィールテキストテキストテキストテキストテキストテキスト 37 テキストテキストテキストスト テキストテキストテキストテキスト 38 テキストテキストテキストテキストテキストテキストテキスト テキスト 39 テキストテキストテキストテキストテキストテキストテキスト 40 テキストテキストテキスト 41 </p> 42 </section> 43 <section class="sec2"> 44 <h2 class="title">Works</h2> 45 <div class="image-container"> 46 <div class="item1"><img src="image\works1.jpg"></div> 47 <div class="item2"><img src="image\works2.jpg"></div> 48 <div class="item3"><img src="image\works3.jpg"></div> 49 <div class="item4"><img src="image\works4.jpg"></div> 50 <div class="item5"><img src="image\works5.jpg"></div> 51 <div class="item6"><img src="image\works6.jpg"></div> 52 </div> 53 </section> 54 <section class="sec3"> 55 <h2 class="title">News</h2> 56 <dl> 57 <dt>2020.XX.XX</dt> 58 <dd>デザイン雑誌「XXXXXX Vol.11』に掲載していただきました。</dd> 59 <dt>2020.XX.XX</dt> 60 <dd>XX月XX日から写真集「XXXXXXX」の販売を開始します。</dd> 61 <dt>2019.XX.XX</dt> 62 <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> 63 <dt>2019.XX.XX</dt> 64 <dd>デザイン雑誌「XXXXXX Vol.10』に掲載していただきました。</dd> 65 <dt>2019.XX.XX</dt> 66 <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> 67 </dl> 68 </section> 69 <section id="contact" > 70 <form class="form" action="#" method="post"> 71 <h2 class="title">Contact</h2> 72 <dl> 73 <dt> 74 <label for="name">NAME</label> 75 </dt> 76 <dd><input type="text" name="your-name"></dd> 77 <dt> 78 <label for="e-mail">E-mail</label> 79 </dt> 80 <dd><input type="mail" name="your-e-mail"></dd> 81 <dt> 82 <label for="message">MESSAGE</label> 83 </dt> 84 <dd> 85 <textarea id="message" name="your-message"></textarea> 86 </dd> 87 </dl> 88 <div class="button"> 89 <input type="submit" value="送信"> 90 </div> 91 </form> 92 </section> 93 <footer> 94 <div class="footer-container"> 95 <h5>© 2020 My Work</h5> 96 </div> 97 </footer> 98 </div> 99 </main> 100</body> 101</html>

CSS

1@charset "utf-8"; 2 3* { 4 margin: 0; 5 padding: 0; 6 box-sizing: border-box; 7} 8body { 9 width: 100%; 10 min-height: 100vh; 11} 12 13 14header { 15 width: 65%; 16 height: 300px; 17 display: flex; 18 justify-content: space-between; 19 margin: 0 auto; 20 position: relative; 21} 22header .Logo { 23 display: flex; 24 align-items: center; 25} 26 27header ul { 28 position: absolute; 29 width: 30%; 30 height: 100%; 31 display: flex; 32 justify-content: space-between; 33 right: 0; 34 align-items: center; 35} 36header ul li { 37 list-style: none; 38} 39 40header ul li a { 41 text-decoration: none;color: black; 42} 43header ul li a:hover { 44 color: #ccc; 45} 46.insta img { 47 width: 30px; 48 height: 30px; 49} 50 51main .key-visual { 52 object-fit: cover; 53 overflow: hidden; 54} 55section { 56 width: 100%; 57} 58h2 { 59 width: 100%; 60 height: 300px; 61 display: flex; 62 justify-content: center; 63 align-items: center; 64} 65p { 66 width: 65%; 67 display: flex; 68 justify-content: left; 69 margin: 0 auto; 70 align-items: center; 71 line-height: 50px; 72} 73 74section ul { 75 width: 65%; 76 display: flex; 77 flex-direction: column; 78 justify-content: center; 79 margin:0 auto; 80} 81section li { 82 list-style: none; 83} 84 85.sub-title { 86 margin-bottom: 20px; 87} 88 89.sec2 { 90 width: 100%; 91 position: relative; 92 overflow: hidden; 93} 94 95.sec2 .image-container { 96 margin: 0 auto; 97 display: flex; 98 justify-content: space-between; 99 flex-wrap: wrap; 100 width: 65%; 101 margin-bottom: 50px; 102} 103 104.sec2 .image-container img { 105 width: 300px; 106 height: 200px; 107} 108 109.sec3 { 110 width: 100%; 111 height: 700px; 112 position: relative; 113 margin-bottom: 150px; 114 /* background-color: red; */ 115} 116.sec3 .title { 117 position: absolute; 118 top: 0; 119 left: 50%; 120 transform: translate(-50%); 121 width: 65%; 122 border-bottom: 1px solid #CCC; 123} 124 125.sec3 dl { 126 position: absolute; 127 top: 43%; 128 left: 50%; 129 transform: translate(-50%); 130 width: 65%; 131} 132.sec3 dl dt, 133.sec3 dl dd { 134 line-height: 50px; 135 border-bottom: 1px solid #ccc; 136} 137 138#contact{ 139 width: 100%; 140 position: relative; 141 background-color: aqua; 142} 143#contact form { 144 position: absolute; 145 display: flex; 146 flex-direction: column; 147 justify-content: center; 148 margin: 0 auto; 149 width: 65%; 150 left: 50%; 151 transform: translate(-50%); 152} 153#contact dl { 154display: flex; 155flex-wrap: wrap; 156margin-bottom: 20px; 157} 158#contact dt { 159width: 15%; 160} 161#contact dd { 162width: 85%; 163margin-bottom: 10px; 164} 165#contact dd input, 166#contact dd textarea { 167width: 100%; 168border: solid 1px #c8c8c8; 169padding: 10px; 170} 171#contact dd textarea { 172height: 10rem; 173} 174 175#contact .button { 176 text-align: center; 177} 178#contact .button input { 179 width: 200px; 180 padding: 15px 0; 181 color: #fff; 182 background-color: #24292e; 183 border: solid 1px #24292e; 184} 185#contact .button input:hover { 186 background-color: #fff; 187 color: black; 188} 189 190.wrapper { 191 min-height: 100vh; 192 position: relative; 193} 194footer { 195 position: absolute; 196 /* position: sticky; */ 197 display: flex; 198 justify-content: center; 199 align-items: center; 200 width: 100%; 201 height: 50px; 202 bottom: 0; 203 background-color: #24292e; 204 color: #fff; 205 206} 207

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

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

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

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

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

m.ts10806

2023/04/11 22:21

コードはマークダウンのcodeで提示してください。 あと、「うまくいかない」は何も伝えない表現なので、起きてる現象を具体的に記載してください。 また、可能な範囲で参考にした記事をご提示ください。 (要件だけ見るとそんな困難でもないと思うので、見た記事が間違いか解釈を間違ってるかなどの切り分けが必要です)
yuyuyu88

2023/04/12 01:30

追加いたしました確認よろしくお願いします。
m.ts10806

2023/04/12 01:45

回答に投稿されてます。 質問本文を編集してください。
yuyuyu88

2023/04/12 02:48

ルールが分からずお手数かけます。変更しました、よろしくお願いします。
m.ts10806

2023/04/12 03:33

fixedで追従のように見えるのは固定されてるからとなるのですが、それとは違うのでしょうか。 求められている「固定」の要件が分かりません。 画面イメージで図示されたほうが良いです。
guest

回答2

0

footerをmainの外に持っていって、position:fixedにすればいいのでは?

投稿2023/04/12 05:26

yambejp

総合スコア114572

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

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

yuyuyu88

2023/04/12 08:09

回答ありがとうございます。 おっしゃる通りfooterをmainの外に持っていきまfixedで固定できました。 しかしスクロールすると追従してきてしまい最下部に固定できません。 改めて、bodyタグの次とbodyタグの閉じタグの前にdiv.wrapperで囲ってmin-height: 100vh;でカラーを指定したら全画面背景色が着くと思うのですが、contactの上で色が切れてしまいます。 何か高さ指定の仕方を間違えていると思うのですが何を間違えているのでしょうか?
yuyuyu88

2023/04/12 14:16

画面の下に固定されていて、スクロールで一番下に行ったときだけ見れるようにしたいです。
yambejp

2023/04/13 00:32 編集

「画面の下に固定」と「スクロールで一番下に行ったときだけ見れる」は真逆なことを言っていませんか? 固定していれば下にいかなくても見られるでしょうし、スクロールで一番下にいって見えるものは固定する必要はありませんよね? とにかく一番下にフッタを表示したいだけというなら、CSS中散見されるabsoluteでしていたpositionを解除し別の方法で成形してみてください
guest

0

回答ありがとうございます。
footerにposition:fixedを指定すると追従してきてしまい,position: absolute;でbottom:0ya
stikyにすると画面の真ん中に固定されてしまいます。リンク内容

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="style.css"> 8 <title>test</title> 9</head> 10<body> 11 <header> 12 <div class="Logo"><img src="image\logo (2).svg"></div> 13 <nav> 14 <ul> 15 <li><a href="#">About</a></li> 16 <li><a href="#">Works</a></li> 17 <li><a href="#">News</a></li> 18 <li><a href="#">contact</a></li> 19 <li><a href="#" class="insta"><img src="image\icon-instagram.png"></a></li> 20 </ul> 21 </nav> 22 </header> 23 <main> 24 <div class="wrapper"> 25 <div class="key-visual"><img src="image\mainvisual-pc.jpg"></div> 26 <section class="sec1"> 27 <h2 class="title">About</h2> 28 <ul> 29 <li class="sub-title">Xxxxx Ashley</li> 30 <li>2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</li> 31 <li>tel:000-0000-0000</li> 32 <li>url:www.xxxxxx.jp</li> 33 <li>mail:xxx@xxxxxx.jp</li> 34 </ul> 35 <p> 36 プロフィールテキストテキストテキストテキストテキストテキスト 37 テキストテキストテキストスト テキストテキストテキストテキスト 38 テキストテキストテキストテキストテキストテキストテキスト テキスト 39 テキストテキストテキストテキストテキストテキストテキスト 40 テキストテキストテキスト 41 </p> 42 </section> 43 <section class="sec2"> 44 <h2 class="title">Works</h2> 45 <div class="image-container"> 46 <div class="item1"><img src="image\works1.jpg"></div> 47 <div class="item2"><img src="image\works2.jpg"></div> 48 <div class="item3"><img src="image\works3.jpg"></div> 49 <div class="item4"><img src="image\works4.jpg"></div> 50 <div class="item5"><img src="image\works5.jpg"></div> 51 <div class="item6"><img src="image\works6.jpg"></div> 52 </div> 53 </section> 54 <section class="sec3"> 55 <h2 class="title">News</h2> 56 <dl> 57 <dt>2020.XX.XX</dt> 58 <dd>デザイン雑誌「XXXXXX Vol.11』に掲載していただきました。</dd> 59 <dt>2020.XX.XX</dt> 60 <dd>XX月XX日から写真集「XXXXXXX」の販売を開始します。</dd> 61 <dt>2019.XX.XX</dt> 62 <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> 63 <dt>2019.XX.XX</dt> 64 <dd>デザイン雑誌「XXXXXX Vol.10』に掲載していただきました。</dd> 65 <dt>2019.XX.XX</dt> 66 <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> 67 </dl> 68 </section> 69 <section id="contact" > 70 <form class="form" action="#" method="post"> 71 <h2 class="title">Contact</h2> 72 <dl> 73 <dt> 74 <label for="name">NAME</label> 75 </dt> 76 <dd><input type="text" name="your-name"></dd> 77 <dt> 78 <label for="e-mail">E-mail</label> 79 </dt> 80 <dd><input type="mail" name="your-e-mail"></dd> 81 <dt> 82 <label for="message">MESSAGE</label> 83 </dt> 84 <dd> 85 <textarea id="message" name="your-message"></textarea> 86 </dd> 87 </dl> 88 <div class="button"> 89 <input type="submit" value="送信"> 90 </div> 91 </form> 92 </section> 93 <footer> 94 <div class="footer-container"> 95 <h5>© 2020 My Work</h5> 96 </div> 97 </footer> 98 </div> 99 </main> 100</body> 101</html>

CSS

1@charset "utf-8"; 2 3* { 4 margin: 0; 5 padding: 0; 6 box-sizing: border-box; 7} 8body { 9 width: 100%; 10 min-height: 100vh; 11} 12 13 14header { 15 width: 65%; 16 height: 300px; 17 display: flex; 18 justify-content: space-between; 19 margin: 0 auto; 20 position: relative; 21} 22header .Logo { 23 display: flex; 24 align-items: center; 25} 26 27header ul { 28 position: absolute; 29 width: 30%; 30 height: 100%; 31 display: flex; 32 justify-content: space-between; 33 right: 0; 34 align-items: center; 35} 36header ul li { 37 list-style: none; 38} 39 40header ul li a { 41 text-decoration: none;color: black; 42} 43header ul li a:hover { 44 color: #ccc; 45} 46.insta img { 47 width: 30px; 48 height: 30px; 49} 50 51main .key-visual { 52 object-fit: cover; 53 overflow: hidden; 54} 55section { 56 width: 100%; 57} 58h2 { 59 width: 100%; 60 height: 300px; 61 display: flex; 62 justify-content: center; 63 align-items: center; 64} 65p { 66 width: 65%; 67 display: flex; 68 justify-content: left; 69 margin: 0 auto; 70 align-items: center; 71 line-height: 50px; 72} 73 74section ul { 75 width: 65%; 76 display: flex; 77 flex-direction: column; 78 justify-content: center; 79 margin:0 auto; 80} 81section li { 82 list-style: none; 83} 84 85.sub-title { 86 margin-bottom: 20px; 87} 88 89.sec2 { 90 width: 100%; 91 position: relative; 92 overflow: hidden; 93} 94 95.sec2 .image-container { 96 margin: 0 auto; 97 display: flex; 98 justify-content: space-between; 99 flex-wrap: wrap; 100 width: 65%; 101 margin-bottom: 50px; 102} 103 104.sec2 .image-container img { 105 width: 300px; 106 height: 200px; 107} 108 109.sec3 { 110 width: 100%; 111 height: 700px; 112 position: relative; 113 margin-bottom: 150px; 114 /* background-color: red; */ 115} 116.sec3 .title { 117 position: absolute; 118 top: 0; 119 left: 50%; 120 transform: translate(-50%); 121 width: 65%; 122 border-bottom: 1px solid #CCC; 123} 124 125.sec3 dl { 126 position: absolute; 127 top: 43%; 128 left: 50%; 129 transform: translate(-50%); 130 width: 65%; 131} 132.sec3 dl dt, 133.sec3 dl dd { 134 line-height: 50px; 135 border-bottom: 1px solid #ccc; 136} 137 138#contact{ 139 width: 100%; 140 position: relative; 141 background-color: aqua; 142} 143#contact form { 144 position: absolute; 145 display: flex; 146 flex-direction: column; 147 justify-content: center; 148 margin: 0 auto; 149 width: 65%; 150 left: 50%; 151 transform: translate(-50%); 152} 153#contact dl { 154display: flex; 155flex-wrap: wrap; 156margin-bottom: 20px; 157} 158#contact dt { 159width: 15%; 160} 161#contact dd { 162width: 85%; 163margin-bottom: 10px; 164} 165#contact dd input, 166#contact dd textarea { 167width: 100%; 168border: solid 1px #c8c8c8; 169padding: 10px; 170} 171#contact dd textarea { 172height: 10rem; 173} 174 175#contact .button { 176 text-align: center; 177} 178#contact .button input { 179 width: 200px; 180 padding: 15px 0; 181 color: #fff; 182 background-color: #24292e; 183 border: solid 1px #24292e; 184} 185#contact .button input:hover { 186 background-color: #fff; 187 color: black; 188} 189 190.wrapper { 191 min-height: 100vh; 192 position: relative; 193} 194footer { 195 position: absolute; 196 /* position: sticky; */ 197 display: flex; 198 justify-content: center; 199 align-items: center; 200 width: 100%; 201 height: 50px; 202 bottom: 0; 203 background-color: #24292e; 204 color: #fff; 205 206} 207```[フッターを最下部固定にするCSS設定方法 全6選](https://shopeyes.jp/media-blog/00001078/) 208こちらのサイトで確認しました。 209よろしくお願いします。

投稿2023/04/12 01:27

yuyuyu88

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問