Q&A
nav の話ですか？
ウィンドウ幅に合わせてマージンをいい感じに可変したいです。
文字は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
宜しくお願い致します。
いや、違うのかな？ ほげほげとかいう文字のことですか？
わりといい感じになってると思いますよ。
回答ありがとうございます。
そうですね。navが画面幅を小さくした時に重なってしまいますし、ほげほげの部分が画面幅を小さくすると文字の位置がずれてしまっています。
hogehogeとほげほげはパソコン表示だと同じ位置に表示されていますが、
スマホ版にするとずれてしまっています。
それからハンバーガーメニューもスマホ版にすると中央にきてしまい、
デザインが崩れてしまっています。
宜しくお願い致します。
・「navが画面幅を小さくした時に重なる」というのは、再現しなかったです。再現するスクリーンサイズを教えていただけますか？
・「位置がずれる」っていうのは、具体的にどういうことかよくわからないですね。詳しく教えてください。
・「hogehogeとほげほげがずれる」については、問題を認識しました。
・「ハンバーガーメニューもスマホ版にすると中央に」は、再現しなかったです。きちんと左に寄っているように見えました。
・「navが画面幅を小さくした時に重なる」というのは、再現しなかったです。再現するスクリーンサイズを教えていただけますか？
画像を添付したのでご覧ください。画面幅を狭くすると横のmarginが無くなり、navの文字が重なってしまっています。
・「位置がずれる」っていうのは、具体的にどういうことかよくわからないですね。詳しく教えてください。
↑これは以下の問題点と同じところの説明でしたので、既に問題を認識していただいています。
・「hogehogeとほげほげがずれる」については、問題を認識しました。
↑同じ
・「ハンバーガーメニューもスマホ版にすると中央に」は、再現しなかったです。きちんと左に寄っているように見えました。
すみません。こちらは何とか先ほど解決しました。
>navの文字が重なってしまっています。
やはり再現しなかったのですが、これはロゴ画像のサイズがそちらと異なることによるのかもしれませんね。
納まりきらないものを納めないように、サイズを計算していくしかないと思います。
回答1件
0
ベストアンサー
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
総合スコア36115
ウォォォォォーーーーー！！！
できました！！！！！！！！
ありがとうございます！！！
VWを使ったらnavとロゴのバランスもいい感じになりました！！
ついでにもう一個質問なのですが、
htmlに追加でコードを書き入れると次のブロックではなく画像の上に表示されてしまうのですが、
これはどうやったら画像の下の次に表示されるのでしょうか？
.relative に heightをつけるしかないと思いますが、これまたレスポンシブなサイズをつけるのはなかなか難しいと思います。
回答ありがとうございます。
もう一個質問をしてみます。
貴重なお時間を頂きましてありがとうございました。
あなたの回答
tips
プレビュー
