ブートストラップで画像の上にフォームを載せたい

タイトルの通りです。コード載せます。下にスクショも載せます。```ここに言語を入力
コード

<html lang="ja">
 <head>
  <meta charset="utf-8">
   <title>Bootstrapの練習</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <link rel="stylesheet" href="css/bootstrap.css">
   <script type="text/javascript" src="js/jquery-3.5.0.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.js"></script>
  </head>
<body>
<h1></h1>
  <button type="button" class="btn btn-default">概要</button>
  <button type="button" class="btn btn-default">準備</button>
  <button type="button" class="btn btn-default">安全</button>
  <button type="button" class="btn btn-default">マネープラン</button>
  <div class="text-right pr-5">
    <button type="submit" class="btn btn-danger">はじめる</button>
    </div>
    <div class="form">
    <img src="airbnb.png" class="img-responsive mx-auto d-block" >
  <div class="row justify-content-end">
  <div class="border col-5">
    <br>
    <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ<h1>

    <h2>宿泊施設の内容を記入</h2>
    <br>
    <div class="row">
      <div class="col-md">
        <form>
          <div class="form-group">
            <input type="text" class="form-control">
            <div class="d-flex">
              <select class="form-control w-50">
                <option>まるまる貸切</option>
                <option>個室</option>
                <option>シェアルーム</option>
              </select>
            <select class="form-control w-50">
                <option>ゲスト1人</option>
                <option>ゲスト2人</option>
                <option>ゲスト3人</option>
                <option>ゲスト4人</option>
                <option>ゲスト5人</option>
                <option>ゲスト6人</option>
                <option>ゲスト7人</option>
                <option>ゲスト8人</option>
                <option>ゲスト9人</option>
                <option>ゲスト10人</option>
                <option>ゲスト11人</option>
                <option>ゲスト12人</option>
                <option>ゲスト13人</option>
                <option>ゲスト14人</option>
                <option>ゲスト15人</option>
                <option>ゲスト16人</option>
            </select> 
            <button type="submit" class="btn btn-danger">はじめる</button>   
          </div>
        </form>
      </div>
    </div>
  </div>
  </div>
</div>
</body>
</html>
```





![イメージ説明](c9aee53829f98118eff6b6ce6e8e8926.png)

kai0310

2020/04/29 15:09

コードを提示する際はMarkDown記法を用いてください。質問本文は修正できます。

writegrint

2020/04/29 15:21

試してみます

行動規範の内容に同意します

回答3件

背景画像にすれば良いのでは（あとは自分でやってみてください）。
「画像の上に要素が載っている」ものの多くは画像が背景画像だと思います。
お手本があるなら画像部分右クリックしてみては？
「背景画像を表示」とか出てきませんか？

投稿2020/04/29 20:07

m.ts10806

総合スコア80850

writegrint

2020/04/29 21:40

画像ではなく、フォームの機能を持ったものを画像の上に置きたいのです。

m.ts10806

2020/04/29 21:46 編集

ちょっと意味が分からないですが、背景画像にしてフォーム用のHTMLをその上に置けば良い、という話をしています。

m.ts10806

2020/04/29 21:48

>背景画像にして「背景画像」とは提示されている写真の話です。フォーム自体を画像にするとは言ってません。

行動規範の内容に同意します

CSS
.relative {
  position: relative;
}
.absolute{
  position: absolute;
  bottom:20%;
  right: 15%;
  background-color: white;
}
.px {
  font-size: 320%;
}
.size1{
  font-size: 100%;
}

位置は合ってきました。
後は余計に白くなった部分を消してフォーム全体のサイズを画像に合わせたいです。

投稿2020/04/29 22:26

編集2020/04/29 23:10

writegrint

総合スコア22

Yasumichi

2020/04/29 22:46 編集

``` right: 5%; ``` とかではダメですか？（値は仮です。）あとは、 ``` background-color: white; ``` で背景色が指定できます。

writegrint

2020/04/29 23:11

回答編集しました。お願いします。

Yasumichi

2020/04/29 23:17

