メニュー部分の画像をスタイルシートで置換する方法
- CSS初心者の方へ、メニュー部分の画像をスタイルシートを使用して置換する方法について説明します。
- メニュー部分の画像をスタイルシートで置換することにより、同じ画像を複数のページで使う際に便利です。
- 具体的には、スタイルシート内で背景画像を設定し、HTMLの要素に対してそのスタイルを適用する方法を使用します。
- ベストアンサー
メニュー部分をスタイルシートで画像置換するには？
お世話になります。 CSS初心者でまだまだわからないことが多いので質問させてください。 現在作成しているサイトに当然ですがメニュー部分があるのですが、普通にDreamweaverでボタン等を作成して配置していました。それでちょっと詳しい方に見てもらった時に「メニューのところ、全部のページ同じやつを使ってるけど、そういった部分はスタイルシートで画像置換使うか、ジャバスクリプトで入れ替えするなら、その部分だけ外部ファイル化して全ページ同じものを読み込ますとかしたほうがいいと思う。ちょっとした修正を前ページやるのは大変だから。」という指摘を受けました。なるほど、確かにそうだ、と思ったのですが、そういったことはどうやるのか全く分かりません、どなたか教えてくださらないでしょうか？ちなみに各コンテンツはdiv分けしてあり、ボタン部分はdiv#containerと（div#contensの中の）div#leftmenuというところです。この部分を修正する時、一度だけ修正すれば、全ページ対応する方法を知りたいです。どうかよろしくお願いします。 <div id="header"> 省略。FLASH画像がきます </div> <div id="container"> <img src="images/menu01.jpg(altとか省略)> <img src="images/menu02.jpg(altとか省略)> <img src="images/menu03.jpg(altとか省略)> <img src="images/menu04.jpg(altとか省略)> </div> <div id="contens"> <div id="leftmenu"> <img src="images/bottom01.jpg(altとか省略)> <img src="images/bottom02.jpg(altとか省略)> <img src="images/bottom03.jpg(altとか省略)> </div> <div id="centermenu"> 省略 </div> <div id="content-right"> <p class="shousai2"> </p> </div> </div> </div> <div id="footer"> 省略 </div> </div> </body>
- toonie
- お礼率26% (55/210)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは メニューボタンの使い方によってまた作り方が変わってくると思いますけど・・・ 一般的なものとしては [CSS} <head> <link rel="stylesheet" href="****.css" type="text/css"> </head><body> <div id="container"> <a href="" id="menu1">メニュー1</a> <a href="" id="menu2">メニュー2</a> <a href="" id="menu3">メニュー3</a> <a href="" id="menu4">メニュー4</a> </div> ==****.css=== #container a { display:block; width:100px; height:20px; text-indent:-999999px; background-repeat:no-repeat; } #menu1 { background-image:url(images/menu01.jpg); } #menu2 { background-image:url(images/menu02.jpg); } #menu3 { background-image:url(images/menu03.jpg); } #menu4 { background-image:url(images/menu04.jpg); } [Javascript] <head> <script type="text/javascript" src="####.js"></script> </head><body> <div id="container"> <img src="" id="menu0"> <img src="" id="menu1"> <img src="" id="menu2"> <img src="" id="menu3"> </div> ==####.js== window.onload=function() { MENU = new Array("images/menu01.jpg","images/menu02.jpg","images/menu03.jpg","images/menu04.jpg"); for(i=0;i<MENU.length;i++) { menuid = "menu"+i; document.getElementById(menuid).src = MENU[i]; } } のような感じでできると思います ****.cs、####.jsは適当に名前を付けてください
関連するQ&A
- スライド部分のリンクが貼れない・・・
トップページスライダー部分のリンクが貼れなくて困っています。 原因を探しているのですがわかりません・・・解る方教えてください。 スライド部分のHTML <div id="window"> <div id="slider"> <div class="slider-view"> <div class="slider-container"> <div><a href="#"><img src="http://blackartcard.com/slider1/images/sliderimg1.jpg" alt="" /></a></div> <div><a href="#"><img src="http://blackartcard.com/slider1/images/sliderimg2.jpg" alt="" /></a></div> <div><a href="/?p=542"><img src="http://blackartcard.com/slider1/images/sliderimg3.jpg" alt="" /></a></div> </div><!-- // .slider-container --> </div><!-- // .slider-view --> </div> </div>
- ベストアンサー
- CSS
- img画像表示を短くしたい
lemmon-slider-0.2 win8.1 pro 下記 img 45個 記述しています。表示が長いので、短くしたい。500個の場合もあります。 ひまわり美術館 http://esd827.web.fc2.com/himawari/index.html 詳細 IE11 F12開発者ツール 参照 <div id="nav"> <div class="wrap"> <div id="container"> <div class="wrap"> <div id="slider3" class="slider"> <ul> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> ----- cut -------- <li><img src="images/43.jpg" alt=""></li> <li><img src="images/44.jpg" alt=""></li> <li><img src="images/45.jpg" alt=""></li> </ul> </div>
- 締切済み
- JavaScript
- 画像のフェードインについて・・・。
現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- その他([技術者向] コンピューター)
- 画像のフェードインについて・・・。
以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- 締切済み
- JavaScript
- 画像のフェードイン・フェードアウト
現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- JavaScript
- Webページ 画像切替する場合のタグ表記について
初めてWebページ作成する者です。 以下のように記述したTOPページの画像(main.jpg)があります(下記は抜粋)。 ソース(1) <div id="contents"> <div id="main_area"> <p id="main"><img src="img/main.jpg" width="580" alt="" /></p> </div> </div> 現在、JavaScriptを使用して、自動的に画像を切替できるよう修正しています。 切替る画像は、main01.jpg、main02.jpg、main03.jpgの３つで、HTML部でリストを 使用する場合、下記のソース(2)をソース(1)に組み込むには、どのようにすれば 良いでしょうか。 ソース(2) <ul id="xxxxx"> <li> <img src="img/main01.jpg" width="580" alt="" /> </li> <li> <img src="img/main02.jpg" width="580" alt="" /> </li> <li> <img src="img/main03.jpg" width="580" alt="" /> </li> </ul> 周りに質問できる人がおらず、困っています。 申し訳ありませんが、よろしくお願い致します。
- ベストアンサー
- HTML
- <script>記述したらレイアウトに変化が...
お世話になります。どうしても分からないので、また質問させてください。 現在制作中のサイトにthickboxを使って、大きな画像を表示させたいと考えています。 それで、当たり前ですが、thickboxをダウンロードして<head>内に下記のように記述しました。 <link href="css/thickbox.css" rel="stylesheet" type="text/css" media="all"/> <script language="JavaScript" type="text/JavaScript"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> thickbox自体は特に問題なく作動するのですが、ところがおかしなことにレイアウト面で若干変化が生じました。具体的に言うと、 1:div#headerの<h1>見出し分が10pxほど上へ上がった（ウインドウの最上部に表示されるようになった） 2:marginでピクセル指定して配置していたロゴ画像がやはり15pxくらい上へ上がって表示されるようになった。（そもそもロゴ画像がどのブラウザで見ても同じところに表示するように方法が分からなかったので、このように記述したのですが、これは根本的に問題ありかもしれません。） 3:thickboxを使用しているdiv#rightmenuの下に全ページ共通で表示させているdiv#adress-areaという店舗情報を記述する部分があるのですが、そこのmargin-bottom:10px;が適用されていない。他のCSS記述はそのまま生きている。 ちなみにthickboxを使用しているページ以外はこのような現象は見られません。 これはどうしてでしょうか。もしよければアドバイスください。 THML: <body> <div id="header"> <h1>見出し文</h1> <a href="index.html"><img src="images/logo.gif" alt="ロゴマーク" border="0"></a> </div> <div id="contens"> <div id="leftmenu"> 省略 </div> <div id="rightmenu"> <div id="rightbox-inside"> <ul id="resultList"> <li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> <li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> <li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> <li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> <li class="mustright"><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> </ul> </div> <div style="clear:both; "></div> <div id="rightbox-buttom"> <img src="images/rightbox-buttom.jpg" alt="代替テキスト"> </div> </div> <div id="adress-area"> <p class="adress-txt">店舗情報いろいろ</p> </div> <div style="clear:both;"></div> </div> <div id="footer"> 省略 </div> </body> CSS>> body { background-image:url(../images/body.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin:0px; } /* Header部分CSS */ div#header { width:800px; height:150px; margin-left:auto; margin-right:auto; } #header h1 { color:#666666; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:x-small; } #header img { margin:77px 0px 0px 10px; } /* Contens部分CSS */ div#contens { border-bottom:1px dotted #333333; width:800px; min-height:700px; margin-left:auto; margin-right:auto; padding-bottom:10px; } /* Leftmenu部分CSS */ div#leftmenu { width:155px; float:left; } /* rightmenu部分CSS */ #rightmenu { width:645px; float:right; padding-top:20px; background:url(../images/rightbox-top.png) no-repeat; } html#rightmenu{ height: auto !important; height: 800px; } #rightbox-inside { background:url(../images/rightbox-inside.png) repeat-y; } #rightbox-buttom { clear:both; } /* thickboxを使用した表部分CSS */ #resultList { overflow:hidden; margin:0 25px 0 30px; padding:0; list-style-type:none; } #resultList li { float:left; display:inline; width:120px; text-align:center; } #resultList li.mustright { float:right; width:110px; padding-right:none; } #resultList li a { display:block; } #resultList li a img { border:none; } /*店舗情報部分CSS */ div#adress-area { width:620px; float:right; margin:5px 10px 5px 10px; background-color:#E6E6E6; } #adress-area p.adress-txt { width:300px; padding:0 0 0 20px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:12px; letter-spacing:130%; line-height:160%; color:#333; float:left; }
- ベストアンサー
- CSS
- XHTML+CSSによるデザインをしています。
XHTML+CSSによるデザインをしています。 divボックスによる３段組レイアウトをして、左サイドバーの中にdivボックスを、縦に複数設置しようとしたら、２個目のボックスが表示されずメインボックスと右サイドバーが詰まってレイアウトが崩れてしまいました。 コーディングミスをご指摘いただけるのでしたらお願いします。 <div id="wrap"> <div id="header"> <div id="header_top"> <div id="logo"> <img src="image/logo.jpg" alt="" /> </div><!-- /logo --> <div id="header_right"> <div id="logo2"> Lost Book World </div> <div id="header_right_txt"> Yu </div> </div><!-- /header_right --> </div><!-- /header_top --> <div id="header_bottom"> <a href=".html"><img src="image/navi_global01.jpg" alt="" /></a><a href=".html"><img src="image/navi_global02.jpg" alt="" /></a><a href=".html"><img src="image/navi_global03.jpg" alt="" /></a><a href=".html"><img src="image/navi_globa4.jpg" alt=" /></a><a href=".html"><img src="image/navi_global05.jpg" alt="" /></a> </div><!-- /header_bottom --> </div><!-- /header --> <div id="inner"> <div id="largeWrap"> <div id="mainWrap"> </div><!-- /mainWrap --> <div class="sideAlphaWrap"> <div id="form_nv"> <img src="image/form-n.jpg" alt="" /><a href=""><img src="image/form-gen.jpg" alt="" /></a> </div> <div id="form"> </form> </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> <br /> <div id="form_nv"> <div id="form"> ああああ </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> </div><!-- /sideAlphaWrap --> <div class="clear"><hr /></div> </div><!-- /largeWrap --> <div class="sideBetaWrap"> 右サイドバー </div><!-- /sideBetaWrap --> <div class="clear"><hr /></div> </div><!-- /inner --> <div class="footer"> <p>ヘッダー<br /> Copyright © 2004-2010 abc co.,Ltd., All rights reserved.</p> </div><!-- /footer --> </div><!-- /wrap -->
- ベストアンサー
- HTML
- スタイルシート a:activeで画像を変える
スタイルシートの設定で画像メニューの切替を行おうとしていたんですが a.activeの設定の時のみ画像切替の反応が見られません。 どうしたらいいでしょうか？ 切替はclip:rect(top right bottom left)を使って一枚の画像の表示範囲で切り換えています。 【htmlメニュー部分】 <div class="MENU"> <a href="./"><img src="btn001.png"></a> </div> <div class="MENU"> <a href="./"><img src="btn002.png"></a> </div> 【スタイルシート部分】 IMG.MENU{ position:absolute; } DIV.MENU{ border:none; position:relative; float:left; } DIV.MENU A:link IMG{ clip:rect(0px 133px 25px 0px); top:0px; } DIV.MENU A:visited IMG{ clip:rect(0px 133px 25px 0px); top:0px; } DIV.MENU A:hover IMG{ clip:rect(50px 133px 75px 0px); top:-50px; } DIV.MENU A:active IMG{ clip:rect(25px 133px 50px 0px); top:-25px; } よろしくお願いします。
- ベストアンサー
- CSS
- 画像を挿入して横並びのメニューリストを作ったのです
が、margin-top,margin-bottom(margin-leftはききます）がききません。何が原因でしょうか？ 以下がソースです。 ～html～ <ul id="menu"> <ul> <li>a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li> <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li> 省略 </ul> ～css～ ul#menu {margin-left: 45px} ul#menu li {list-style-type: none; float: left} ul#menu li a {display: block; width: 181px} ul#menuのところに記述しましたが、変化ありませんでした。
- ベストアンサー
- CSS
