• ベストアンサー
  • すぐに回答を!

HTMLでのWebサイト作成について

現在、HTMLWebサイトを作成しています。 そこで質問があります。 例えば、<LI class="gnav01"><A href="http://www.○○○/">テスト</A></LI>というリンクを作ったのですが、実際にWebサイトを見ると、文字が見えずリンクがあるであろう場所にカーソルを持って行くと画面の左下に<http://www.○○○/>というアドレスが出ます。文字を見えるようにするにはどうすれば良いでしょうか?

共感・応援の気持ちを伝えよう!

  • 回答数5
  • 閲覧数76
  • ありがとう数12

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

  • ベストアンサー
  • 回答No.3
noname#198951

class="gnav01"と指定されているので、css内でgnav01の指定を確認してみてください。 バックグラウンドカラーと同じ色を指定してた場合、闇夜のカラスみたいに文字が見えなくなります。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • 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
  • cssで作成する多階層リスト

    こんにちは。 cssで ・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする ・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい 以上のように作成したいのですが、 そのcssの記述がわかりません。 色々サイトで探しましたが見つからず。。。 どなたか教えてください。 ◆HTML <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>多階層</title> </head> <body> <br> <div id="MainDiv"> <div id="gnav"> <ul> <li><a href="#">テスト(1)</a> <ul> <li><a href="#">てすと(1)-1</a> <ul> <li><a href="#">TEST(1)-1-1</a> <ul> <li><a href="#">テスト(1)-1-1-1</a> <ul> <li><a href="#">TEST(1)-1-1-1-1</a></li> <li><a href="#">TEST(1)-1-1-1-2</a></li> <li><a href="#">TEST(1)-1-1-1-3</a></li> <li><a href="#">TEST(1)-1-1-1-4</a></li> <li><a href="#">TEST(1)-1-1-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-1-2</a> <ul> <li><a href="#">TEST(1)-1-1-2-1</a></li> <li><a href="#">TEST(1)-1-1-2-2</a></li> <li><a href="#">TEST(1)-1-1-2-3</a></li> <li><a href="#">TEST(1)-1-1-2-4</a></li> <li><a href="#">TEST(1)-1-1-2-5</a></li> </ul> </li> </ul> </li> <li><a href="#">TEST(1)-1-2</a> <ul> <li><a href="#">テスト(1)-1-2-1</a> <ul> <li><a href="#">TEST(1)-1-2-1-1</a></li> <li><a href="#">TEST(1)-1-2-1-2</a></li> <li><a href="#">TEST(1)-1-2-1-3</a></li> <li><a href="#">TEST(1)-1-2-1-4</a></li> <li><a href="#">TEST(1)-1-2-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-2-2</a> <ul> <li><a href="#">TEST(1)-1-2-2-1</a></li> <li><a href="#">TEST(1)-1-2-2-2</a></li> <li><a href="#">TEST(1)-1-2-2-3</a></li> <li><a href="#">TEST(1)-1-2-2-4</a></li> <li><a href="#">TEST(1)-1-2-2-5</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">てすと(1)-2</a></li> <li><a href="#">てすと(1)-3</a></li> <li><a href="#">てすと(1)-4</a></li> </ul> </li> <li><a href="#">テスト(2)</a> </li> </ul> </div> </div> </body> </html> ◆CSS body { font-size: 13px; font-family: "Meiryo UI", "MS Pゴシック", "MS PGothic", "MS UI Gothic", "MS ゴシック", "MS 明朝"; } #MainDiv { overflow: hidden; width: 1000px; margin: 0; } /* 全角カタカナ階層 */ #gnav { float: left; width: 150px; height: 200px; } #gnav ul { margin: 0; padding: 0; border-top: 1px #FFFFFF solid; list-style-type: none; } #gnav ul li { width: 150px; height: 24px; text-align: center; background: #c8d6e8; border-bottom: 1px #FFFFFF solid; } #gnav ul li a { display: block; width: 150px; height: 24px; color: #000000; font-size: 100%; line-height: 1.6; background: #6495ed; text-decoration: none; } /* ※.子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */ #gnav ul li:hover > a { background: #ffa500; } /* 全角ひらがな階層 */ #gnav ul li ul { display: none; list-style-type: none; } #gnav ul li:hover ul { display: block; position: relative; top: -25px; left: 152px; width: 150px; height: 25px; }

  • リンクに関する制御について【XHTML&CSS&JavaScript】

    【XHTML&CSS】 リンク制御について Webサイトにおいて、現在リンクの制御の方法をどうしたらいいのかわかりません。(JavaScriptについては初心者です。) XHTMLのソース上においてリンクを以下のように記述し、 <ul> <li><a href="../link/test1.html">テスト1</a></li> <li><a href="../link/test2.html">テスト2</a></li> <li><a href="../link/test3.html">テスト3</a></li> <li><a href="../link/test4.html">テスト4</a></li> </ul> 上記のようにリストを作成するが、テスト1からテスト3まではリンク先のファイルが存在するが、テスト4についてはファイルが存在しない。 この状態では、 通常であればテスト4は"404 Not Found「ページが存在しません。」などのエラーが表示されます。 これをCSSまたは、JavaScriptなどで制御して、 リンク先のファイル(test4.html)を探しに行って存在しない場合、 リンク先へ遷移させないようにはするにはどうしたら実現可能でしょうか? よろしくお願いします。

