• 締切済み

ホームページ作成について質問です

ホームページ制作について質問です。 http://siterepair.ddo.jp/ のグローバルナビゲーションのように、ソース上ではテキストだが、ブラウザ上では画像アイコンのボタンにする方法が知りたいです。 私のホームページのグローバルナビゲーションのソースです ※html <div id=mainImage> <ul> <li><a href="A"><img src="../images/gnavi01.png" alt="あいうえお" width="100" height="25" /></a></li> <li><a href="B">"><img src="../images/gnavi02.png" alt="かきくけこ" width="100"height="25" /></a></li> <li><a href="C">"><img src="../images/gnavi03.png" alt="さしすせそ"width="100"height="25" /></a></li> </ul> </div> ※css #mainImage{ height: 250px; width: 900px; margin-right: auto; margin-left: auto; background-image: url(../images/header.png); background-repeat: no-repeat; padding-top: 1px; } #mainImage ul { margin-left: 362px; margin-top: 233px; } #mainImage li { float: left; } 試しに、 <a herf="A" class="home">として、 .home { display: none background-image: url(../images/gnavi01.png); } のように設定したら、gnavi01.pngも一緒に消えてしまいmainImageの背景に設定した画像が表示されているだけになってしまいます。 http://siterepair.ddo.jp/ のグローバルナビゲーションのように、 <ul id="globalmenu" class="clearfix"> <li><a class="home" href="./">SEO無料</a></li> <li><a class="seoexamine" href="seoexamine/">SEO診断ツール</a></li> <li><a class="seotools" href="seotools/">SEO対策サービス</a></li> <li><a class="seoplan" href="fixedseo/">SEOプラン</a></li> <li><a class="seminar" href="seminar/">SEO対策セミナー</a></li> <li><a class="faq" href="faq/">よくある質問</a></li> <li><a class="inquiry" href="inquiry/">お問い合わせ</a></li> </ul> alt属性による説明文ではなく、テキストでの入力をしたいのですが、無知なもので色々調べましたが出来ません。 ご教授頂けるよう宜しくお願いします。（dreamweaver cs4を使って作成しています） .

  • HTML
  • 回答数2
  • ありがとう数4

みんなの回答

  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.2

本質的に#1さんの回答と一緒ではありますが・・・ 基本的な考えはmdetectiveさんがなさっていることとあまりかわりないです。 ただ、参考サイトとmdetectiveさんの違いは、 ・参考サイト→背景画像が、実際に表示したい画像 ・mdetectiveさん→実際に表示したい画像は、imgタグで貼付け となってます。 まず、a要素のスタイルでdisplayをblockにします。 その後、widthとheight、floatを設定します。 こうすることでa要素が幅と高さがあるブロックとなります。 このままだと、入力文字が表示されるのでtext-indentを-9999等に設定して、画面外に表示します。 表示している画像は、それぞれのa要素にclassを指定し、背景として設定します。 Ex) <style> .SampleCode a{ display:block; width:200px; height:100px; text-indent:-9999px; float:left; } .SampleCode .link1{ background-image:url("./foo/bar1.jpg") no-repeat center center; } .SampleCode .link1{ background-image:url("./foo/bar2.jpg") no-repeat center center; } </style> <body> <div class="SampleCode"> <a class="linl1">テスト1</a> <a class="linl2">テスト2</a> </div> </body> マウスオーバー等をしたい場合、a:hover等で実装します。

  • mtaka2
  • ベストアンサー率73% (867/1179)
回答No.1

