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

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

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

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

1回答

8332閲覧

footerが上にせり上がる

syo--

総合スコア28

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/01/06 04:21

タイトルの通りです 「footer 上に上がる」などで検索して調べましたが、それはコンテンツが少ないときにフッターが一緒にせり上がるという状況の解説ばかりでした
自分の場合はフッターだけ上に上がってサイトの上の方に覆いかぶさっているという感じです

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>モッシャマ.....</title> 6 <link rel="stylesheet" href="css2/reset.css"> 7 <link rel="stylesheet" href="css2/style2.css"> 8 </head> 9 <body> 10 <header> 11 <h1 class="header-logo"> 12 <a href="/">SAMPLE SITE</a> 13 </h1> 14 15 <nav class="global-nav"> 16 <ul> 17 <li class="nav-item home"><a href="#">HOME</a></li> 18 <li class="nav-item"><a href="#">ABOUT</a></li> 19 <li class="nav-item"><a href="#">NEWS</a></li> 20 <li class="nav-item"><a href="#">TOPICS</a></li> 21 <li class="nav-item"><a href="#">DOCS</a></li> 22 <li class="nav-item"><a href="#">BLOG</a></li> 23 </ul> 24 </nav> 25 </header> 26 27 <div class="wrapper clear"> 28 <main> 29 <h2 class="hidden">HOT TOPIC</h2> 30 31 <a href="#" class="hot-topic clear"> 32 <img src="./images/hot-topic.jpg" alt=""> 33 <div class="content"> 34 <h2 class="title">実務で使えるHTML/CSS<br>モダンコーディング</h2> 35 <p class="desc">Webフロントエンドの進化の勢いはとどまるところ 36 を知りません。新しい要素が増えて大幅に表現力 37 が広がったHTML5/CSS3を活用して...</p> 38 <time class="date" datetime="2020-12-29">2020.12.29 TUE</time> 39 </div> 40 </a> 41 42 <h2 class="newstitle">NEWS</h2> 43 <ul class="newslist"> 44 <li class="newsitem"> 45 <a href="#"> <time datetime="2020-12-30">2020.12.30 WED</time> 46 <span class="news">NEWS</span> 47 <span class="newsp">WORKSを更新しました</span> 48 </a> 49 </li> 50 51 <li class="newsitem"> 52 <a href="#"><time datetime="2020-12-30">2020.12.30 WED</time> 53 <span class="topic">TOPIC</span> 54 <span class="newsp">CSSでここまでできる!? ホントに使えるCSSセレクタ10選</span> 55 </a> 56 </li> 57 58 <li class="newsitem"> 59 <a href="#"> <time datetime="2020-12-30">2020.12.30 WED</time> 60 <span class="news">NEWS</span> 61 <span class="newsp">TOPICSを更新しました</span> 62 </a> 63 </li> 64 65 <li class="newsitem"> 66 <a href="#"><time datetime="2020-12-30">2020.12.30 WED</time> 67 <span class="topic">TOPIC</span> 68 <span class="newsp">HTML/CSSコーディングと切っても切れないWEBブラウザのシェア動向をチェック</span> 69 </a> 70 </li> 71 72 <li class="newsitem"> 73 <a href="#"><time datetime="2020-12-30">2020.12.30 WED</time> 74 <span class="topic">TOPIC</span> 75 <span class="newsp">HTML5の新しい属性で手軽にフォームバリデーション</span> 76 </a> 77 </li> 78 79 <li class="newsitem"> 80 <a href="#"> <time datetime="2020-12-30">2020.12.30 WED</time> 81 <span class="news">NEWS</span> 82 <span class="newsp">WORKSを更新しました</span> 83 </a> 84 </li> 85 </ul> 86 87 <h2 class="hidden">ARTICLES</h2> 88 <div class="articles clear"> 89 <a class="article" href="#"> 90 <img class="article-img" src="./images/article.jpg"> 91 <h3 class="article-title">実務で使えるHTML/CSSモダンコーディングTIPS</h3> 92 <p class="article-p">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、 93 モダンなコーディングにチャレンジしましょう!</p> 94 <time class="article-date" date-time="2021-01-01">2021.01.01 FRI</time> 95 </a> 96 <a class="article" href="#"> 97 <img class="article-img" src="./images/article.jpg"> 98 <h3 class="article-title">実務で使えるHTML/CSSモダンコーディングTIPS</h3> 99 <p class="article-p">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、 100 モダンなコーディングにチャレンジしましょう!</p> 101 <time class="article-date" date-time="2021-01-01">2021.01.01 FRI</time> 102 </a> 103 <a class="article" href="#"> 104 <img class="article-img" src="./images/article.jpg"> 105 <h3 class="article-title">実務で使えるHTML/CSSモダンコーディングTIPS</h3> 106 <p class="article-p">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、 107 モダンなコーディングにチャレンジしましょう!</p> 108 <time class="article-date" date-time="2021-01-01">2021.01.01 FRI</time> 109 110 </a> 111 <a class="article" href="#"> 112 <img class="article-img" src="./images/article.jpg"> 113 <h3 class="article-title">実務で使えるHTML/CSSモダンコーディングTIPS</h3> 114 <p class="article-p">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、 115 モダンなコーディングにチャレンジしましょう!</p> 116 <time class="article-date" date-time="2021-01-01">2021.01.01 FRI</time> 117 </a> 118 </div> 119 120 </main> 121 122 </div> 123 124 <footer class="footer"> 125 </footer> 126 127 128 </body> 129</html> 130 131

