Q&A
夜分遅くに失礼いたします。
コーディングの練習を行っている者です。
フッターが何故かこの「about」の所まで来てしまいます。
修正を試みましたが、どうもうまくいきません。どなたかご教示をお願い致します。
<HTML> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pasutayasan</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href=stylesheet.css> </head> <body> <header> <div class="header-logo"><a href=""><img src="logo.png"></a> <div class="header-list"> <ul> <li><a href="">Menu</a></li> <li><a href="">Menu</a></li> <li><a href="">Menu</a></li> </ul> </div> </div> </header>
</body> </html><main> <div class="mv"> <a href=""><img src="mainvisual.png"></a> </div> <section class="menu"> <h2>Menu</h2> <div class="item_box"> <ul> <li> <img src="menu_img1.png"> <h3>Menu1</h3> <p>We are excellent.</p> </li> <li> <img src="menu_img2.png"> <h3>Menu2</h3> <p>We are excellent.</p> </li> <li> <img src="menu_img3.png"> <h3>Menu3</h3> <p>We are excellent.</p> </li> </ul> </div> </section> <section class="about"> <h2>About</h2> <div class="about_box"> <div class="about_img"> <img src="about_img.png"> </div> <div class="about_description"> <h2>Lorem ipsum dolor sit<br> amet,consectetur</h2> <p>adipiscing elit,sed do eiusmod<br> tempor incidedunt ut labore et dolore</p> <a href="#" class="button">MORE</a> </div> </div> </section> </main> <footer> 2020 </footer>
css
@charset "UTF-8";
body{
margin: 0;
padding: 0;
color: black;
font-size: 15px;
}
a{
color:black;
}
a:visited{
color:#d8bfd8;
}
a:hover{
color:#dda0dd;
font-weight:700;
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}
p {
margin-top: 0;
line-height: 1.8;
}
header{
width: 1032px;
height: 85px;
margin: 0 auto;
}
.header-logo{
padding-top:15px;
padding-left: 12px;
padding-bottom: 15px;
}
.header-list{
float: right;
padding-right:12px;
padding-bottom: 15px;
}
.header-list ul li{
display:inline-block;
width: 65px;
justify-content: space-between;
}
main{
width: 1032px;
height: 900px;
margin: 0 auto;
}
main img{
height: 483px;
}
.menu h2{
text-align: center;
padding-top: 30px;
padding-bottom: 20px;
text-decoration: underline red;
font-size: 30px;
}
.item_box ul{
display: flex;
justify-content: space-between;
padding-left: 0;
}
.item_box ul li{
display:inline-block;
text-align: center;
}
.item_box img{
width: 250px;
height: 200px;
}
.item_box ul li h3{
margin-bottom: 0;
}
.item_box{
padding: 0 100px;
}
.about > h2{
text-align: center;
text-decoration: underline red;
font-size: 30px;
padding-bottom: 20px;
margin-bottom: 0;
}
.about_description h2{
font-size: 25px;
margin-left: 40px;
justify-content: space-between;
}
.about_description p{
font-size: 20px;
margin-left: 40px;
}
.about_description a{
font-size: 20px;
margin-left: 40px;
background: #fff;
color:#ff0000;
border: solid 3px #ff0000;
border-radius:20px 20px 20px 20px;
display: block;
width: 105px;
height: 30px;
text-align: center;
text-decoration:none;
padding:0 15px;
}
.about_img img{
float:right;
width: 400px;
height: 260px;
padding-right: 100px;
}
.about_description{
margin-left: 40px;
}
footer{
color: gray;
text-align: center;
}
回答1件
0
ベストアンサー
float:right;で画像を右寄せにしてますが、これが後の要素に影響を与えてます。
float を解除するには、clear: both; が必要になります。
css
1footer{ 2 color: gray; 3 text-align: center; 4 background-color: #333; 5 clear: both; /* 追加 */ 6}
float は後の要素のレイアウトに影響を与えるので、現在は Flexbox で横並びさせるのが主流です。
いちど調べてみることをお勧めします。
投稿2020/10/10 16:50
総合スコア33715
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。