簡単な方法としては、スタイルシートで、 .home { text-indent: -9999px; background-image: url(../images/gnavi01.png); } とかすれば、テキストをなくして画像だけを表示できます。 そのほか、各種方法とそのメリットデメリットは、 http://kikky.net/pc/css_ir1.html の説明なかがわかりやすいかと思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • ホームページ作成について質問です。

    ホームページ制作について質問です。 http://siterepair.ddo.jp/ のグローバルナビゲーションのように、ソース上ではテキストだが、ブラウザ上では画像アイコンのボタンにする方法が知りたいです。 私のホームページのグローバルナビゲーションのソースです ※html <div id=mainImage> <ul> <li><a href="A"><img src="../images/gnavi01.png" alt="あいうえお" width="100" height="25" /></a></li> <li><a href="B">"><img src="../images/gnavi02.png" alt="かきくけこ" width="100"height="25" /></a></li> <li><a href="C">"><img src="../images/gnavi03.png" alt="さしすせそ"width="100"height="25" /></a></li> </ul> </div> ※css #mainImage{ height: 250px; width: 900px; margin-right: auto; margin-left: auto; background-image: url(../images/header.png); background-repeat: no-repeat; padding-top: 1px; } #mainImage ul { margin-left: 362px; margin-top: 233px; } #mainImage li { float: left; } 試しに、 <a herf="A" class="home">として、 .home { display: none background-image: url(../images/gnavi01.png); } のように設定したら、gnavi01.pngも一緒に消えてしまいmainImageの背景に設定した画像が表示されているだけになってしまいます。 http://siterepair.ddo.jp/ のグローバルナビゲーションのように、 <ul id="globalmenu" class="clearfix"> <li><a class="home" href="./">SEO無料</a></li> <li><a class="seoexamine" href="seoexamine/">SEO診断ツール</a></li> <li><a class="seotools" href="seotools/">SEO対策サービス</a></li> <li><a class="seoplan" href="fixedseo/">SEOプラン</a></li> <li><a class="seminar" href="seminar/">SEO対策セミナー</a></li> <li><a class="faq" href="faq/">よくある質問</a></li> <li><a class="inquiry" href="inquiry/">お問い合わせ</a></li> </ul> alt属性による説明文ではなく、テキストでの入力をしたいのですが、無知なもので色々調べましたが出来ません。 ご教授頂けるよう宜しくお願いします。（dreamweaver cs4を使って作成しています） .

  • IE7で表示すると画像に隙間があきます。

    WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }

    • ベストアンサー
    • HTML
  • cssスプライト　positionが効かない

    現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？ どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }

    • ベストアンサー
    • CSS
  • FireFoxで確認するとliがずれます

    webページを作成していてリスト部分が下にずれてしまうのに困っています。 添付図のようにIEで見るとちゃんと置きたい位置に収まってくれるのですが、 firefoxでは収まってくれません。 ご教授頂けたら幸いです。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> スタイルシート #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } 素人作成のため乱雑の作成内容で恐縮ですが、 アドバイス頂けると幸いです。

    • ベストアンサー
    • HTML
  • IEでは指定の位置に配置してくれません

    添付図のようにしたいのですが、 IEでは右に空白ができてしまい配置したいところに配置できません。 図のFireFox確認時の方が配置したい位置に配置できている正です。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> CSS /* レイアウト設定ここから */ #pageBody { width: 740px; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: auto; } #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #topFlContens { width: 740px; height: 320px; margin: 0px; padding: 0px; } #box { width: 740px; height: 550px; margin-top: 20px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding: 0px; } /* レイアウト設定ここまで */ #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi ul { margin: 0px; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } Web初心者のため、アドバイス頂けると幸いです。

    • ベストアンサー
    • HTML
  • 幅違うメニュー（リスト）、floatで横並びで背景画像でテキスト飛ばしたいが・・

    お世話になります。 メニュー（リスト）のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。 マウスオーバーすると、画像がかわるようにしたいです。 どうか、何が問題なのか、教えてくださいませ。 ★メニューのwidthは、全てちがいます。 ★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。 　マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。 ★リストは、横並びにしたい。 【HTML】 <div id="gNavi"> <ul> <li id="01"><a href="#">メニュー１</a></li> <li id="02"><a href="#">メニュ－２</a></li> <li id="03"><a href="#">メニュ－３</a></li> <li id="04"><a href="#">メニュ－４</a></li> <li id="05"><a href="#">メニュ－５</a></li> <li id="06"><a href="#">メニュ－６</a></li> </ul> </div> 【CSS】 #gNavi { width:513px; height:14px; } #gNavi ul{ list-style: none; margin: 0; padding: 0; height: 14px; overflow: hidden; } #gNavi li { float:left; margin:0; padding:0; } #gNavi li a{ display:block; height:100%; width: 100%; height: 0 !important; height /**/: 14px; background:url(../images/gNavi/gNav.gif) no-repeat; text-decoration:none; text-indent:-7777px; } #gNavi li a:hover{ background:url(../images/gNavi/gNav_ov.gif) no-repeat; } #gNavi li#01 a{ background-position: 0 0; width: 52px; } #gNavi li#02 a{ background-position: -52px 0; width: 71px;} #gNavi li#03 a{ background-position: -123px 0; width: 105px;} #gNavi li#04 a{ background-position: -228px 0; width: 93px;} #gNavi li#05 a{ background-position: -321px 0; width: 93px;} #gNavi li#06 a{ background-position: -414px 0; width: 99px;} #gNavi li#01 a:hover { background-position: 0 0;} #gNavi li#02 a:hover { background-position: -52px 0;} #gNavi li#03 a:hover { background-position: -123px 0;} #gNavi li#04 a:hover { background-position: -228px 0;} #gNavi li#05 a:hover { background-position: -321px 0;} #gNavi li#06 a:hover { background-position: -414px 0;} （何か、他に必要な情報があれば、言ってください！）

    • ベストアンサー
    • CSS
  • HPの作成について質問です。cssを用いてある画像にカーソルを合わせる

    HPの作成について質問です。cssを用いてある画像にカーソルを合わせると、別の画像が現れるという効果をつけたいと思っています。下記のような(該当部分と思われるところ)htmlとcssを作成したのですが、画像の１の部分だけがカーソルにあわせた画像が繰り返された画像となります。また画像の２の部分が画像にカーソルを合わせるとなぜか消えてしまいます。アドバイスお願いします。 ＊HTML <div id="naraberu"> <ul> <li class="Qone-one"><a href="kikimashita1.html"></a></li> （省略） <li class="Qone-twelve"><a href="kikimashita1.html"></a></li> <li class="Qone-thirteen"><a href="kikimashita1.html"></a></li> <li class="Qone-fourteen"><a href="kikimashita1.html"></a></li> <li class="Qone-fiveteen"><a href="kikimashita1.html"></a></li> <li class="Qone-sixteen"><a href="kikimashita1.html"></a></li> <li class="Qone-seventeen"><a href="kikimashita1.html"></a></li> <li class="Qone-eighteen"><a href="kikimashita1.html"></a></li> <li class="Qone-nineteen"><a href="kikimashita1.html"></a></li> <li class="Qone-twenty"><a href="kikimashita1.html"></a></li> <li class="Qone-twentyone"><a href="kikimashita1.html"></a></li> </ul> <!--end div#naraberu--> </div> *CSS #naraberu { position: relative; margin-top: 10px; margin-left: 20px; width: 400px; height: 1000px; } #naraberu a{ display:block; width:64px; height:79px; } #naraberu a:hover{ position: absolute; left: 380px; top: 90px; display:block; width:210px; height:278px; } (省略) .Qone-fourteen a { background-image: url(../images/card_moto.png); } .Qone-fourteen a:hover { background-image: url(../images/card_example.png); } .Qone-fiveteen a { background-image: url(../images/card_moto.png); } .Qone-fiveteen a:hover { background-image: url(../images/card_example.png); } .Qone-sixteen a { background-image: url(../images/card_moto.png); } .Qone-sixtten a:hover { background-image: url(../images/card_example.png); } (省略) .Qone-nineteen a { background-image: url(../images/card_moto.png); } .Qone-nineteen a:hover { background-image: url(../images/card_example.png); } .Qone-twenty a { background-image: url(../images/card_moto.png); } .Qone-twentyone a:hover { background-image: url(../images/card_example.png); }

    • ベストアンサー
    • HTML
  • CSSで画像を横並びに

    CSSで画像を3枚横並びにしたいのですが、 IEで見ると右肩下がりになってしまいます。 詳しくないので、教えていただけると幸いです。 ◆html <ul> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgl30 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgt10"></a></li> </ul> ◆css .fleft { float:left } .mgr42{ margin-right:42px } .mgl30{ margin-left:30px } .mgt10{ margin-top:10px }

    • ベストアンサー
    • CSS
  • CSSのみで作る横ドロップダウンメニュー

    教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> 　</div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }

  • CSSの「a」と「a:link」の違いを教えてください。

    CSSでリストを横に並べて、グローバルナビゲーションを作っているのですが、aとa:linkの違いがわかりません。 例えばHTMLは以下のように <div id="gNavi"> <ul> <li><a href="../omotenashi.html">おもてなし</a></li> <li><a href="../stay.html">過ごし方</a></li> <li><a href="../rooms.html">客室</a></li> <li><a href="../facilities.html">館内施設</a></li> <li><a href="../dish.html">料理</a></li> <li class="last"><a href="../onsen.html">温泉</a></li> </ul> </div> CSSは #gNavi { height: 60px; width: 960px; margin-right: auto; margin-left: auto; } #gNavi ul { text-align: center; } #gNavi ul li { display: inline; border-right-width: 1px; border-right-style: solid; border-right-color: #FFF; width: 159px; float: left; } #gNavi ul li.last { border-right-style: none; } #gNavi ul li a { background-color: #F00; width: 159px; float: left; } #gNavi ul li a:hover { background-color: #09F; color: #FFF; width: 159px; float: left; } という風に書きますが（間違っているかもしれません。）、#gNavi ul li aを#gNavi ul li a:linkと書いてはいけないのでしょうか？ aとa:linkの違いはなんですか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する