ウィンドウ幅に合わせてマージンをいい感じに可変したい

ウィンドウ幅に合わせてマージンをいい感じに可変したいです。
文字はvwを使ったのでいい感じになりましたが、中央に寄せた文字がレスポンシブにすると
ずれてしまいます。

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10
11    <link rel="stylesheet" href="style.css">
12    <title>会社名が入ります</title>
13
14    
15  </head>
16  <body>
17    <nav class="navbar navbar-expand-lg navbar-light pt-4 pb-4">
18      <a class="navbar-brand" href="#">
19        <img class="logo-img" src="img/logo4.png" alt="">
20      </a>
21      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
22        <span class="navbar-toggler-icon"></span>
23      </button>
24      <div class="collapse navbar-collapse" id="navbarNav">
25        <ul class="navbar-nav ml-auto">
26          <li class="nav-item mr-4">
27            <a class="nav-link text-white" href="#">Services</a>
28          </li>
29          <li class="nav-item mr-4">
30            <a class="nav-link text-white" href="#">Publications</a>
31          </li>
32          <li class="nav-item mr-4">
33            <a class="nav-link text-white" href="#">Partners & Career</a>
34          </li>
35          <li class="nav-item mr-4">
36            <a class="nav-link text-white" href="#">News</a>
37          </li>
38          <li class="nav-item mr-4">
39            <a class="nav-link text-white" href="#">About</a>
40          </li>
41          <li class="nav-item mr-4">
42            <a class="nav-link text-white" href="#">Contact</a>
43          </li>
44          <li class="nav-item mr-4">
45            <a class="nav-link text-white" href="#">JP|EN</a>
46          </li>
47        </ul>
48      </div>
49    </nav>
50
51    <div class="container-fluid">
52      <div class="relative">
53        <div class="col-xs-12 cover-img" style="background-image:url('img/background.jpg');">          
54          <figure class="cover-text text-center">
55            <figcaption class="catch-copy text-white fadein1">
56              <p class="h2">
57                ほげほげほげほげほげほげほげほげ</br>ほげほげほげほげほげほげほげほげほげほげほげほげ
58              </p>
59            </figcaption>
60            <figcaption class="catch-copy-2 text-white fadein2">
61              <p class="h2">
62                hogehogehogehogehogehogehogehoge </br>hogehogehogehogehogehogehoge
63              </p>
64              </figcaption>
65          </figure>
66        </div>
67      </div>
68    </div>
69
70    
71
72    <!-- Optional JavaScript -->
73    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
74    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
75    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
76    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
77  
78    
79
80    <script type="text/javascript" src="javascript.js"></script> 
81    
82    <script>
83      $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
84          if(this.id != 'navbarDropdown'){
85            $('.navbar-collapse').collapse('hide');
86          }
87      });
88      </script>
89  </body>
90</html>

css
1.navbar {
2  position: relative;
3}
4
5
6/* ロゴ画像レスポンシブ */
7@media (max-width: 576px) {
8  .logo-img {
9    width: 60%;
10  }
11}
12
13.nav-link {
14    font-size: 18px;
15    font-weight: bold;
16    line-height: 1px;
17    font-family: normal;
18}
19
20
21.fadein1 {
22  animation: fadein 3s ease-in-out infinite alternate both;
23}
24.fadein2 {
25  animation: fadein 3s ease-in-out 3s infinite alternate both;
26}
27
28.fadein.scrollin {
29  opacity: 1;
30  transform: translate(0, 0);
31}
32
33@keyframes fadein {
34  0%{
35    opacity: 0;
36  }
37  20%{
38    opacity: 0;
39  }
40  }
41 
42
43    
44.cover-img {
45  height: 600px;
46  display: table;
47  width: 100%;
48  background-size: cover;
49  z-index: -1;
50  position: absolute;
51  top: 0;
52  left: 0;
53}
54
55/* ワイドスクリーン用のCSS */
56@media only screen and (min-width: 1500px) {
57  .cover-img {
58    height: 800px;
59  }
60}
61
62/* タブレット用のCSS */
63@media only screen and (min-width : 768px) and (max-width : 1200px) {
64  .cover-img {
65    height: 500px;
66  }
67}
68
69/* スマホ用のCSS */
70@media only screen and (max-width: 479px) {
71  .cover-img {
72    height: 300px;
73  }
74}
75
76.cover-text {
77  display: table-cell;
78  vertical-align: middle;
79  text-align: center;
80}
81
82.catch-copy p {
83  margin: 0 auto;
84  padding: 0 0.8em;
85  font-size: 3vw;
86  text-align: center;
87}
88
89/* スマホ用のCSS */
90@media only screen and (max-width: 479px) {
91  .catch-copy p {
92    margin: 0 auto;
93    padding: 0 0.8em;
94    font-size: 3vw;
95    text-align: center;
96  }
97}
98
99.catch-copy-2 p {
100  margin-top: -120px;
101  font-size: 3vw;
102}
103
104/* スマホ用のCSS */
105@media only screen and (max-width: 479px) {
106  .catch-copy-2 p {
107    margin: 0 auto;
108    padding: 0 0.8em;
109    font-size: 4vw;
110    text-align: center;
111    margin-top: -40px;
112  }
113}
114
115
116

