• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:Dreamweaver上で、背景の領域にリンクを張りつつ、オンマウスで背景色を変更する構造を組む方法。)

Dreamweaverでリンクを張りつつ、オンマウスで背景色を変更する方法

このQ&Aのポイント
  • Dreamweaverを使用して、背景の領域にリンクを張りつつ、オンマウスで背景色を変更する方法を学びましょう。
  • Dreamweaver CS3を使用してWEBサイトを制作している場合、任意の領域の背景色にリンクを張り、オンマウスした際に背景色を変化させる構造を作りたいと思っています。
  • ソースに関する知識は少しありますが、Dreamweaverの使用方法にはあまり理解がありません。Dreamweaver上の機能を使用して簡単に設定する方法を教えていただけると助かります。

質問者が選んだベストアンサー

  • ベストアンサー
noname#119957
noname#119957
回答No.1

■dreamweaverでCSSを操作する方法。 HTML側で、class="test4-1-1"をクリックすればCSSエディタが開きますので、それで、CSSを書けばいいです。 CSSに関しては、CSSの知識を学習してもらえばいいです。ソースコードも直接編集でき、その際はコードヒントまで表示してくれます。 ■CSCで背景を入れ替えたいなら、background-image:url(); を指定すればいいです。

account199
質問者

お礼

