Q&A
3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7
ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1
・HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="header"></div> <div class="main-clearfix"> <div class="left"></div> </div> <div class="right"> <div class="right-top"></div> <div class="right-bottom-clearfix"> <div class="right-bottom-left"></div> <div class="right-bottom-right"> <div class="right-bottom-right-top"></div> <div class="right-bottom-right-bottom"></div> </div> </div> </div> </div> <div class="footer"></div> </div> </body> </html>・CSS
.clearfix::after {
content: "";
display: block;
clear: both;
}
.wrapper {
width: 400px;
margin: auto;
}
.header {
width: 400px;
height: 100px;
background-color: #141f40;
}
.left {
float:left;
width: 150px;
height: 250px;
background-color: #80bfa8;
}
.right {
float: right;
width: 250px;
height: 250px;
}
.right-top {
width: 250px;
height: 100px;
background-color: #0093b7;
}
.right-bottom-left {
float: left;
width: 100px;
height: 150px;
background-color: #dbd403;
}
.right-bottom-right-top {
height: 50px;
width:
研修とか課題とか書いてありますけど人に聞いて大丈夫な奴ですか？
https://freeks-japan.blog/php/1/30/
（画像検索で出てきただけなのでこちらのサイトを見て作成しているかも謎ですが）
回答1件
0
ベストアンサー
こんにちは。
どこが間違っているのでしょうか？
フロートレイアウトは10年ぐらい時代遅れなので、2021年にこれを勉強していることが一番の間違いというか時間の無駄ではないかな、とは思いますがそれはそれとして。
間違いを列挙します。
- .footer が .wrapper の外にある
- .right が .main の外にある
- main-clearfix → main clearfix
- .right-bottom-right に float がない
投稿2021/04/14 01:32
総合スコア36074
ありがとうございます！
全て間違いは理解できたのですがwrapperがfooterの外に出てるというのはdivで囲えてないということでしょうか？
具体的にどのように直したら良いのでしょうか？
> wrapperがfooterの外に出てる
いえ、逆です。
.footer が .wrapper の外にあります。
すみません、できました！
ありがとうございます！
ご解決されて何よりです。
お手数ですが、BAを選出して質問を解決済みにしてください。
あなたの回答
tips
プレビュー