回答が質問になっているのであれですが。後は、 width: 200px; とかを追加して、幅をしていすれば、良さそうな気がします。数値は、適宜、調整してください。

m.ts10806

2020/04/29 23:18

airbnb.png を背景画像に指定すれば楽にできると申し上げてますが、なぜ、あえて難しく煩雑になるやり方を進めるのでしょうか？

Yasumichi

2020/04/29 23:44 編集

多分、具体的なコード例が提示されていないので調べ方が分からないのではないでしょうか？ <form>の親要素が <div class="row">になっていると思われますが、背景画像にする場合だと親要素に id="toparea" とか属性を追加して以下のような CSS を書く感じですかね。この際、該当画像を表示している <img> は削除してしまいます。 #toparea { background: no-repeat url("../../media/hoge.png"); // url の値は、画像までのパスに変える height: 300px; // 画像の高さぐらいに調整 } # 外部CSSに書く以外に style='background: no-repeat url("../../media/hoge.png"); height: 300px;' を該当の div 要素に指定する手もあります。後は、質問者の方に https://developer.mozilla.org/ja/docs/Web/CSS とか読んでもらえると。

m.ts10806

2020/04/29 23:54

コメントから背景画像自体は知っているようですし、単に私の回答の意図が伝わっていないだけに見えました。お手本サイトがあるなら見ればいいのにと、この手の質問のたびに思います。

writegrint

2020/04/30 00:24

すいません、なぜ背景画像にすると楽になるのでしょうか。画像を表示できればいいと思ったので

writegrint

2020/04/30 00:30

親要素の指定等の必要が無くなるからでしょうか

Yasumichi

2020/04/30 00:36

時間があるようであれば、背景画像にしたバージョンを作ってみて、自分なりに比較してみる方が良いと思います。個人的には、position の relative とか absolute とかの調整って、割と煩雑に感じています。（私はうまく伝わるように説明できません。）

m.ts10806

2020/04/30 01:28

背景画像も画像表示ですよ。 airbnbとやらのサイトは背景画像の上にテキトスなりフォームなり乗せてるようですけど。背景画像にすれば、「同じエリア内の表示位置」から考えれば良いので、text-alignとpadding使うだけで位置は整うのではと。

writegrint

2020/04/30 08:33

なるほど、確かにそれなら背景画像にした方がいいですね。有益な情報ありがとうございます。

行動規範の内容に同意します

ベストアンサー

bootstrap そのものの機能では見つけきれませんでしたが、以下の記事が参考にならないでしょうか？

親要素 <div> に relative を指定し、子要素 <img> のうち上に重ねる画像（ここでは point.png を動かします）に absolute を指定します。

投稿2020/04/29 15:14

Yasumichi

総合スコア1773

writegrint

2020/04/29 15:23

記事読みました。別の質問になってしまうのですが、ブートストラップとCSSの使い分けのやり方も教えて頂けませんか？

Yasumichi

2020/04/29 15:37

この辺は、宗教戦争になってしまう恐れがありますが…。 bootstrap 自体も(JavaScript で補助はしているものの)CSSなので答え方が難しいですが、個人的には、大枠は、bootstrap を利用して書いて、微調整したい部分を追加の CSS で定義すれば良いのではと思います。

writegrint

2020/04/29 16:46

追加で新しくファイルを作成するという事でしょうか？具体的な手順を教えて頂きたいです。

Yasumichi

2020/04/29 16:55 編集

> 追加で新しくファイルを作成するという事でしょうか？その通りです。(HTML に <style>タグで追加する手もありますが。) 例えば、以下のような CSS ファイルを addition.css という名前で css フォルダーの中に作成したとします。 ``` p { text-indent: 1em; } ``` 利用する側の HTML ファイルでは、以下のタグを <head>～</head>の内側に追加します。 ``` <link rel="stylesheet" href="css/addition.css"> ``` 場所的には、css/bootstrap.css を読み込んだ後ぐらいが適当かと思います。

writegrint

2020/04/29 22:18

試してみました。大分近づけました。しかし左側に寄せる方法が沢山あってどれを適用すればいいかわかりません。写真貼ります。

行動規範の内容に同意します

あなたの回答