宜しくお願い致します。

Lhankor_Mhy

2020/10/14 02:50

nav の話ですか？

Lhankor_Mhy

2020/10/14 02:51

いや、違うのかな？　ほげほげとかいう文字のことですか？わりといい感じになってると思いますよ。

Larkiwing

2020/10/14 03:43

回答ありがとうございます。そうですね。navが画面幅を小さくした時に重なってしまいますし、ほげほげの部分が画面幅を小さくすると文字の位置がずれてしまっています。 hogehogeとほげほげはパソコン表示だと同じ位置に表示されていますが、スマホ版にするとずれてしまっています。それからハンバーガーメニューもスマホ版にすると中央にきてしまい、デザインが崩れてしまっています。宜しくお願い致します。

Lhankor_Mhy

2020/10/14 04:29

・「navが画面幅を小さくした時に重なる」というのは、再現しなかったです。再現するスクリーンサイズを教えていただけますか？・「位置がずれる」っていうのは、具体的にどういうことかよくわからないですね。詳しく教えてください。・「hogehogeとほげほげがずれる」については、問題を認識しました。・「ハンバーガーメニューもスマホ版にすると中央に」は、再現しなかったです。きちんと左に寄っているように見えました。

Larkiwing

2020/10/14 04:58

・「navが画面幅を小さくした時に重なる」というのは、再現しなかったです。再現するスクリーンサイズを教えていただけますか？画像を添付したのでご覧ください。画面幅を狭くすると横のmarginが無くなり、navの文字が重なってしまっています。・「位置がずれる」っていうのは、具体的にどういうことかよくわからないですね。詳しく教えてください。 ↑これは以下の問題点と同じところの説明でしたので、既に問題を認識していただいています。・「hogehogeとほげほげがずれる」については、問題を認識しました。 ↑同じ・「ハンバーガーメニューもスマホ版にすると中央に」は、再現しなかったです。きちんと左に寄っているように見えました。すみません。こちらは何とか先ほど解決しました。

Lhankor_Mhy

2020/10/14 08:27

>navの文字が重なってしまっています。やはり再現しなかったのですが、これはロゴ画像のサイズがそちらと異なることによるのかもしれませんね。納まりきらないものを納めないように、サイズを計算していくしかないと思います。

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

回答1件

ベストアンサー

vw単位でずらしてはいかがですか？

css
1.catch-copy-2 p {
2/*margin-top: -120px;*/
3  margin-top: -7.2vw;
4  font-size: 3vw;
5}

投稿2020/10/14 08:50

Lhankor_Mhy

総合スコア36960

Larkiwing

2020/10/14 08:59

ウォォォォォーーーーー！！！できました！！！！！！！！ありがとうございます！！！ VWを使ったらnavとロゴのバランスもいい感じになりました！！

Larkiwing

2020/10/14 09:02

ついでにもう一個質問なのですが、 htmlに追加でコードを書き入れると次のブロックではなく画像の上に表示されてしまうのですが、これはどうやったら画像の下の次に表示されるのでしょうか？

Lhankor_Mhy

2020/10/14 09:11

.relative に heightをつけるしかないと思いますが、これまたレスポンシブなサイズをつけるのはなかなか難しいと思います。

Larkiwing

2020/10/14 10:10

回答ありがとうございます。もう一個質問をしてみます。貴重なお時間を頂きましてありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ウィンドウ幅に合わせてマージンをいい感じに可変したい

関連した質問