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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

HTML/CSSでヘッダーの画像が縮小できない

XinCii
XinCii

総合スコア33

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

216閲覧

投稿2022/06/04 17:49

編集2022/06/05 07:30

ホームページで、JavaScriptを用いてナビゲーションメニューを伴うヘッダーを作っていたのですが、ヘッダー画像がうまく縮小できません。
指定先を書き換えてみても全く変化がなく困っています。ご教授いただけますと幸いです。

以下のHTMLのclass="header-logo"のsample.pngという画像です。

該当箇所には<!!問題箇所ここから!!><!!問題箇所ここまで!!>というように目印を打っています。

HTML5

<!DOCTYPE html> <html> <head> <title>タイトル</title> <meta charset="utf-8"> <meta name="description" content="概要入力欄。"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script> (function(d) { var config = { kitId: 'grk5msi', scriptTimeout: 3000, async: true }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document); </script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> </head> <body> <!-- header start --> <header class="header"> <div class="container"> <div class="header-main"> <!!問題箇所ここから!!> <a class="header-logo" href="./index.html"> <img src="./img/sample.png" alt="sample"> </a> <!!問題箇所ここまで!!> <div class="open-nav-menu"> <span></span> </div> <div class="menu-overlay"> </div> <!-- navigation menu start --> <nav class="nav-menu"> <div class="close-nav-menu"> <img src="img/close.svg" alt="close"> </div> <ul class="menu"> <li class="menu-item menu-item-has-children"> <a href="#" data-toggle="sub-menu">menu<i class="plus"></i></a> <ul class="sub-menu"> <li class="menu-item"><a href="#">menu1</a></li> <li class="menu-item"><a href="#">menu2</a></li> <li class="menu-item"><a href="#">menu3</a></li> <li class="menu-item"><a href="#">menu4</a></li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#" data-toggle="sub-menu">event<i class="plus"></i></a> <ul class="sub-menu"> <li class="menu-item"><a href="#">event1</a></li> <li class="menu-item"><a href="#">event2</a></li> <li class="menu-item"><a href="#">event3</a></li> <li class="menu-item"><a href="#">event4</a></li> </ul> </li> <li class="menu-item"> <a href="#">Services</a> </li> <li class="menu-item menu-item-has-children"> <a href="#" data-toggle="sub-menu">Pages <i class="plus"></i></a> <ul class="sub-menu"> <li class="menu-item"><a href="#">page 1</a></li> <li class="menu-item"><a href="#">page 2</a></li> <li class="menu-item"><a href="#">page 3</a></li> <li class="menu-item"><a href="#">page 4</a></li> </ul> </li> <li class="menu-item"> <a href="#">Sponsor</a> </li> <li class="menu-item"> <a href="#">Access</a> </li> <li class="menu-item"> <a href="#">Contact</a> </li> </ul> </nav> <!-- navigation menu end --> </div> </div> </header> <!-- header end --> <!-- home section start --> <section class="home-section"> </section> <!-- home section end --> <script src="js/script.js"></script> </body> </html>

CSS3

body{ line-height: 1.5; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; } body.hidden-scrolling{ overflow-y: hidden; } *{ margin:0; box-sizing: border-box; } .container{ max-width: 1170px; margin:auto; } ul{ list-style: none; margin:0; padding:0; } a{ text-decoration: none; } /*header*/ .header{ position: absolute; width: 100%; left:0; top:0; z-index: 99; padding: 15px; } .header-main{ background-color: #115e32; display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-radius: 4px; } <!!問題箇所ここから!!> .header-logo { display: block; width: 5px !important; } <!!問題箇所ここまで!!> .header .nav-menu{ padding: 0 15px; } .header .menu > .menu-item{ display: inline-block; margin-left: 30px; position: relative; } .header .menu > .menu-item > a{ display: block; padding: 12px 0; font-size: 16px; color: #ffffff; text-transform: capitalize; font-weight: 600; transition: all 0.3s ease; } .header .menu > .menu-item > a .plus{ display: inline-block; height: 12px; width: 12px; position: relative; margin-left:5px; pointer-events: none; } .header .menu > .menu-item > a .plus:before, .header .menu > .menu-item > a .plus:after{ content:''; position: absolute; box-sizing: border-box; left: 50%; top:50%; background-color: #ffffff; height: 2px; width: 100%; transform: translate(-50%,-50%); transition: all 0.3s ease; } .header .menu > .menu-item:hover > a .plus:before, .header .menu > .menu-item:hover > a .plus:after{ background-color: #ff4e20; } .header .menu > .menu-item > a .plus:after{ transform: translate(-50%,-50%) rotate(-90deg); } .header .menu > .menu-item > .sub-menu > .menu-item > a:hover, .header .menu > .menu-item:hover > a{ color: #ff4e20; } .header .menu > .menu-item > .sub-menu{ box-shadow: 0 0 10px rgba(0,0,0,0.2); width: 220px; position: absolute; left:0; top:100%; background-color: #ffffff; padding: 10px 0; border-top: 3px solid #ff4e20; transform: translateY(10px); transition: all 0.3s ease; opacity:0; visibility: hidden; } @media(min-width: 992px){ .header .menu > .menu-item-has-children:hover > .sub-menu{ transform: translateY(0); opacity: 1; visibility: visible; } .header .menu > .menu-item-has-children:hover > a .plus:after{ transform: translate(-50%,-50%) rotate(0deg); } } .header .menu > .menu-item > .sub-menu > .menu-item{ display: block; } .header .menu > .menu-item > .sub-menu > .menu-item > a{ display: block; padding: 10px 20px; font-size: 16px; font-weight: 600; color: #000000; transition: all 0.3s ease; text-transform: capitalize; } .header .open-nav-menu{ height: 34px; width: 40px; margin-right: 15px; display: none; align-items: center; justify-content: center; cursor: pointer; } .header .open-nav-menu span{ display: block; height: 3px; width: 24px; background-color: #000000; position: relative; } .header .open-nav-menu span:before, .header .open-nav-menu span:after{ content: ''; position: absolute; left:0; width: 100%; height: 100%; background-color: #000000; box-sizing: border-box; } .header .open-nav-menu span:before{ top:-7px; } .header .open-nav-menu span:after{ top:7px; } .header .close-nav-menu{ height: 40px; width: 40px; background-color: #ffffff; margin:0 0 15px 15px; cursor: pointer; display: none; align-items: center; justify-content: center; } .header .close-nav-menu img{ width: 16px; } .header .menu-overlay{ position: fixed; z-index: 999; background-color: rgba(0,0,0,0.5); left:0; top:0; height: 100%; width: 100%; visibility: hidden; opacity:0; transition: all 0.3s ease; } /*home section*/ .home-section{ width: 100%; display: block; min-height: 100vh; background-image: url('../img/home.jpg'); background-position: center top; background-size: cover; } /* responsive */ @media(max-width: 991px){ .header .menu-overlay.active{ visibility: visible; opacity: 1; } .header .nav-menu{ position: fixed; right: -280px; visibility: hidden; width: 280px; height: 100%; top:0; overflow-y: auto; background-color: #222222; z-index: 1000; padding: 15px 0; transition: all 0.5s ease; } .header .nav-menu.open{ visibility: visible; right: 0px; } .header .menu > .menu-item{ display: block; margin:0; } .header .menu > .menu-item-has-children > a{ display: flex; justify-content: space-between; align-items: center; } .header .menu > .menu-item > a{ color: #ffffff; padding: 12px 15px; border-bottom: 1px solid #333333; } .header .menu > .menu-item:first-child > a{ border-top: 1px solid #333333; } .header .menu > .menu-item > a .plus:before, .header .menu > .menu-item > a .plus:after{ background-color: #ffffff; } .header .menu > .menu-item-has-children.active > a .plus:after{ transform: translate(-50%,-50%) rotate(0deg); } .header .menu > .menu-item > .sub-menu{ width: 100%; position: relative; opacity: 1; visibility: visible; border:none; background-color: transparent; box-shadow: none; transform: translateY(0px); padding: 0px; left: auto; top:auto; max-height: 0; overflow: hidden; } .header .menu > .menu-item > .sub-menu > .menu-item > a{ padding: 12px 45px; color: #ffffff; border-bottom: 1px solid #333333; } .header .close-nav-menu, .header .open-nav-menu{ display: flex; } }

JavaScriptに関しては問題ないので文字数の制限上省略します。不十分な説明で申し訳ありませんが回答いただけますと幸いです。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。