Q&A
とりあえずコード全部投げる行為はやめましょう。回答者からすると要件に関係ない情報ばかりでノイズだらけです。
該当箇所だけ切り取ったミニマムコードを試してください。
> https://teratail.com/help/question-tips#questionTips3-5-1
最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。
<!--##############last##################-->内のbackground-image: url('heart.jpeg');の画像が横幅いっぱいまで広げられません、、、それと同じ場所の<img src="logo.jpeg">がなぜか中央に配置されてしまい左に寄せることができません。どうすればいいでしょうか？????
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet" type="text/css" href="test.css"> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 9 10<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 11 <title>模写1</title> 12 13</head> 14<body> 15 <div class="container-fluid"> 16 <div class="row justify-content-between"> 17 <!--##############header##################--> 18 <div class="col"> 19 <a href="#"> 20 <img class="col-auto mt-4" src="logo.jpeg" a href="#" height="30px " width="30px "> 21 </a> 22 </div> 23 <div class="col-auto"> 24 <ul class="row"> 25 <li class="col month">予想月収</li> 26 <li class="col"><h4>¥151,550</h4></li> 27 <li class="button"><a href="#" class="b2">はじめる</a></li></ul> 28 </div> 29 30 </div></div> 31 <!--##############人数などの検索欄##################--> 32 <div class="box"> <div class="topic"> 33 34 <h1 class="col topic2">Airbnbホストになって、暮らしをレベルアップ</h1> 35 <p >どれくらいの収入が見込めるかチェック</p> 36 <input type="text" placeholder="ロケーション" name="location" class="locate"> 37 <select id="rent" name="rent" class="custom-select sources"> 38 <option value="all">まるまる貸切</option> 39 <option value="only">個室</option> 40 <option value="share">シェアルーム</option> 41 </select> 42 43 <select id="howmany" name="howmany" class="custom-select"> 44 <option value="1">ゲスト1人</option> 45 <option value="1">ゲスト2人</option> 46 <option value="1">ゲスト3人</option> 47 <option value="1">ゲスト4人</option> 48 <option value="1">ゲスト5人</option> 49 <option value="1">ゲスト6人</option> 50 <option value="1">ゲスト7人</option> 51 </select> 52 <h1 class="m">¥80,289<span class="a">月あたり</span></h1> 53 <buttom type="buttom" class="btn btn-danger">はじめる</buttom> 54 55 </div></div> 56 57 <!--##############last##################--> 58 <div class="last"> 59 <h1 class="money">収益化してみますか？</h1> 60 <button type="button">はじめる</button> 61 <div class="first"> 62 <ul class="second"> 63 <li class="top">Airbnb</li><br> 64 <li><a href="#">採用情報</a></li> 65 <li><a href="#">ニュース</a></li> 66 <li><a href="#">ポリシー</a></li> 67 <li><a href="#">ヘルプ</a></li> 68 <li><a href="#">ダイバーシティ&ビロンギング</a></li> 69 <li><a href="#">企業情報</a></li></ul> 70 </div> 71 <ul class="second"> 72 <li class="top">スタッフのおすすめ</li><br> 73 <li><a href="#">信頼&安全</a></li> 74 <li><a href="#">お友達紹介クーポン</a></li> 75 <li><a href="#">Airbnb Citizen</a></li> 76 <li><a href="#">出張</a></li> 77 <li><a href="#">アクティビティ</a><span>新着</span></li> 78 <li><a href="#">Airbnbmag</a></li> 79 </ul> 80 <ul class="second"> 81 <li class="top">ホスティング</li><br> 82 <li><a href="#">おもてなしの心</a></li> 83 <li><a href="#">ホストの責任</a></li> 84 <li><a href="#">コミュニティセンター</a></li> 85 <li><a href="#">体験を掲載</a><span>新着</span></li> 86 <li><a href="#">オープンホーム</a></li> 87 </ul> 88 <ul class="second"> 89 <a href="#"><i class="fab fa-facebook-square"></i></a> 90 <a href="#"><i class="fab fa-twitter"></i></a> 91 <a href="#"><i class="fab fa-instagram"></i></a> 92 <li><a href="#"></a></li> 93 <li><a href="#"></a></li> 94 <li><a href="#"></a></li> 95 <li><a href="#">利用規約</a></li> 96 <li><a href="#">プライバシー</a></li> 97 <li><a href="#">サイトマップ</a></li> 98 </ul> 99 100 <div class="info"> 101 <div class="line"></div> 102 <img src="logo.jpeg"> 103 <p><a href="#">Airbnb Global Services Limited<br> 104 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> 105 <br>© 2020 Airbnb, Inc. All rights reserved.</p> 106 </div> 107 108 109 110 </div> 111 </div> 112 113</body> 114</html>
CSS
1/**************************** 2header 3****************************/ 4.logo{margin:25px 30px 30px 5px;} 5ul{list-style: none;} 6li{ margin: 30px 0px;} 7.button{border: solid; 8 color: white; 9 background-color: orangered; 10 border-radius: 8px; 11 margin-right: 70px; 12 padding: 6px 14px 6px 12px;} 13.b2:hover{text-decoration: none; color: white;} 14.b2{color: white; padding-left: 5px;} 15 16/**************************** 17人数などの検索欄 18****************************/ 19 20.box{background-image: url('main.jpeg'); 21 border: solid white; 22 background-repeat: no-repeat; 23 background-size: cover; 24 height: 600px; 25 margin-bottom: 60px; 26 27} 28.month{margin-left: 110px; 29 margin-top: 35px;} 30.topic{float: right; 31 border: solid white; 32 background-color: white; 33 border-radius: 4px; 34 box-shadow:0 12px 40px rgba(0, 0, 0, .12); 35 max-width: 460px; 36 margin: 78px 92px 0 0; 37 padding: 25px 20px; 38 } 39 40.topic h1{font-size: 40px; 41 line-height: 40px; 42 letter-spacing: -0.6px; 43 } 44.topic input{width: 400px; 45 height: 40px; 46 } 47#rent{width: 235px; 48 height: 40px; 49 margin-top: 10px; 50 } 51#howmany{height: 40px; 52 width: 150px; 53 margin-left: 10px; 54 margin-top: 10px;} 55.a{font-size: small; 56 font-weight: medium; 57 letter-spacing: 1px; 58margin-left: 5px;} 59.m{margin-top: 25px;} 60.topic p{margin-top: 25px;} 61.topic buttom{width: 400px; 62 height: 50px; 63 padding-top: 10px;} 64 65/**************************** 66last 67****************************/ 68.last{background-image: url('heart.jpeg'); 69 height: 440px; 70 border: solid white;} 71.last .money{font-size: 60px; 72 color: white; 73 margin-top: 80px; 74 font-weight: 700; 75 margin-left: 50px;} 76.last button{background-color: white; 77 padding: 15px 30px; 78 border-radius: 5px; 79 font-size: 19px; 80 font-weight: 530; 81 color: #484848; 82 margin-top: 35px; 83 margin-left: 50px;} 84.last span{color: white; 85 border: solid; 86 background-color: rgb(0, 106, 112); 87 border-width: 1px; 88 border-radius: 4px; 89 font-size: 14px; 90 padding:2px 5px ; 91 margin-left: 10px;} 92.last a{color: #646464; 93 } 94.last a:hover{color: #646464;} 95.last ul{font-size: 15px; 96 text-align: left; 97 } 98.last .top{font-weight: 600; 99 color: #646464; 100 margin-bottom: -10px;} 101.last li{line-height: 2%;} 102.last .first{margin-top: 300px; 103} 104.last .second{float: left; 105 margin-right: 70px;} 106.second i{margin-right: 10px; 107margin-top: 25px; 108font-size: 20px; 109color: #646464;} 110.last .line{border: .5px solid #ebe7e7; 111 margin-top: 550px;} 112.info p{font-size: 14px; 113 color: rgb(118, 118, 118); 114 max-width: 700px; 115 line-height: 17px; 116 } 117.info img{height: 30px; 118 width: 30px; 119 } 120 121 122
回答1件
0
ベストアンサー
css
1.last .second { 2 float: left; 3 margin-right: 70px; 4}
の部分で、floatをかけており、clearしていないので、画像が左に移動しないと思います。
実証はしていないですが、
html
1<div class="last"> 2 <div class="clearfix"> 3 <ul class="second">内容</ul> 4 <ul class="second">内容</ul> 5 <ul class="second">内容</ul> 6 </div> 7 <div class="info"> 8 <img src="sample.jpg" /> 9 </div> 10</div>
css
1.clearfix::after { 2 content: ""; 3 clear: both; 4 display: block; 5}
のような感じでfooter部分が反映されると思います。
背景画像については
css
1.last { 2 background-size: cover; 3}
を追加すれば反映されると思います。
floatとbackgroundについてもurlも共有いたします。
投稿2020/02/20 15:56
総合スコア400
あなたの回答
tips
プレビュー
