Q&A
リンクがご自身のPCのデスクトップになってますが、さすがにWEBからアクセスはできません。（できたら怖い）
模写しているWEBサイトのリンクを載せてください。
リンクにのせたサイトは現在自分が模写してるものなのですがなぜか右側いっぱいに広げられません。
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 <title>模写1</title> 10</head> 11<body> 12 <div class="container-fluid"> 13 <div class="row justify-content-between"> 14 <!--##############header##################--> 15 <div class="col"> 16 <a href="#"> 17 <img class="logo" src="https://seeklogo.com/images/A/airbnb-logo-1D03C48906-seeklogo.com.png" a href="#" height="30px" width="30px"> 18 </a> 19 <div class="box"></div> 20 </div> 21 <div class="col-auto"> 22 <ul class="row"> 23 <li class="col month">予想月収</li> 24 <li class="col"><h4>¥151,550</h4></li> 25 <li class="button"><a href="#" class="b2">はじめる</a></li></ul> 26 </div> 27 </div> 28 </div> 29 30 31</body> 32</html>
CSS
1.logo{margin:25px 30px 30px 5px;} 2ul{list-style: none;} 3li{ margin: 30px 0px;} 4.button{border: solid; 5 color: white; 6 background-color: orangered; 7 border-radius: 8px; 8 margin:20px 70px 70px 0px; 9 padding: 8px 12px;} 10.b2:hover{text-decoration: none; color: white;} 11.b2{color: white; padding-left: 5px;} 12.box{background-image: url('main.jpeg'); 13 border: solid white; 14 background-repeat: no-repeat; 15 background-size: cover; 16 height: 350%; 17 18 19} 20.month{margin-left: 110px;}
回答2件
0
ベストアンサー
boxクラス要素をcolクラスの外に出してください。colクラス内だとcolクラスの幅以上には広がりません。
html
1 <div class="container-fluid"> 2 <div class="row justify-content-between"> 3 <!--##############header##################--> 4 <div class="col"> 5 <a href="#"> 6 <img class="logo" src="https://seeklogo.com/images/A/airbnb-logo-1D03C48906-seeklogo.com.png" a href="#" height="30px" width="30px"> 7 </a> 8<!-- <div class="box"></div> ここ削除 --> 9 </div> 10 <div class="col-auto"> 11 <ul class="row"> 12 <li class="col month">予想月収</li> 13 <li class="col"><h4>¥151,550</h4></li> 14 <li class="button"><a href="#" class="b2">はじめる</a></li></ul> 15 </div> 16 </div> 17 <div class="box"></div> <!-- ここに挿入 --> 18 </div>
そのうえでCSSでboxクラスに適切な高さを設定してください。
css
1.box { 2 background-image: url('https://hatena19.com/wp-content/uploads/2019/07/camera_1.jpg'); 3 border: solid white; 4 background-repeat: no-repeat; 5 background-size: cover; 6 height: 350px; /*修正*/ 7}
投稿2020/02/15 08:23
総合スコア33699
0
html
1<img class="logo" src="https://seeklogo.com/images/A/airbnb-logo-1D03C48906-seeklogo.com.png" a href="#" height="30px" width="30px">
の部分を
html
1<img class="logo" src="https://seeklogo.com/images/A/airbnb-logo-1D03C48906-seeklogo.com.png">
にして、(width, height,不要なa部分削除)
css
1img.logo { 2 width: 100%; 3}
のような感じでcssを記載すれば横幅いっぱいになると思います。
投稿2020/02/15 04:12
総合スコア395
classのlogoは左上のロゴマークのことなのでそれをやってしまうとそのロゴマークが大きくなってしまいます
他に画像がないように見えるのですが、どこの画像を動かしたいと思っているのでしょうか？
今回はlogoしかなかったので、そこで説明していますが、他の部分でも上記のような対応で反映されると思います。
背景画像を動かしたいのでしたら、 background-positionかbackground-sizeをさわればサイズなどの調整はできると思います。
https://developer.mozilla.org/ja/docs/Web/CSS/background-size
https://developer.mozilla.org/ja/docs/Web/CSS/background-position
スクリーンショットを載せました！
解決しましたありがとうございました????
あなたの回答
tips
プレビュー
