レスポンシブ化に対して、要素のサイズを固定したい。

CSS
1
2body{
3  margin:0;
4}
5header{
6  width: 100%;
7  height: 75px;
8  background-color: red;
9  position: fixed;
10}
11div{
12  font-size:14px;
13}
14.container{
15  background-color: green;
16  width: 1170px;
17  height: 75px;
18  margin:0 auto;
19  display: flex;
20  align-items: center;
21}
22.header-logo img{
23  height: 45px;
24
25}
26.header-logo{
27
28    display: inline-block;
29}
30.headline{
31    font-weight: 600;
32  display: inline-block;
33  margin-top: 7px;
34}
35.btn{
36  font-weight: 300;
37  text-decoration: none;
38  display:block;
39  padding:10px 39px;
40  color:white;
41  border-radius: 100px;
42  opacity: 0.7;
43  background-color: #FF3366;
44}
45.header-right{
46  margin:0 0 0 auto;
47}
48.header-right a:hover{
49  opacity: 1.0;
50}
51

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="test_css.css">
6    <title></title>
7  </head>
8  <body>
9    <header>
10      <div class="container">
11       <div class="header-logo"><img src="C:\Users\kusud\OneDrive\画像\ドキュメント\新しいフォルダー\text fot atom\html.hmtl\isara\isaralogo.png" alt="isaralogo"></div>
12       <div class="headline">バンコクのノマドエンジニア育成講座</div>
13       <div class="header-right"><a class="btn" href="#">お問い合わせ / 資料請求はこちら</a><div class="header-right">
14      </div class="container">
15    </header>
16  </body>
17</html>
18

検証モードを使用し、小さくしたりしてみると個々の要素まで小さくなったり、ヘッダー高さがどんどん縮んでいきます。
要素の大きさを固定したいのですがどうすれば改善できるでしょうか？

hatena19

2020/05/12 03:08

現状のHTMLとCSSを提示してください。コードはマークダウンのコードブロックに入れてください。 https://teratail.com/help/question-tips#questionTips3-5-1

jampan02

2020/05/12 03:12

失礼しました。ただいま追加させていただきました。

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

回答1件

まずHTMLですが閉じタグにクラスを付加することはできません。削除してください。
</div class="container"> → </div>

html
1<header>
2  <div class="container">
3    <div class="header-logo">
4      <img src="https://placehold.jp/100x50.png" alt="isaralogo">
5    </div>
6    <div class="headline">バンコクのノマドエンジニア育成講座</div>
7    <div class="header-right"><a class="btn" href="#">お問い合わせ / 資料請求はこちら</a>
8      <div class="header-right">
9      </div class="container">
10    </div>
11  </div>
12</header>

あと、CSSで .container の幅(width)を固定指定せずに、最大幅(max-width)を設定してください。
これで、個々の要素やヘッダー高さが小さくなることはなくなります。

css
1body{
2  margin:0;
3}
4header{
5  width: 100%;
6  height: 75px;
7  background-color: red;
8  position: fixed;
9}
10div{
11  font-size:14px;
12}
13.container{
14  background-color: green;
15  max-width: 1170px; /*修正*/
16  height: 75px;
17  margin:0 auto;
18  display: flex;
19  align-items: center;
20}
21.header-logo img{
22  height: 45px;
23
24}
25.header-logo{
26    display: inline-block;
27}
28.headline{
29  font-weight: 600;
30  display: inline-block;
31  margin-top: 7px;
32}
33.btn{
34  font-weight: 300;
35  text-decoration: none;
36  display:block;
37  padding:10px 39px;
38  color:white;
39  border-radius: 100px;
40  opacity: 0.7;
41  background-color: #FF3366;
42}
43.header-right{
44  margin:0 0 0 auto;
45}
46.header-right a:hover{
47  opacity: 1.0;
48}
49