ご教示いただきました方法で設定してみます。 ご回答いただきまして、誠にありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 背景画像へのリンク

    CSSで背景画像をリンクさせているのですが 文字が出てきて困っています。 ソースは以下の通りです。 文字が出ないようにするにはどうしたらいいのでしょうか。 <div id="side"> <div class="menu_content"> <ul class="menu"> <li class="menu_top"><a href="index.html">トップページ</a></li></ul> </div> </div> .menu_content li{display:block; text-indent:-9999px; font-size:0px; width:206px;height:68px; text-indent:-9999px;} li.menu_top a{display:block; width:406px;height:128px; text-indent: -9999px; background:url("css/menu_top.gif") bottom left no-repeat;}

  • CSSを使いたいのですが上手くいきません

    テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>

  • CSSの継承について...

    CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li で使った背景画(矢印)・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます) 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか? それとも根本的な何かを履き違えしているのでしょうか? 宜しくお願い致しますm(_ _)m

  • 縦並びメニューの枠線が重ならない

    いつもこちらではお世話になり、ありがとうございます。 cssのli:hoverを使ってサブメニューを表示させようとしていますが、 縦並びのサブメニューの枠線が重なってくれません。 どこが間違えているのでしょうか。 ご指摘をお願いいたします。 (素人ですので、他にもつっこみどころがかなりあると思います。 すみません(汗)) 【html】 <ul class="menu"> <li><a href="menu1.html" >メニュー1</a></li> <li><a href="menu2.html">メニュー2</a> <ul> <li><a href="submenu1.html">サブメニュー1</a></li> <li><a href="submenu2.html">サブメニュー2</a></li> </ul> </li> <li><a href="menu3.html" >メニュー3</a></li> <li><a href="menu4.html" >メニュー4</a></li> </ul> 【css】 ul.menu { margin: 0px; padding:0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 107px; line-height: 43px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(images/navi_b.png); background-repeat: no-repeat; color: #202020; font-family: "メイリオ"; font-size: 11px; } ul.menu li a:hover{ background-image: url(images/navi_r.png); } ul.menu li ul{ display: none; position: absolute; top: 165px; left: 210px; list-style-type : none; background-image: none; } ul.menu li:hover ul{ display: block; } ul.menu li ul li{ clear: left; width: 106px; line-height: 35px; border: 1px #989590 solid; border-collapse: collapse; } ul.menu li ul li a{ background: none; background-color:#B28872; color:#ffffff; } ul.menu li ul li a:hover{ background: none; background-color: #643E3E; color:#ffffff; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像を使ったドロップダウンメニュー

    ホームページのメニューボタンにドロップダウンを使おうと思っています。 色々ネットから調べて自分で試したのですが、 オンマウスで画像を変えたりと、少し複雑な為、うまく表示できません。 文字数の関係上スタイルシートのコードだけしか貼れませんが、 よろしくお願いいたします。 /* ナビゲーション */ #navi_continer { position: relative; z-index:100; width: 400px; height:110px; } #navi { position: absolute; width: 100px; background-image: url(./img/menu/03a.jpg); height: 110px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-image: none; } #navi li a:hover { color: #ffffff; background-image: url(./img/menu/03b.jpg); height: 110px; width: 100px; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #navi li.navi_menu_on{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }button { background-image: url(%E3%83%94%E3%82%AF%E3%83%81%E3%83%A3%201.jpg); }

  • 強制的に背景色を指定

    #topics ul li a{ font-size: 14px; padding: 5px; text-decoration: none; background: #FFFFFF; } #topics ul li a:hover{ background: #FF6633; font-size: 14px; padding: 5px; text-decoration: none; color: #FFFFFF; } 以上のようなCSSを定義してリンクのボックスを置いているのですが、 <div id="topics"> <ul> <li><a href="~">~~</a> この場合マウスを置いたときに背景色反転するのですが、 何もしないときにも強制的に背景色反転させるにはどうすればいいのか なかなか実現できなくて悩んでおります、いい定義方法はないでしょうか。

  • cssのみ使用したプルダウンメニュー

    はじめまして。 cssのみを使ってプルダウンするメニューを作ろうとしているのですが、上手くいきません。 コードとcssは以下です。 aboutにロールオーバーすると子孫リストがプルダウンする、というようにしたいです。 .main li .sub{ visibility:hidden; } で子孫リストは消えるものの、 .main li : hover .sub{ visibility:visible; } と設定しても現れてくれません。 どうすれば上手くいくでしょうか。 すみませんがよろしくお願いします。 ・html <nav class="common_width"> <ul class="main"> <li><a href="#">profile</a></li> <li><a href="#">about</a> <ul class="sub"> <li><a href="#">profile</a></li> <li><a href="#">blog</a></li> <li><a href="#">itai</a></li> </ul> </li> <li><a href="#">test</a></li> </ul> </nav> ・css li{ list-style:none; } .common_width{ width:900px; margin:0 auto; } a { color: #000; text-decoration: none; transition: background 0.3s ease 0s, color 0.3s ease 0s; } /*全部のリスト*/ nav li{ width:150px; } /*直下のul*/ nav > ul{ width:650px; margin:0 auto; overflow:hidden; } /*直下のリスト*/ nav .main li{ float:left; color: #9f9f9f; position: relative; margin-left:100px; } nav .main li:first-child{ border-left:none; margin-left:0px; } nav ul>li a{ padding:10px 0 10px 0 ; background-color: #ccc; display: block; text-align: center; line-height:1; } nav li:hover > a{ color: #fff; background-color: #000; } .main li .sub{ visibility:hidden; } .main li : hover .sub{ visibility:visible; } nav ul li a:hover{ color: #fff; display:block; background-color: #000; } nav .sub li { font-size: 12px; color:#fff; border-top:1px dotted #fff; text-align:center; margin-left:0px; }

    • ベストアンサー
    • HTML
  • CSSでテキストインデントをマイナスにすると背景画像も消えてしまうのです

    こんにちは、ログを探してみましたが似通ったものが見つからなかったので教えてください。 CSSを使ってのページデザインを勉強しています。ナビゲーションバーを、背景を使って画像にしようと思い、テキストインデントをマイナスにして消す方法を本で読みました。やってみたのですが、背景画像も一緒に消えてしまいました。 親ボックスで右寄せにすると、今度はテキストインデントは解除され、テキストと背景画像が重なって右寄せになってしまいます。 横幅700の親ボックスに600の子ボックスを右寄せにしたいので、以下のようなソースにしてみました。 HTML側 <div id="navi"> <ul id="navibar"> <li><a href="***" id="link1" title="リンク1">link1</a></li> <li><a href="***" id="link2" title="リンク2">link2</a></li> ---同様にリンクが続く--- </ul> </div> CSS側 #navi{ width:700px; text-align:right; } #navibar{ width:600px; list-style-type:none; background-color:transparent; } ul#navibar li{ width:120px; float:left; border:none; display:block; } #navibar #link1{ width:106px; height:20px; text-indent:-500em; background-image:url("images/link1bg.gif"); background-repeat:no-repeat; } #navibar #link2{ width:106px; height:20px; text-indent:-1000em; background-image:url("images/link2.gif"); background-repeat:no-repeat; } 以下同様に続く どのように修正すれば背景だけ表示できますでしょうか。アドバイスお待ちしています。

    • ベストアンサー
    • CSS
  • グローバルナビの画像のサイズ変更方法

    グローバルナビのサイズ指定をして大枠のwidthを1000pxにして、ひとつひとつのナビのサイズを200px×5で調節して1000pxでナビ同士の横の隙間を無くすように合わせたいです。 自分なりにやってみたのですが、どうしてもわかりません。 プログラミングをどのように変更すれば良いのでしょうか。よろしくお願いします。 html部分 <div id="globalnavi"> <nav> <ul> <li><a href="#" class="home">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#">Portfolio</a></li> <li><a href="#"><span>Contact</a></li> </ul> </nav> </div> css部分 #globalnavi{ height:36px; width:1000px; margin-top:0px; margin-bottom:5px; background-color:white; } #globalnavi ul{ list-style-type:none; margin:0; padding:0; margin-top:1px; margin-bottom:4px; } #globalnavi li{ float:left; width:200px; height:20px; margin-bottom:10px; margin-top:5px; margin:0px; padding-left:10px; } #globalnavi a{ text-align:center; display:block; padding-top:8px; padding-bottom:15px; margin-bottom:-1px; width:160px; background-image:url(images/btn046_06.gif); background-repeat:no-repeat; color:blue; } #globalnavi a.home{ width:160px; background-image:url(images/btn046_05.gif); } #globalnavi a:hover{ background-image:url(images/btn046_10.gif); }

    • ベストアンサー
    • CSS
  • CSSでマウスオーバーを作成しています。

    CSSでマウスオーバーを作成しています。 /**CSS内**/ #test { margin: 0; padding: 0; list-style-type: none; } #test li { text-indent: -9999px; width: 200px; height: 400px; margin: 0; padding: 0; background: url(aaa_ov.bmp) no-repeat -200px 0; ----- マウスオーバー時 } #test a { text-decoration: none; display: block; width: 200px; height: 400px; margin: 0; background: url(aaa.bmp) no-repeat 0 0; ----- 最初 } #test a:hover { text-decoration: none; background-color: transparent; background-image: none; } /**HTML内**/ <link rel="stylesheet" href="style.css" type="text/css" /> </HEAD> <BODY> <div align="center"> <ul id="test"> <li><a href="***.html">Home</a></li> </ul> </div> </BODY> としているのですが最初の画像も出ずうまくいきません。 画像パスも間違っていませんでした。 どのようにすればいいんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML