HTMLデザインCSS

以下のHTMLのmain.containerのレイアウトを画像のようにしたいです

こちらが現在の画像です。

実現したいのは見本の左半分のinput等の配置です。全ての要素がボックスに入ってそのいっぱいまで広がっている感じです。

それを実現する為に、HTML側でmainformをdivで囲み、CSSではwidthを５００Pxに設定しました。
あとはdisplayをinlineにしたり、spanをpに変えたりと色々しましたが、上手く行きません。ヒント、解決策を教えてください。

HTML
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3
4<head>
5  <meta charset="utf-8">
6  <title>Travelers公式サイト</title>
7  <link rel="icon" href="favicon.ico">
8  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
9  <link rel="stylesheet" href="css/index.css">
10  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
11  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
12  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
13</head>
14
15<body>
16  <header>
17
18  </header>
19
20  <main>
21    <div class="container">
22
23      <div class="mainform">
24        <form action="" method="post">
25          <span><input type="text" name="" value="" placeholder="目的地など"></span>
26          <span>
27            <input class="departuredate" stype="text" name="" value="" placeholder="出発日">
28            <input class="returndate" type="text" name="" value="" placeholder="出発日">
29          </span>
30          <span><input type="text" name="" value=""><span id="btn" class="disabled btn">検索する</span>
31          </span>
32        </form>
33      </div>
34
35      <div class="mainimg">
36        <img src="imgs/images.jpeg" width="250" height="250" alt="">
37      </div>
38    </div>
39
40    <div class="clear"></div>
41
42  </main>
43
44  <div class="voices">
45    <div class="container">
46
47    </div>
48  </div>
49
50  <footer>
51    <div class="container">
52
53    </div>
54  </footer>
55  <script>
56    $(function() {
57      $('.departuredate').datepicker();
58      $('.returndate').datepicker();
59    });
60  </script>
61</body>
62
63</html>

CSSも触りましたが、グチャグチャになった為、最低限だけ残してあります。
色々触ったので、貼り付けた画像と同じレイアウトにはなっていません。

* {
  margin: 0;
  padding: 0;
  /*全要素のマージン・パディングをリセット*/
}

h1, h2, h3, h4, h4, h6, p {
  margin: 0;
  padding: 0;
}

body {
  font-family: Verdana, sans-serif;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 960px;
  margin: 0 auto;
  padding: 40px 0;
}

.clear {
  clear: both;
  /*floatの解除、ここがポイント*/
}

header {
  height: 65px;
}

/*main*/
main {
  color: #fff;
  background: url(../imgs/bg.png);
  background-size: cover;
}

main .container {
  position: relative;
}

.mainimg img{
  border-radius: 50%;
  position: absolute;
  top:20px
  bottom: 20px;
  right: 0;
}

/* .mainimg {
  float: right;
}

.mainform {
  float: left;
} */

input {
  border-radius: 2px;
  width: 300px;
  height: 40px;
  font-size: 20px;
}

.btn {
  background-color: #1e90ff;
  color: #ffffff;
  padding: 10px 15px;
  font-size: 20px;
  margin-left: 15px;
  cursor: pointer;
}

.lookup:not(:last-child) {
  margin-bottom: 40px;
}

.lookup:not(:last-child) {
  margin-bottom: 40px;
}

yoshinavi

2019/02/10 01:36

提示のコードは、「現在の画像」のコードでしょうか？

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

回答1件

ベストアンサー

ご提示されているコードを拝見する限りではレスポンシブレイアウトにはなっていないようですが、レスポンシブであるかないかに関わらず、ボックスの要素いっぱいに配置するには、外枠（この場合例えば.mainform）の幅を指定したら、中の要素はwidth:100%;とするのが基本かと思います。
あと、各要素の横幅はpxで指定するより%などの単位で指定した方がコンテンツ量の増減に柔軟に対応できます。
今はどのブラウザでもサイトのソースがどうなっているか、スタイルがどう設定されているか見ることができますので、もしまだご覧になっていなかったら一度お試しください。
MacのFirefoxの場合ツール>ウェブ開発>インスペクター、Chromeの場合設定メニューからその他のツール>デベロッパーツールというのがあります。（Windows機が今手元にないのでWindowsでも同じかどうかはわかりません。）EdgeではF12で表示されるはずです。
これらのツールを使うと、ブラウザ上でcssやhtmlを自分で書き換えたり特定のスタイルを外してみたりして、それによってどう変わるか試してみることもできるので勉強になりますよ。

投稿2019/02/08 20:38

編集2019/02/08 22:12

cerfweb

総合スコア1899

Chandler_Bing

2019/02/09 07:27

ありがとうございます。 <span><input type="text" name="" value=""><span id="btn" class="disabled btn">検索する</span> の部分ですが、これを画像のようにmainformにいっぱいに広げる為には、 spanをinline=blockで50%をそれぞれに設定すれば良いですか。