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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

539閲覧

ブロックを重ねずに次のブロックに表示させたいです。

Larkiwing

総合スコア120

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/14 10:27

編集2020/10/14 11:02

ブロックを重ねずに次のブロックに表示させたいです
z-indexを使っていたら、次のブロックが前のブロックに重ねて表示されてしまっています
なので次のブロックをヘッダー画像の下にレスポンシブ対応しつつレイアウトしたいです

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

html

1 <!-- Portfolioこちらを最後の</div>の後に入れる--> 2 <div id="portfolio"> 3 <div class="container-fluid p-0"> 4 <div class="row no-gutters"> 5 <div class="col-lg-6 col-sm-6"> 6 <a class="portfolio-box" href="#"> 7 <img class="img-fluid" src="img/background.jpg" alt="" /> 8 <div class="portfolio-box-caption"> 9 <div class="project-category text-white-50">Category</div> 10 <div class="project-name">Project Name</div> 11 </div> 12 </a> 13 </div> 14 <div class="col-lg-6 col-sm-6"> 15 <a class="portfolio-box" href="#"> 16 <img class="img-fluid" src="img/background.jpg" alt="" /> 17 <div class="portfolio-box-caption"> 18 <div class="project-category text-white-50">Category</div> 19 <div class="project-name">Project Name</div> 20 </div> 21 </a> 22 </div> 23 <div class="col-lg-6 col-sm-6"> 24 <a class="portfolio-box" href="#"> 25 <img class="img-fluid" src="img/background.jpg" alt="" /> 26 <div class="portfolio-box-caption"> 27 <div class="project-category text-white-50">Category</div> 28 <div class="project-name">Project Name</div> 29 </div> 30 </a> 31 </div> 32 <div class="col-lg-6 col-sm-6"> 33 <a class="portfolio-box" href="#"> 34 <img class="img-fluid" src="img/background.jpg" alt="" /> 35 <div class="portfolio-box-caption"> 36 <div class="project-category text-white-50">Category</div> 37 <div class="project-name">Project Name</div> 38 </div> 39 </a> 40 </div> 41 <div class="col-lg-6 col-sm-6"> 42 <a class="portfolio-box" href="#"> 43 <img class="img-fluid" src="img/background.jpg" alt="" /> 44 <div class="portfolio-box-caption"> 45 <div class="project-category text-white-50">Category</div> 46 <div class="project-name">Project Name</div> 47 </div> 48 </a> 49 </div> 50 <div class="col-lg-6 col-sm-6"> 51 <a class="portfolio-box" href="#"> 52 <img class="img-fluid" src="img/background.jpg" alt="" /> 53 <div class="portfolio-box-caption p-3"> 54 <div class="project-category text-white-50">Category</div> 55 <div class="project-name">Project Name</div> 56 </div> 57 </a> 58 </div> 59 </div> 60 </div> 61 </div>

CSS

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

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

.cover-imgposition: absolute;に設定しているため通常フローから外れて親要素からはないものとして扱われます。
.cover-imgに高さを設定してますが、親要素からは見えないので親要素の高さが0になってます。

高さを親要素に絶対値で設定して、.cover-imgheight=100%;と相対値で設定すればいいかと思います。

現状は.cover-imgの高さをメディアクエリで段階的に変化させてますので、それを親要素の.container-fluidに変更すればいいでしょう。


ヘッダーブロックnav.navvarと次の背景画像のブロックdiv.container-fluidをdivで囲んで cover-img-wrapperクラスを設定して、

html

1 <div class="cover-img-wrapper"> 2 <nav class="navbar navbar-expand-lg navbar-light pt-4 pb-4"> 3 <!-- 中略 --> 4 </nav> 5 <div class="container-fluid"> 6 <!-- 中略 --> 7 </div> 8 </div> 9 <!-- Portfolioこちらを最後の</div>の後に入れる--> 10 <div id="portfolio"> 11 <!-- 後略 -->

CSSは下記で。

css

1.cover-img { 2 height: 100%; 3 display: table; 4 width: 100%; 5 background-size: cover; 6 position: absolute; 7 top: 0; 8 left: 0; 9} 10.cover-img-wrapper { 11 height: 600px; 12 position: relative; 13} 14 15/* ワイドスクリーン用のCSS */ 16 17@media only screen and (min-width: 1500px) { 18 .cover-img-wrapper { /* 修正 */ 19 height: 1200px; 20 } 21} 22 23/* タブレット用のCSS */ 24 25@media only screen and (min-width: 768px) and (max-width: 1200px) { 26 .cover-img-wrapper { /* 修正 */ 27 height: 500px; 28 } 29} 30 31/* スマホ用のCSS */ 32 33@media only screen and (max-width: 479px) { 34 .cover-img-wrapper { 35 height: 300px; 36 } 37}

投稿2020/10/15 03:06

編集2020/10/15 06:56
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Larkiwing

2020/10/15 05:51

回答ありがとうございます。 解決できました。 ですが、今度はヘッダー画像がnavの下に位置してしまって、重ねて表示させることが できなくなってしまいました。z-indexを使いつつコードをいじっていますが、うまくいきません。 回答がございましたら、宜しくお願い致します。
hatena19

2020/10/15 06:19 編集

ヘッダー(nav.navbar) と 次の .container-fluid をdivで囲んで、そこに cover-img-wrapperクラスを設定するようにすればいいでしょう。 回答も修正しました。
Larkiwing

2020/10/15 06:54

回答ありがとうございます。 やりたいことができるようになりました!!('◇')ゞ
guest

0

難しいです。

一応、下記のような感じでそれっぽくはなりますが、navの高さを成り行きにできないです。
構造を見直した方がいいかもしれません。

css

1nav{ 2 height: 20vh; 3 box-sizing: border-box; 4} 5.cover-img { 6 height: 100vh; 7} 8.relative{ 9 height: 80vh; 10}

投稿2020/10/15 01:23

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Larkiwing

2020/10/15 02:46

回答ありがとうございます。 そうですよね。これはちょっとキツイかもです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問