isaraの模写、ヘッダーの問い合わせボタンのサイズをブラウザの幅に合わせて変えたい。font-weightを効かせたい。

前提・実現したいこと

お問い合わせボタンのサイズをブラウザの幅に合わせて変化させたい。
ここに質問の内容を詳しく書いてください。
現在、isaraの模写をしている者です。オリジナルサイトは、ヘッダーの「お問い合わせ/資料請求はこちら」のボタンのサイズが変わるようになっていますが、これはどのようにCSSを書いたらいいのでしょうか？検証で元のコードをみても、width,heightは何も書かれていません。オリジナルサイトの幅などの数値を元に、vh,vwなどを使って書いてみましたが、ぴったり同じpxにはなりません。
また、同じ部分のfont-weightも効きません。fontの種類をオリジナルサイトと同じものにしましたが効きませんでした。こちらも教えていただきたいです。
初学者なもので質問の仕方におかしな点があるかもしれませんが、どうぞよろしくお願いいたします。

該当のソースコード

HTML
1<!DOCKTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <title>isara mosha</title>
7
8
9  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
10  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
11  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/5.8.0/css/font-awesome.min.css" rel="stylesheet">
12  <link rel="stylesheet" href="stylesheet.css">
13</head>
14
15<body>
16  <header>
17    <div class="header-wrapper">
18      <img class="header-logo" src="img/isaralogo.png">   
19      <p class="header-left">バンコクのノマドエンジニア育成講座</p>
20      <div class="header-btn">
21        <p class="header-text">お問い合わせ / 資料請求はこちら</p>
22      </div>
23    </div>
24    <div class="cb"></div>
25  </header>
26  <main>
27    <div class="top-wrapper">
28      <p class="top-text1">プログラミングで<br>人生の安定を手に入れよう</p>
29      <img class="top-img" src="img/isaralogolarge.png">
30      <p class="top-text2">バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p>
31    </div>
32  </main>
33</body>
34
35  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
36  <script src="js/jquery.ripples-min.js"></script>
37  <script src="main.js"></script>
38  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
39  <script src="https://kit.fontawesome.com/826fc58f73.js" crossorigin="anonymous"></script>
40</body>
41
42</html>
43

CSS
1header {
2    position: relative;
3    height: 75px;
4    padding: 20px 0;
5}
6.header-wrapper {
7/* margin-top: -5px; */
8max-width: calc(100% - 20px);
9width: 1170px;
10margin: -5px auto 0 auto;
11}
12.header-logo {
13  width: 128px;
14}
15
16.header-left {
17    display: inline-block;
18    font-size: 12px;
19    position: absolute;
20    bottom:1px ;
21    font-weight: 600;
22    margin-left: 5px;
23}
24.header-btn {
25    float: right;
26    border: 1px solid #da6b64;
27    background-color: #da6b64;
28    border-radius: 25px;
29    text-align: center;
30    width: 318px;
31    height: 44px;
32    cursor: pointer;
33}
34.header-text {
35    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
36    text-decoration:none;
37    color: white;
38    font-size: 12px;
39    display: block;
40    height: 100%;
41    width: 100%;
42    padding: 13px 30px;
43    font-weight: 300;
44}
45
46.header-text:hover  {
47    color: white;
48    text-decoration: none;
49}
50
51.top-wrapper {
52    text-align: center;
53    vertical-align: middle;
54    background-image: url("img/main.jpg");
55    background-size: cover;
56    background-position: center;
57    height:500px;
58    width: 100%;
59    padding-top: 92px;
60}
61.top-text1 {
62    font-size: 24px;
63    font-weight: 600;
64    line-height: 50px;
65}
66.top-text2 {
67    font-size: 16px;
68    font-weight: 600;
69}
70.top-img {
71    width: 318px;
72}

Lhankor_Mhy

2020/04/10 10:12

isara とはなんですか？

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

回答1件

ベストアンサー

ヘッダーの「お問い合わせ/資料請求はこちら」のボタンのサイズが変わるようになっていますが、これはどのようにCSSを書いたらいいのでしょうか？

メディアクエリで文字サイズが変わっていますね。
position:absolute;かつwidth:auto;かつleft:auto;なので、幅はコンテンツ幅になりますから、フォントサイズが変わるとそれに合わせて変わります。

css
1 @media only screen and (min-width: 768px) and (max-width: 1190px) { .txtl { font-size: 24px; font-weight: 600; }
2  .txtm { font-size: 16px; font-weight: 600; }
3  .txts { font-size: 14px; font-weight: 600; }
4  .txtxs { font-size: 12px; font-weight: 300; letter-spacing: 0; }