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

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

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

解決済

marginを指定した要素と別な要素が連動してしまう

suzu1234
suzu1234

総合スコア22

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

1回答

0評価

0クリップ

143閲覧

投稿2022/06/25 11:26

編集2022/06/25 21:41

mainタグの中に「main-visual」と「reason」というdivを入れているのですが、main-visualにpositionを指定しているため、main-visualが浮いた状態になってしまっています。

ネットで調べたところmarginを指定すればいいということはわかったのですが、main-visualの下にあるreasonにmargin-topを指定しても、main-visualが連動してしまってうまくmargin-topが効きません。

なぜmain-visualが連動してしまっているのか原因が分からないため質問させていただきました。ご回答いただけますと幸いです。

  <header> <h1><a href="#"><img src="https://code-step.com/demo/html/lp/img/logo-r.svg" alt=""></a></h1> <div class="navArea"> <a href="#"><img class="reversi-image" src="https://code-step.com/demo/html/lp/img/logo-w.svg" alt=""></a> <div class="toggle-btn"> <span></span> <span></span> <span></span> </div> <div id="mask"></div> <!-- maskなしで#navを100vh、100vwで全面に表示し、position fixedを設定する!--> <div id="nav"> <nav> <ul> <li><a href="#">BBBが選ばれる理由</a></li> <li><a href="#">受講生の声</a></li> <li><a href="#">スクールの概要</a></li> </ul> </nav> <a class="link-box" href="#">無料体験に申し込む</a> </div> </div> </header> <main> <div class="main-visual"> <ul> <li><img src="img/image1.jpg" alt=""></li> <li><img src="img/image2.jpg" alt=""></li> <li><img src="img/image3.jpg" alt=""></li> </ul> <div class="text-contents"> <h2>話して学ぼう!<br/>BBB英会話スクール</h2> <a href="#">無料体験はこちら</a> </div> </div> <div class="reason"> <h2>BBSが選ばれる理由</h2> </div> </main>
html { font-size: 100%; } img { max-width: 100%; width: 100%; } * { box-sizing: border-box; outline: 1px solid magenta; } body { margin: 0; padding: 0; } ul { padding-left: 0; } li { list-style: none; } a { color: #ffffff; text-decoration: none; } /*----------------------------------------------------------------------------*/ header { height: 100px; display: flex; justify-content: space-between; padding: 20px 50px; } header h1 { width: 100px; line-height: 1px; z-index: 10; } header h1 a { display: block; } .reversi-image { width: 100px; opacity: 0; position: absolute; top: 41px; left: 50px; transition: all 0.5s ease 0.1s; } .open .reversi-image { opacity: 10; z-index: 11; } .toggle-btn { width: 100px; height: 100px; position: fixed; top: 0; right: 0; background-color: #FF3333; z-index: 10; cursor: pointer; transition: all 0.4s ease 0.1s } .toggle-btn:hover { opacity: 0.8; } .toggle-btn span { display: block; width: 50px; height: 2px; background-color: #FFFFFF; position: absolute; left: 25px; transition: all 0.3s ease 0.1s } .toggle-btn span:nth-child(1) { top: 35px; } .toggle-btn span:nth-child(2) { top: 50px; } .toggle-btn span:nth-child(3) { bottom: 35px; } .open .toggle-btn span:nth-child(1) { transform: translateY(15px) rotate(-45deg); } .open .toggle-btn span:nth-child(2) { opacity: 0; } .open .toggle-btn span:nth-child(3) { transform: translateY(-15px) rotate(45deg); } #nav { opacity: 0; display: none; z-index: 10; width: 100%; position: fixed; top: 65px; left: 0px; font-family: "游ゴシック"; letter-spacing: 1.5px; font-weight: bold; text-align: center; transition: all 0.5s ease 0.1s; } .open #nav { opacity: 1; display: block; } #nav li { color: blue; margin-bottom: 20px; font-size: 16px; opacity: 0; transition: all 0.5s ease 0.1s; } .open #nav li { opacity: 1; } .link-box { margin-top: 20px; display: inline-block; padding: 15px 45px; border: 1px solid #ffffff; position: relative; transition: all 0.4s ease 0.1s } .link-box:hover { background-color: #ffffff; color: #FF3333; } .link-box::after { content: ""; width: 250px; height: 55px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; position: absolute; bottom: -5px; left: 1px; } #mask { visibility: hidden; opacity: 0; z-index: 1; background-color: #FF3333; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; transition: all 0.2s ease 0.1s; } .open #mask { opacity: 1; visibility: visible; } /*----------------------------------------------------------------------------*/ .main-visual { position: relative; } .main-visual ul li { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; animation: slide 15s infinite; } .main-visual ul li::after { position: absolute; content: ''; top: 0; bottom: 0; left: 0; right: 0; box-shadow: inset 0 0 10px 15px #FFF; } .main-visual img { width: 100%; height: 100vh; object-fit: cover; } .main-visual ul li:nth-child(1) { animation-delay: 0s; } .main-visual ul li:nth-child(2) { animation-delay: 5s; } .main-visual ul li:nth-child(3) { animation-delay: 10s; } @keyframes slide { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } } .text-contents { position: absolute; top: 230px; left: 150px; font-family: "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; } .text-contents h2 { font-size: 46px; text-shadow: 2px 2px 5px #FFFFFF; margin-bottom: 25px; } .text-contents a { display: block; width: 435px; background-color: #FF3333; text-align: center; padding: 15px 0; border-radius: 10px; font-size: 25px; box-shadow: 0px 5px 0px 0px #993300; position: relative; transition-duration: 0.3s; } .text-contents a::after { content: ""; height: 13px; width: 13px; color: white; /* display: block; */ border-top: solid 3px #FFFFFF; border-right: solid 3px #FFFFFF; transform: rotate(45deg); position: absolute; top: 27px; left: 387px; } .text-contents a:hover { transform: scale(1.05); opacity: 0.95; } /*----------------------------------------------------------------------------*/ .reason { margin-top: 810px; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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