締切済み

サイト制作の際のメニューバーのロゴについて

2015/07/08 01:22

サイト制作でのメニューバー及び、ナビゲーションバーについて。とある事情により、サイトを制作していてこのサイト(http://www.maroon5.com/home)のような、メニューバーにしたいと思い自分で作ってみたところ、ロゴの画像が左上で小さくなってしまい困っています。どなたか、親切な方アドバイスの方よろしくお願いします。ソースコードは以下の通りになってます。 ------HTML------------ <!DOCTYPE html> <html> <head> <meta > <head> <meta content="text/html" charset="utf-8"> <title>練習</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body>  <div id="wrapper">  <div id="menu"> <a href="intro"><img src="image/logo1.png" class="logo" /></a> <div align="center"> <ul> <li><a href="index.html">NEWS</a></li> <li><a href="ntroduction.html">BIOGRAPHY</a></li> <li><a href="story.html">DISCOGRAPHY</a></li> <li><a href="cast.html">SPECIAL</a></li </ul> </div> <div align="right"> <a href="https://www.facebook.com/falloutboy" target="_blank"><img src="image/icon/facebook.png" class="icon" /></a> <a href="https://twitter.com/falloutboy" target="_blank"><img src="image/icon/twitter.png" class="icon" /></a> <a href="https://www.youtube.com/falloutboy/about" target="_blank"><img src="image/icon/youtube.png" class="icon" /></a> </div> </div>  <div id="main_image"> <img src="メインビジュアル画像" alt="Main Image" /> </div> </header> </div> </body> </html> -----CSS--------- @charset "UTF-8"; body{ margin:0; color: #FFFFFF; font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif; font-size:13px; } /*　外枠　*/ #wrapper{ width: 100% margin: 0; padding: 0; } /* メニューバー */ #menu{ margin-top:0; width: 100%; height: 50px; position: fixed; top:0; background-color: rgba(0,0,0,0.8); z-index: 1; } #menu ul{ list-style-type: none; width: 50%; margin:0; padding:0; } #menu li{ padding-top: 13px; color: #FFFFFF; font-family:'Ubuntu','Arial',cursive; font-size: 18px; width: 25%; text-align:center; float: left; } a:link{ color:rgba(255,255,255,0.8); text-decoration:none; } a:hover{ color:#FFFFFF; text-decoration:none; } a:visited{ color:rgba(255,255,255,0.8); text-decoration: none; } img.logo{ width:20px; height: auto; position:fixed; top: 0px; left:15px; z-index:0; } /*アイコン*/ img.icon{ width: 20px; height: 20px; margin-right: 10px; padding-top: 15px; } img.icon:hover{ opacity: 0.5; }

chaahaan
お礼率0% (0/1)

みんなの回答 （1）
専門家の回答

みんなの回答

gummygummybear
ベストアンサー率49% (54/110)

2015/07/08 15:17 回答No.1

こんにちは。ロゴ画像というのは <img src="image/logo1.png" class="logo" /> のことですよね？スタイルシートを見ると、 img.logo{ width: 20px; （中略） } という記述があるので、ここの幅指定の数値を大きくすれば表示も大きくなるのではないでしょうか。