![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
自分でやっていてどうしてもわからなくて
そこさえわかればUPできるのですが
大至急で教えてほしいのです。
フルCSSで作成しました。
左のサイドメニューのリストの画像を変更、位置も変えました。
そうしたら
元々、リストメニューのテキストがリンク先に飛ばせるようになっていたのですが
それができなくなりました。
テキストの一行下の行でないと
リンク先ページにいけないのです。
そこにはweb上にはなんの文字もないので
そこにリンクが張ってあることが全くわからないのです。
何の変更もしていないページのタグをコピーして
貼り付けてもだめです。
どうすればよいのでしょう?
ちなみに
●変更前のページのタグ
<div id="hpb-nav">
<h3 class="hpb-c-index">ナビゲーション</h3>
<ul>
<li id="nav-toppage"><a href="#"><span class="en">toppage</span><span class="ja">トップページ</span></a>
<li id="nav-item"><a href="#"><span class="en">itemlist</span><span class="ja">商品一覧</span></a>
<li id="nav-order"><a href="#"><span class="en">order</span><span class="ja">ご注文方法</span></a>
<li id="nav-shop"><a href="#"><span class="en">shopinfo</span><span class="ja">ショップ案内</span></a>
<li id="nav-campaign"><a href="#"><span class="en">campaign</span><span class="ja">キャンペーン</span></a>
</ul>
</div>
<!-- navi end --><!-- aside -->
<div id="hpb-aside">
<div id="ranking">
<h3>メニュー</h3>
<ol>
<li class="r01"><a href="#">商品名商品名商品名</a>
<li class="r02"><a href="#">商品名商品名商品名</a>
<li class="r03"><a href="kounenki/html">商品名</a>
<li class="r04"><a href="kounenki/html">商品名</a>
<li class="r05"><a href="hiesyou.html">商品名</a>
</ol>
</div>
<div id="banner">
<h3 class="hpb-c-index">バナースペース</h3>
<ul>
<li><a href="#" id="banner-sale">SALE</a>
<li><a href="#" id="banner-present">プレゼント</a>
<li><a href="#" class="banner-magazine">メルマガ登録</a>
<li><a href="#" id="banner-rss">RSS</a>
</ul>
</div>
ちなみに(li class)は最初は(li id])でしたが変更しました。
●変更後(鍼灸院のHP)
<div id="ranking">
<h3>施術科目</h3>
<ol>
<li >肩こり腰痛<a href="file:///F:/builder/katakoriyoutuu.html">駅前で人気 オススメ 頭痛 肩こり 腰痛 </a>
<li >頭痛<a>商品名商品名商品名</a>
<li >アトピー<a href="file:///F:/builder/atopi-.html"> 駅前で人気 オススメ </a>
<li>不妊症<a href="#">商品名商品名商品名</a>
<li >自律神経失調症<a href="#">商品名商品名商品名</a>
<li >不眠症<a href="#">商品名商品名商品名</a>
<li >美顔はり<a href="#">商品名商品名商品名</a>
<li >女性の気になる症状<a href="#">女性の気になる症状</a>
<li >耳つぼダイエット<a href="#">商品名商品名商品名</a><br>
</ol>
</div>
どうしても知りたいので
もっとタグが必要ならおっしゃってください。
こちらもどこからいえばいいのかまったくわからないので。
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
No1の回答者です。
補足有難うございます。ただ、検証した限り特にクリック範囲が狂うような事はないですね。
IE、グーグルクローム共にクリック範囲は正常です。
これ以外に、同一ページ内でタグそのものにCSSを反映させてませんか?
p全部とか、a全部とか、body全体とか。
あと多分、頂いたHTMLソースとCSSソースは、一部ですよね?
表示がおかしい、という所だけのソースを抜粋したものだと思います。
何カラムのデザインか判りませんが、他にもヘッダメニュー部分や、
メインコンテンツや下部メニューなんかも同一ページにあると推測します。
じゃないと、このリストメニューで使われていないCSSが
含まれていることの説明がつきませんし。
このリストメニューを単体で動作させる限りは、別に異常がないようです。
ということは、それ以外のソースが干渉しているという事でしょう。
残念ながら、部分的にソースを頂いても判らない問題のようです。
1ページ丸ごとのHTMLとCSSが必要な様ですね。
そうはいってもまるまるここにUPするのは気が引けるでしょうから、
可能性としていくつか提示しますから確認してみて下さい。
考えられることは、他の要素との横幅縦幅が干渉している可能性と、
閉じタグを忘れたaやdivやspanが周囲に潜んでいる可能性ですね。
displayやfloatやclearがどこかのCSSで不適切、という可能性も十分にあります。
この二つの要素は隣り合っている要素と干渉しまくりますから。
この回答への補足
指導くださるなら全く気が引けるところではありません。
CSSのタグは必要ならまた数時間後にお伝えできます。
サイトのタグです。
多いので2つに分けます
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="Keywords" content=" 更年期 冷え症 生理不順 生理痛 自律神経失調症 美容はり ">
<meta name="Description" content=" 女性が安心できる評判の鍼灸院 女性の健康管理お任せください">
<title> 女性に評判 【トップページ】</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_8Eb_2c_top.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_8Eb_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<meta name="google-site-verification" content="TWFIfp4YxHrxZRTgEZx1JnuhfT4tMNThbCl8DG_4mDI" />
</head>
<body id="hpb-template-08-05b-01" class="hpb-layoutset-02">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>
<!-- container -->
<div id="hpb-container">
<!-- header -->
<div id="hpb-header">
<div id="hpb-headerMain">
<h1> 摂津 高槻 等北摂全域から多数来院されています。</h1>
</div>
<div id="hpb-headerLogo"><a href="#" style="background-image : url(logo_8Eb1.png);"></a></div>
<div id="hpb-headerExtra1">
<p class="tel"><span>電話でのお問い合わせは</span>072-629-1665</p>
<p class="mail"><a href="http://form.os7.biz/f/4349fac5/">メールでのお問い合わせはこちら</a></p>
</div>
<div id="hpb-headerExtra2"><img src="image6.jpg" width="221" height="45" border="0" alt="受付時間 "></div>
</div>
<!-- header end --><!-- inner -->
<div id="hpb-inner">
<!-- wrapper -->
<div id="hpb-wrapper">
<!-- page title -->
<div id="hpb-title">
<h2><span class="ja">30~50代の頑張る女性を応援します!!</span><span class="en"></span></h2>
</div>
<!-- page title end --><!-- main -->
<div id="hpb-main">
<div class="hpb-parts-cnt-01 hpb-parts-cnt-style clearfix">
<h3>自分のこと後回しの、頑張り屋のお母さん
その症状、ほっといて大丈夫ですか?</h3>
<br>
<br>
<br>
<img src="images/sympton_img11.gif" width="163" height="124" border="0"><img src="images/sympton_img15.gif" width="113" height="169" border="0"><img src="images/sympton_img14.gif" width="140" height="189" border="0"><img src="images/sympton_img09.gif" width="132" height="138" border="0"><br>
<div class="hpb-parts-cbox-01 hpb-parts-cbox-style clearfix"><br>
<br>
<br>
<br>
<img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt="女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり">よくイライラするようになってきた<br>
<br>
<img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt="女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり">お買い物が面倒で、食事も作りたくない<br>
<br>
<img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt=" 女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり">無理がきかなくなってきた<br>
<br>
<img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt=" 女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり">朝起きて疲れが取れていない<br>
<br>
<img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt=" 女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり ">物忘れが出てきた <br>
<br>
<br>
<img src="images/image10.jpg" width="250" height="250" border="0"><br>
<br>
No.1
- 回答日時:
ん…?ようは、リスト本文にはリンクのクリック判定が無く、
リストの下の空白スペースに謎のクリック判定がある、ということですか?
今、変更後のHTMLをこちらのIEとグーグルクロームで検証しましたが、
リンクの範囲は普通に反映されておりますよ?
変なところにリンクのクリック判定があるとか、そんなことも無いです。
なぜ私と貴方の結果が違うかおわかりでしょうか。
それは、貼られたソースだけではCSSの【内容】が書かれていない為、
本当の意味での動作検証が出来ないからです。
CSSの内容が書かれていないので、
私のブラウザではHTMLのみで検証することになります。
class名やid名だけでCSSが出来ていると思われているなら大間違いです。
HTMLだけで動かした場合にリンク範囲に異常が無いということは、
貼られたHTMLソースには問題が無いという事になります。
いや細かいことを言えば<li>タグにちゃんと終了タグ書こうよとか、
何でFドライブ内を指定した内部アドレス書いてあるんだろとか色々あるんですが、
現状問題があるのはCSSで間違いないでしょう。
<a>で囲んである範囲がリンク範囲になる、というのは鉄則です。
これはソースで守られていますし、普通に表示が出来るはずなんです。
それを邪魔しているのは、CSSの内容でしょうね。
あなたは質問に当たってミスをおかしました。
それはここに載せたソースがHTMLだけなので、これ以上回答ができない、という事です。
CSSのソースを貼って頂ければアドバイスのしようもあるんですが。
この回答への補足
知識不足で不愉快な思いをさせて申し訳ございません。
それでも、きちんとご指導いただき
ありがとうございます。
CSSのソースは以下です。
これで具体的なアドバイス頂けるでしょうか?
#ranking
{
background-color: #eaffc8;
border: 1px solid #a5df45;
}
#ranking h3
{
text-align: left;
color: #ffffff;
font-size: 1em;
line-height: 26px;
margin-top: 0;
margin-bottom: 0;
padding-left: 5px;
height: 26px;
background-image : url(rankingBg_8Eb.png);
background-position: left top;
background-repeat: repeat-x;
}
#ranking img.new
{
float: left;
margin-top: -10px;
margin-right: 0;
}
#ranking ol
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
list-style-type: none;
}
#ranking li
{
display: block;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #b1dd6c;
padding-top: 5px;
padding-bottom: 4px;
text-align: left;
padding-right: 5px;
padding-left: 35px;
line-height: 2;
}
#ranking li:first-child
{
border: none;
}
#ranking li img
{
vertical-align: text-top;
}
#ranking li#r01
{
background-image : url(rankingNum_8Eb_01.png);
background-position: left top;
background-repeat: no-repeat;
padding-bottom: 20px;
}
#ranking li#r02
{
background-image : url(rankingNum_8Eb_02.png);
background-position: left top;
background-repeat: no-repeat;
padding-bottom: 20px;
}
.ranking li#r03
{
background-image : url(rankingNum_8Eb_03.png);
background-position: left top;
background-repeat: no-repeat;
padding-bottom: 20px;
}
.ranking li#r04
{
background-image : url(rankingNum_8Eb_04.png);
background-position: left top;
background-repeat: no-repeat;
}
.ranking li#r05
{
background-image : url(rankingNum_8Eb_05.png);
background-position: left top;
background-repeat: no-repeat;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
タブ切り替えの初期表示について
-
2階層のメニューを作ってjQuery...
-
大至急!!HPビルダー16の専...
-
jQueryについて質問なのですが...
-
javascriptとCSSを使ってのドロ...
-
.innerHTMLの不一致?
-
大量のチェックボックス状態取...
-
商品画像リンク (image_link)...
-
マウスオーバーのメニューについて
-
時間差で画像を動作させたいjav...
-
ファイヤーフォックスでCSSが機...
-
JavaScriptでの画像切り替えを...
-
jQueryでのドラッグアンドドロ...
-
Colorboxがうまく設置できません
-
ワードプレスでレイアウトが崩...
-
jqueryを使って無駄なspanタグ...
-
javascriptでの画像の先読みに...
-
引数のある関数をhtml読み込み...
-
ロールオーバーで切り替えられ...
-
画像の重なりの順序を代える方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
クリックした<a>タグのみにClas...
-
jQueryでネスト構造の<li>がク...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
JavaScriptによる疑似プルダウ...
-
jQueryのeqで最後からn番目以降...
-
どの<li><a> が押されたか判別...
-
javascriptでEnterキーをtabキ...
-
Jquery タブで、4つのliのうち...
-
【javascript で動的に a タグ...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
JavaScript インクリメントの書...
-
複数の画像をランダム(シャッ...
-
jqueryプルダウンメニュー個別着色
-
タブ切り替えの初期表示について
おすすめ情報