Q&A
（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
始めて質問させていただきます。
左上にヘッダー画像を挿入したいです。挿入すると画像が大きいのか、ヘッダーのグレーの部分も一緒に上下幅が大きくなってしまったり、画面幅が小さくなっても、ロゴの大きさが小さくならず、デザインが崩れてしまいます。(挿入したいのは幅292px×高さ103pxの長方形ロゴです。今現在は"WORLD VOICE"という文字で代替えしています。)
本格的にhtml、cssを勉強しはじめて2週間ほど経ち、古くなったPCサイトをリニューアルして、レスポンシブ対応にすることを目標にコーディングを進めています。Progateやドットインストールをある程度学習して始めてWeb制作を行っています。レスポンシブ対応ということで念願のヘッダーのハンバーガーメニューをYouTubeの動画を見て作成しました。が、上記に記載したとおり、ロゴで手詰まりとなっております。質問の情報が足りなかったり、逆に無駄なものが多いかもしれませんが、どうぞ、宜しくお願い致します。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
《index.html》
<body> <header> <div class="icon">WORLD VOICE</div> <nav> <ul> <li><a href="#" class="active">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div> </header>
《styles.css》 body { margin: 0; padding: 0; font-family: sans-serif; background: url(../image/bg.jpg); background-attachment: fixed; background-position: center; } header { position: absolute; top: 0; left: 0; padding: 0; background: #5f5f5f; width: 100%; box-sizing: border-box; z-index: 2; } header .icon { color: #fff; line-height: 50px; height: 50px; font-size:24px; float: left; margin-left: 20px; font-weight: bold; } header nav { float: right; } header nav ul { margin: 0; padding: 0; display: flex; } header nav ul li { list-style: none; margin-right: 10px; } header nav ul li a { height: 50px; line-height: 50px; padding: 0 20px; color: #fff; text-decoration: none; display: block; } header nav ul li a:hover, header nav ul li a.active { color: #000; background: #fff; } .menu-toggle { color: #fff; float: right; line-height: 50px; font-size: 24px; cursor: pointer; display: none; } .text { position: absolute; top: 30%; left: 10%; width: 40%; height: 200px; font-family: serif; z-index: 1; color: #fff; } h2 { font-size: 30px; font-weight: bold; text-shadow: 0 0 5px; } h3 { font-size: 20px; } @media (max-width: 769px) { header{ padding: 0 20px; } .menu-toggle { display: block; } header nav.active{ left: 0; } header nav { position: absolute; width: 100%; height: calc(100vh - 50px); background: #5f5f5f; top: 50px; left: -100%; transition: 0.5s; } header nav ul { display: block; text-align: center; } header nav ul a { border-bottom: 1px solid rgba(0, 0, 0, .2); } .text { text-align: center; top: 35%; left: 13%; width: 75%; } h2 { font-size: 25px; } h3 { font-size: 17px; } } .copyright { display: block; color:black; font-size: 10px; text-align: center; }
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
コメントありががとうございます！やってみたのですが、これで合っていますでしょうか？
こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。
改めて修正してみました！いかがでしょうか？
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。
回答1件
0
ベストアンサー
こういうことでしょうか。
CSS
1header .icon img { 2 height: 100%; 3} 4```**動くサンプル：**[https://jsfiddle.net/vhsagzk7/1/](https://jsfiddle.net/vhsagzk7/1/)
投稿2020/05/06 12:40
総合スコア69606
そうです！まさにこのようなイメージをしておりました！
画像を置き換えても上手くいきました！引き続き進めてみます！素早い回答をありがとうございます！
あなたの回答
tips
プレビュー
