前提・実現したいこと
@mediaでのheight変更を適応させたいです。
発生している問題・エラーメッセージ
htmlにてサイトの模写をしています。
レスポンシブをしたいのですが、@mediaにて高さを指定しても、元の高さのまま変わりません。デペロッパーツールで確認したところ@mediaのheightの部分に打ち消し線が入り適応されてませんでした。
display: none;は適応出来ました。
該当のソースコード
<!DOCTYPE html> <html lang=“ja”> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="stylesheet.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head> <body> <header> <div class="header-wrap"> <div class="header-left"> <ul> <li><a><i class="fab fa-airbnb fa-2x my"></i></a><a></li> <li class="green">基本情報</li> <a href=""><li>準備</li></a> <a href=""><li>安全対策</li></a> <a href=""><li>マネープラン</li></a> </ul> </div> <div class="header-right"> <p class="yosou">予想月収</p> <i class="far fa-question-circle fa-sm"></i> <p class="kinngaku">¥94,175</p> <button class="btn" type="button">はじめる</button> </div> </div> </header> <div class="top-wrap"> <div class="top"> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script> </body> </html>
CSS @media screen and (max-width: 1000px){ header{ display: none; } .top-wrap{ height: 280px; } } body{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; /*フォント種類*/ } html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; } a{ color: inherit; } header{ height: 80px; } .header-wrap{ display: flex; justify-content: space-between; } .header-left{ padding-left: 80px; padding-top: 25px; } .green{ color: green; } .header-left li{ float: left; list-style: none; padding-right: 30px; font-size: 15px; } .header-right{ float: left; padding-top: 20px; padding-right: 100px; } .header-right p,i,button{ display: inline-block; padding-right: 8px; } .btn{ border-radius: 5px; background-color: #DB3742; color: white; font-size: 14px; } .kinngaku{ font-size: 20px; font-weight: bold; } .yosou{ font-size: 13px; } .top-wrap{ height: 585px; background-image: url(fe406606-ff51-4b7f-8095-16f2c720bb03.jpg); background-size: cover; } ード
試したこと
viewportを入れましたが変わりませんでした。
補足情報(FW/ツールのバージョンなど)
宜しくお願いいたします。
回答1件
あなたの回答
tips
プレビュー