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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

1回答

203閲覧

画像の位置や幅が変えられない

RYO.K

総合スコア46

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/02/20 12:55

<!--##############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

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

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

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

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

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

m.ts10806

2020/02/20 12:57

とりあえずコード全部投げる行為はやめましょう。回答者からすると要件に関係ない情報ばかりでノイズだらけです。 該当箇所だけ切り取ったミニマムコードを試してください。 > https://teratail.com/help/question-tips#questionTips3-5-1 最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。
guest

回答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

jackmiwamiwa

総合スコア395

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

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

RYO.K

2020/02/22 13:35

ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問