CSS

1*{box-sizing: border-box;} 2html{font-size: 62.5%;} 3body{color: #333; 4font-size: 1.2rem; 5font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 6} 7 8 a:link,a:visited,a:hover,a:active{ 9color:#d03c56; 10text-decoration: none; 11} 12 13 14header{ 15width:100%; 16background:url("../images/bg-header.gif") repeat-x; 17box-shadow:0px 2px #efeded; 18height:140px; 19padding-top:30px; 20} 21.header-logo{background:url("../images/logo.png") no-repeat; 22width:225px; 23height:55px; 24margin:0 auto; 25} 26 27.header-logo a{ 28display:block; 29width:100%; 30height:100%; 31text-indent: 100%; 32white-space: nowrap; 33overflow:hidden; 34} 35 36 37.global-nav{text-align:center; 38} 39 40.nav-item {display:inline-block; 41} 42 43.nav-item a{ 44 display: inline-block; 45width: 100px; 46margin:10px 15px; 47height: 30px; 48line-height: 30px; 49border-radius: 7px; 50letter-spacing:1px; 51transition: 0.15s; 52color:#666;} 53 54.home a,.nav-item a:hover{background-color:#D03C56; 55color:white; 56} 57 58.wrapper{ 59width:970px; 60margin:30px auto 40px; 61} 62 63.hot-topic{display: block; 64height:300px; 65transition: 0.85s; 66margin-bottom:30px; 67} 68 69.hot-topic img{float:left; 70height:100%; width:50%; 71 72} 73.content{float:right; 74background-color: #2D3D54; 75height:100%; width:50%; 76line-height: 1.6; 77color:white; 78padding:105px 25px 0px; 79position: relative; 80} 81 82.title{font-size:20px; 83 font-weight: normal; 84} 85.date{position: absolute; 86background-color: white; 87padding:4px; color:#2d3d54; 88font-weight: bold; 89width:140px; 90text-align: center; 91line-height: 1; 92top:60px; 93left:0px; 94} 95 96.desc{color:#ddc;} 97.hot-topic:hover{opacity:0.8;} 98 99.newstitle{font-size:15px; 100background:url("../images/bg-slash.gif"); 101padding:10px 15px; 102height:40px; 103} 104 105.newslist{list-style: none; max-height: 220px; 106overflow-y: auto; margin-bottom: 30px; 107} 108 109.newsitem a{display: block; height: 35px; 110transition:0.85s; padding:10px 15px; font-size: 0px; 111} 112 113.newsitem time{font-weight: bold; color:black; display:inline-block; 114 width:19%; font-size: 1rem; 115} 116 117 118.newsitem:nth-of-type(even) a{background:url("../images/bg-slash.gif")} 119.newsitem a:hover{background-color:#fafaf8;} 120.news,.topic{width:8%; display:inline-block; font-size: 1rem; color:#fff; 121text-align: center; border-radius: 5px; line-height:16px; } 122.news{background-color: #2c3c53;} .topic{background-color: #d03c56;} 123.newsp{ display:inline-block; color:black; width:73%; font-size: 1.2rem; 124padding-left: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} 125 126.article{display: block; width:315px;height:360px; margin-bottom: 30px; 127box-shadow:3px 3px 6px -4px rgba(0,0,0,0.15); 128transition: 0.15s; position: relative; 129} 130.article:hover{opacity: 0.8;} 131.article:nth-of-type(odd){float:left;} 132.article:nth-of-type(even){float:right;} 133.article-title{font-size: 1.5rem; line-height: 1.5; margin-top:30px; 134color:#555; } 135.article-p{text-overflow:ellipsis; 136overflow:hidden; white-space:nowrap; margin-top:5px; 137color:#333;} 138.article-date{display:block; text-align: center; 139 background-color:#b5d264; font-weight:bold; 140 width:160px; padding:4px; 141 position:absolute; 142 right:0px; bottom:15px; 143color:#2d3d54; 144} 145 146 147 148main{ 149 display: block; 150 width: 660px; 151 float:left; 152} 153.sidemenu{ 154 width:275px; 155 float:right; 156} 157.clear{clear: both;} 158.footer{width:100%; height:100px; background-color: #2D3D54;} 159.hidden{display:none;} 160

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

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

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

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

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

guest

回答1

0

ベストアンサー

main に対して、float:left;を設定しているのが原因ですね。
floatを設定する浮いた状態になるので、他の要素は裏にせりあがります。

.clear{clear: both;} でfloatを解除したつもりなんでしょうが、この設定は無意味です。

よく使われるのは、下記のように疑似要素に clear を設定する方法です。

css

1/* .clear{clear: both;} */ 2.clear::after{ 3 content: ""; 4 display: block; 5 clear: both; 6}

現在では floatでレイアウトを決めるのは古いです。Flexbox を使うのが主流です。あるいは CSS Grid というのもあります。この辺の学習をされることをお勧めします。


Flexbox を使った場合のコード例

html

1<header> 2 header 3</header> 4<div class="wrapper"> 5 <main> 6 main 7 </main> 8 <aside> 9 sidemenu 10 </aside> 11</div> 12<footer> 13 footer 14</footer>

css

1header { 2 width:100%; 3 height:100px; 4 background-color: gray; 5} 6.wrapper { 7 display: flex; 8 max-width: 970px; 9 margin: 30px auto; 10} 11main { 12 flex: 1; 13 background-color: aqua; 14 height: 400px; 15} 16aside { 17 width:275px; 18 background-color: pink; 19} 20footer{ 21 width:100%; 22 height:100px; 23 background-color: #2D3D54; 24}

投稿2021/01/06 04:36

編集2021/01/06 13:03
hatena19

総合スコア33790

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

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

syo--

2021/01/06 06:09

ありがとうございます 無事にフッターが下に落ち付きました .clear{clear: both;}で効かなかった理由は https://web-manabu.com/html-css39/ このサイトのclear bothのデメリットの部分にある「すべての子要素がfloatしているから」でしょうか?
hatena19

2021/01/06 13:03 編集

ちょっと違うかな。 floatした要素の後の要素にclear: both;を設定する必要があるので、親に clear: both; しても無意味だということです。 そのため、.clear::after で疑似要素を子要素の後に追加して、それにclear: both;を設定してます。 Flexを使えばそのような面倒なことを考えずにレイアウトできます。 回答にコード例を追記しておきましたので参考にしてください。
syo--

2021/01/07 12:28

ご丁寧にありがとうございます! 凄く助かりました これからはflexboxを学んでいこうと思います!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問