widthをpxではなく%で表示させたい。

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, shrink-to-fit=no">
6    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
7    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
8    <link rel="stylesheet" href="style.css">
9    <link rel="stylesheet" href="responsive.css">
10    <link rel="icon" href="img/airbnb_logo.ico">
11    <title>現地の人から借りる家、体験＆スポット - Airbnb</title>
12  </head>
13  <body>
14
15
16
17<header>
18  <div class="header-left">
19      <a href="#"><img src="img/airbnb_logo.png"></a>
20      <div class="search">
21        <i class="fas fa-search"></i>
22        <input type="text"  placeholder="探す">
23      </div>
24  </div>
25  <div class="header-right">
26    <ul >
27      <li><a href="#">ホストをはじめる</a></li>
28      <li><a href="#">ヘルプ</a></li>
29      <li><a href="#">登録する</a></li>
30      <li><a href="#">ログイン</a></li>
31    </ul>
32  </div>
33</header>
34
35
36
37
38
39
40
41    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
42    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
43    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
44  </body>
45</html>
46

CSS
1* {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
8}
9
10a {
11  text-decoration: none;
12}
13/* ----------↑上記は基本編集しない------------- */
14header{
15  padding:  20px 20px 20px 30px;
16  width: 100%;
17  height: 80px;
18
19}
20.header-left{
21  float:left;
22  display: inline-block;
23
24}
25
26.header-left img{
27  width: 30px;
28  height: 30px;
29}
30
31.header-left input{
32  width:420px;
33  height: 50px;
34    border: none;
35}
36.search{
37  border: 1px solid #999;
38  display: inline-block;
39}
40
41.header-right {
42  float: right;
43  margin-top: 10px;
44}
45.header-right li{
46  display: inline-block;
47  padding: 0 15px;
48}
49.header-right a{
50    color: #444444;
51    font-weight: bold;
52    font-size: 13px;
53    text-decoration: none;
54    padding-bottom: 28px;
55}
56
57.header-right a:hover{
58  border-bottom: 2px solid #444444;
59}
60

【responsive.css】

@media (max-width:1127px){
  .header-right{
    display: none;
  }
}

@media  (max-width:740px){
.header-left input{
    width: 80%;
  }
}

画面幅を740pxに縮小した際、

↑こうなるが、本当は

↑こうしたいです。

親要素の　searchクラスの幅が指定されていないからでしょうか？
この場合どうすれば上記のようになりますか？

それともこれはpxで指定するべきなのでしょうか？
ただ、pxで指定した場合、また程度小さくなった時の為にさらに追加でいくつも指定しなければなりません。

@media (max-width:458px) {
  .header-left input{
    width: 280px;
  }
}

と

@media  (max-width:375px){
  .header-left input{
    width: 200px;
  }
}

これも追加で記述せねばならないという事です。
これを%なら一つで済むのかと思いました。

%で指定するには、どうhtml、cssを変更すれば良いのでしょうか？

kei344

2019/03/27 16:25

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、スクリーンショットなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

退会済みユーザー

2019/03/27 16:47

追記、修正しました。このニュアンスで伝わるでしょうか？

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

回答2件

ベストアンサー

float でレイアウトを組まないほうが良いでしょう。float は文章中に要素を流し込みたい場合にのみ使用するくらいで良いと思います。
今からCSSを勉強するならgridとflexをまず調べてみてください。

HTML
1<div class="a">
2  <img src="https://placehold.jp/12/cc9999/993333/50x50.png" alt="">
3  <div class="b"><input type="text"></div>
4</div>

CSS
1.a {
2  display: flex;
3}
4
5.b {
6  flex-grow: 1;
7  background-color: #ecc;
8  padding: 0.5em;
9}
10
11input {
12  width: 100%;
13  box-sizing: border-box;
14}
15```**動くサンプル：**[https://jsfiddle.net/1u3rt4op/](https://jsfiddle.net/1u3rt4op/)
16
17---
18
19【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
20[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)
21
22【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
23[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)
24
25【段組みのCSS。】
26[https://lopan.jp/layout2/](https://lopan.jp/layout2/)
27
28【よこ並びのCSS。】
29[http://lopan.jp/layout/](http://lopan.jp/layout/)

投稿2019/03/27 17:07

kei344

総合スコア69398

退会済みユーザー

2019/03/28 09:12

やはりfloatよりflexboxで組むべきでしたか。薄々わかっていても、どうもflexの知識がふわっとして浅いので、避け気味でした。頂いたURLでの記事を参考にしてみます。

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

基本的には「kei344」さんの回答のとおりかと思います。

今のHTMLに対応するには以下のような感じでしょうか。floatを打ち消して、flexを適用させるイメージです。

CSS
1@media  (max-width:740px) {
2  .header-left {
3    float: none;
4    display: flex;
5    align-items: center;
6  }
7
8  .search {
9    display: flex;
10    align-items: center;
11    margin-left: 5px;
12    width: 100%;
13  }
14
15  .header-left input {
16    width: 100%;
17  }
18
19}

投稿2019/03/28 01:01

yoshinavi

総合スコア3523

退会済みユーザー

2019/03/28 09:31

現状からの対応コードをありがとうございます。このコードで試しましたが、ほぼ理想通りです。ですが、画面幅が740px以下になった際、ロゴがほんの少しだけズレるのですが、これの改善方法はありますでしょうか？それとも、最初からfloatを一切使わずにやった方がズレが生じないでしょうか？ずっとflaexboxの記事等読み漁っていますが、実際にこのコードをfloat無しでflexを使って記述する方法がどうもわかりません。

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

あなたの回答