自分でやっていてどうしてもわからなくてそこさえわかればＵＰできるのですが大至急で教えてほしいのです。フルＣＳＳで作成しました。左のサイドメニューのリストの画像を変更、位置も変えました。そうしたら元々、リストメニューのテキストがリンク先に飛ばせるようになっていたのですがそれができなくなりました。テキストの一行下の行でないとリンク先ページにいけないのです。そこにはweb上にはなんの文字もないのでそこにリンクが張ってあることが全くわからないのです。何の変更もしていないページのタグをコピーして貼り付けてもだめです。どうすればよいのでしょう？ちなみに ●変更前のページのタグナビゲーション top page トップページ item list 商品一覧 order ご注文方法 shop info ショップ案内 campaign キャンペーンメニュー商品名商品名商品名商品名商品名商品名商品名商品名商品名バナースペース SALE プレゼントメルマガ登録 RSS ちなみに(li class)は最初は(li id])でしたが変更しました。 ●変更後(鍼灸院のＨＰ) 施術科目肩こり腰痛駅前で人気オススメ頭痛肩こり腰痛頭痛商品名商品名商品名アトピー駅前で人気オススメ不妊症商品名商品名商品名自律神経失調症商品名商品名商品名不眠症商品名商品名商品名美顔はり商品名商品名商品名女性の気になる症状女性の気になる症状耳つぼダイエット商品名商品名商品名どうしても知りたいのでもっとタグが必要ならおっしゃってください。こちらもどこからいえばいいのかまったくわからないので。よろしくお願いいたします。

大至急！！ＨＰビルダー16の専門家の方教えて下さい

解決済

質問者：maki9091
質問日時：2012/03/20 11:20
回答数：2件

自分でやっていてどうしてもわからなくて
そこさえわかればＵＰできるのですが
大至急で教えてほしいのです。

フルＣＳＳで作成しました。

左のサイドメニューのリストの画像を変更、位置も変えました。

そうしたら

元々、リストメニューのテキストがリンク先に飛ばせるようになっていたのですが
それができなくなりました。

テキストの一行下の行でないと
リンク先ページにいけないのです。
そこには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>

<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])でしたが変更しました。

●変更後(鍼灸院のＨＰ)

<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>

どうしても知りたいので
もっとタグが必要ならおっしゃってください。

こちらもどこからいえばいいのかまったくわからないので。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： einn
回答日時：2012/03/20 15:19

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>

<div id="hpb-container">

<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>

<div id="hpb-inner">

<div id="hpb-wrapper">

<div id="hpb-title">
<h2><span class="ja">30～50代の頑張る女性を応援します！！</span><span class="en"></span></h2>
</div>

<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>

補足日時：2012/03/20 16:36

通報する

- 0
- 件

通報する

No.1

回答者： einn
回答日時：2012/03/20 12:21

ん…？ようは、リスト本文にはリンクのクリック判定が無く、

リストの下の空白スペースに謎のクリック判定がある、ということですか？

今、変更後のHTMLをこちらのIEとグーグルクロームで検証しましたが、
リンクの範囲は普通に反映されておりますよ？
変なところにリンクのクリック判定があるとか、そんなことも無いです。

なぜ私と貴方の結果が違うかおわかりでしょうか。
それは、貼られたソースだけではCSSの【内容】が書かれていない為、
本当の意味での動作検証が出来ないからです。
CSSの内容が書かれていないので、
私のブラウザではHTMLのみで検証することになります。
class名やid名だけでCSSが出来ていると思われているなら大間違いです。

HTMLだけで動かした場合にリンク範囲に異常が無いということは、
貼られたHTMLソースには問題が無いという事になります。
いや細かいことを言えば<li>タグにちゃんと終了タグ書こうよとか、
何でFドライブ内を指定した内部アドレス書いてあるんだろとか色々あるんですが、
現状問題があるのはCSSで間違いないでしょう。

<a>で囲んである範囲がリンク範囲になる、というのは鉄則です。
これはソースで守られていますし、普通に表示が出来るはずなんです。
それを邪魔しているのは、CSSの内容でしょうね。

あなたは質問に当たってミスをおかしました。
それはここに載せたソースがHTMLだけなので、これ以上回答ができない、という事です。
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;
}