その他の回答 (4)

  • 回答No.5
noname#206842

>文字を見えるようにするにはどうすれば良いでしょうか? 意味が、よくわからないのですが?・・・ <section class="nav"> <ul> <li><a href="#" title="テスト">テスト</a></li> <li><a href="#" title="項目2">項目2</a></li> </ul> </section> と、いう様にしたいということなのかな?・・・

共感・感謝の気持ちを伝えよう!

  • 回答No.4

製作されるならfirefoxで確認をされていると思いますが。  開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )が豊富ですから  アドオンに、 Firebug( https://addons.mozilla.jp/firefox/details/1843 )がありますので、それでHTMLとスタイルシートの関係が一目瞭然にわかります。 Html Validator( https://addons.mozilla.jp/firefox/details/249 )  も入れておくと良い。たぶんスタイルシートの設定かと思います。 <LI class="gnav01"><A href="http://www.○○○/">テスト</A></LI>  class要らないはずです。 headerブロックにあるolのliでしたら  div.header div.nav ol li{}

共感・感謝の気持ちを伝えよう!

  • 回答No.2

HTMLのソースよりスタイルシートのほうがどうなっているのかを確認したほうがよさそうですけど。 「gnav01」というclassで文字色が白色に指定されているといったことはないですか?

共感・感謝の気持ちを伝えよう!

  • 回答No.1

まずは、リンクの部分は <A href="http://www.○○○/">テスト</A> だけなので、その状態にしてから確認すると良いと思います。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • Movable Type 教えてください。

    簡単に説明いただけたら幸いです。 すでにMTで作成しているHPの一部(リンクの変更をしたいのですが、 うまく表示できなくて困っております。 変更したのは。 デザインよりテンプレート選択→index.htm内で 現在、リンクがかかってるであろうとする。 <li><a href="http://www.ttt.com/aaa.htm" class="lid">商品について</a></li> 部分を<li><a href="http://www.ttt.com/mmm.htm" class="lid">商品について</a></li> に変更し、リンクの変更をかけたいのですが MT確認画面で確認するとページが表示されずアドレスを確認すると、 最後がhttp://~~~~~~/mt.cgiになっており表示できません。 リンク先については、一覧よりウェブページの管理→(タイトル)商品についてを選択 ここの、ファイル名を変更(mmm.htm)としました。 どうすればmmm.htmを反映させることができますでしょうか。 他にさわらなければいけないファイルがあるんでしょうか。 詳しく教えていただけば幸いです。 どうぞよろしくお願いいたします。

  • Dreamweaverでリストを作成するとボックスからずれてしまいます

    DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。

  • jQuery プルダウンメニュー

    プルダウンメニューの一部で行き詰っています。 メニュー1のサブメニューが開いている状態で、メニュー2をクリックした時 メニュー1のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。

  • <A>?</A> 内に書くことはできません。

    <li> <a href="http://○○.html"> <img src="/photo/○○.jpg"> <p class="p_photo1">日付:2015/06/06 </p> <p class="p_photo2">店名:○○ </p> </a> </li> <li> このようなコードは良くないのでしょうか? <P> を 193行目の <A>?</A> 内に書くことはできません。 <P>?</P> 内に <A> を書くことはできます。 となってしまいます。 複数の文字を表示させつつ、まとめてリンクを貼りたいので どうしてもこのようなコードになってしまいます。 時と場合によっては私のような書き方でもOKなのでしょうか?

    • ベストアンサー
    • HTML
  • 次のhtmlはどのような内容なのでしょうか?

    あるサイトのソースなのですが、普通リンクを貼るときには、<a href="***.html"></a>という風にしますよね?でも下記のソースはそのようになっていません。下記のリンクの貼り方は、どのような仕組みなのでしょうか <li class="top"><span><a href="../" class="visible"></a><a href="../" class="hidden">TOP</a></span></li> <li class="news"><span><a href="../news/" class="visible"></a><a href="../news/" class="hidden">NEWS&amp;INFORMATION</a></span></li> <li class="schedule"><span><a href="../schedule/" class="visible"></a><a href="../schedule/" class="hidden">SCHEDULE</a></span></li> <li class="discography"><span><a href="../discography/" class="visible"></a><a href="../discography/" class="hidden">DISCOGRAPHY</a></span></li> <li class="special"><span><a href="../special/" class="visible"></a><a href="../special/" class="hidden">SPECIAL</a></span></li> <li class="teamayu"><span><a href="../teamayu/" class="visible"></a><a href="../teamayu/" class="hidden">TeamAyu OFFICIAL FANCLUB</a></span></li> <li class="link"><span><a href="../link/" class="visible"></a><a href="../link/" class="hidden">LINK</a></span></li>

    • ベストアンサー
    • HTML
  • ホームページ作成について質問です。

    ホームページ制作について質問です。 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を使って作成しています) .

  • ウェブサイトを見る際画面に映らない部分があります

    インターネットは繋がってます。 Mixiの自分のアカウントの画面でトップ、メッセージ、日記などの文字が画面上に出ません。この辺だろうな思うところにカーソルを持っていくと確かにトップ、メッセージ、日記などの文字が浮かび上がるんです。 その他にも、ウェブサイトの写真が写っていなかったり、カーソルを動かせば文字が浮かび上がるということが多々あります。ちゃんとウェブサイトまでたどりつくのに画面上できちんと写真や文字が見れないのはとても不便です。 どうしたらいいでしょうか?

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

    ホームページ制作について質問です。 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のハイパーリンクになってる文字列に対し、「訪問済みリンク色(a:visited)」だけ新たに設定したいです。 現在はすべて文字色は赤で、訪問済みリンクであっても色は赤のままです。それを訪問済みリンクなら青になるようにしたいです。 ブラウザの設定で変更する方法ではなく、CSSで変更したいです。 <body>タグの中は「一切いじれない状態」なので、<body>の外部に新たにcssを書き、そこから色を変更したいですが、ハイパーリンクの文字列は、タグの挟まれ方の種類が以下のとおり(5)種類あります・・・ <a>タグは、<a href="http://*" class="title">と<a href="http://*"> の(2)種類、 他にも<span>や<strong>の位置が違ってたりしますが、<body>の中はいじらずに訪問済みリンク色だけ変更することは可能でしょうか? <body> <div class="blogbody"> <div class="text"> ■文字列(1) <li><span style="color: red"><a href="http://*"><strong><span style="color: red">文字列(1)</span></strong></a><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(2) <li><a href="http://*" class="title"><strong><span style="color: red">文字列(2)</span></strong></a>DATE</li> ■文字列(3) <li><a href="http://*" class="title"><span style="color: red"><strong>文字列(3)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(4) <li><a href="http://*"><span style="color: red"><strong>文字列(4)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(5) <li><a href="http://*"><strong><span style="color: red">文字列(5)</span></strong></a>DATE</li> </div> </div> </body>

    • ベストアンサー
    • HTML
  • location時に複数のclassを適用させたい

    次のようなフォームの部品があります。 <form name="formname" class="searchform">     <input type="text" name="query" class="searchbox">//     <input type="button" value="検索" class="button" onclick="search()" /> </form> http://www.com/index.phpにテキスト入力フィールドとボタンがあります。 テキストエリアに[任意の文字列]を入れてボタンを押すと、 <li class=list><a class=link href="http://www.com/search.php?que=[任意の文字列]">リンク</a></li> というリンクをクリックしたときと同じ動作を引き起こすようにしたいです。 form action="&#65374;"をつけてGETメソッドで送信するのではなく、あくまでもテキストボックスの値を受け取って、 それをクエリとしたhrefをlocateしたいのです。 <script type="text/javascript"> function searches(){ var str1=document.formname.query.value; href = "http://www.com/search.php?que="+str1; location.href = href; } </script> と自分でも書きましたが、これでは <a href="http://www.com/search.php?que=[任意の文字列]">リンク</a> をクリックしたときと同等になってしまいます。 liのclassとaのclassが適用されません。 この2つのclassは、別のjavascriptと連動しているため、どうしても <li class=list><a class=link href="http://www.com/search.php?que=[任意の文字列]">リンク</a></li> をクリックしたときと同様の動作を引き起こしたいのです。 上のフォームのbuttonをクリックすることで、このような動作を起こす方法を教えてください。 よろしくお願いします。