痔になりやすい生活習慣とは?

ブラウザ依存でしょうか?・・・

<li class="yyy"><a href="hoge.html#xxx">ホゲ</a></li>
と記述しているリンクをクリックして、URLは
http://hogehoge.com/hoge.html#xxx
へ移動するのですが、
hoge.html内に
<a name="#xxx" id="#xxx"></a>
と記述している指定箇所に飛んでくれません。

IE7は正常に飛んでくれますが、
Firefox, Safari, Opera, GoogleChromeなど、
IE7以外のブラウザを用いると飛んでくれないのです。

この機能はIEだけの機能だったでしょうか?
ご存知の方がいましたら、ご教授いただけると幸いです。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (7件)

>同html内で、例えば、ページ上部に飛ばす場合は、


><a href="#pagetopr">ページ上へ↑</a></p>
>のように#付きで問題なく動作しているので、
>別htmlの場合、#を付けないということですね。

「#」は続く文字列がid値であることを明示します。
同html/別htmlは関係ありません。


・飛び先となる要素にはid値を書きます。
 <タグ id="xxx">

 →「id=」と書いているので、さらに「#」を付けて
  「これはid値ですよ」と明示する必要はありません。
 

・リンクのhrefには"#"+id値を書きます。
 同html <a href="#xxx">
 別html <a href="hoge.html#xxx">

 →「xxx」だけではパスの一部と認識するので
  「#」をつけて「これはid値ですよ」と明示します。
 →hrefにページの指定が無いなら(同html)、
  同html内の「xxx」というid値の要素へ移動します。
 →hrefにページの指定があるなら(別html)、
  指定html内の「xxx」というid値の要素へ移動します。
    • good
    • 1
この回答へのお礼

皆さん、ありがとうございました。
いただいた内容を基にソースを見直してみたいと思います。

お礼日時:2008/10/20 20:06

もしかして、idやnameを数字から始まる名前を付けていませんか?


もし、そうなら、アルファベットから始まる名前を付けてみてください。

的外れでしたら、失礼しました。
    • good
    • 1

<a href="#pagetopr">ページ上へ↑</a>



これは、

<a name="pagetopr"></a> のところにジャンプします。

<a name="#pagetopr"></a> のところにジャンプするわけじゃないです。

そして、もしページの最上部に <a name="#pagetopr"></a> という記述があるのであれば、<a href="#pagetopr">ページ上へ↑</a> のジャンプすべきところが無いということになります。

そして、IEだけはそのページのトップに飛ぶようになっているだけだと思います。もしくは、<a name="#pagetopr"></a> と書いてあっても、<a name="pagetopr"></a> と同じように扱うことにしてるのか。

ジャンプすべきところが見つからないから、どこにもジャンプしないというIE以外のブラウザのほうが、命令に忠実ということになるのかもしれません。

試しに、<a name="#pagetopr"></a> をページの最上部ではなく最下部に書くと、どうなりますか?
    • good
    • 0
この回答へのお礼

皆さん、ありがとうございました。
いただいた内容を基にソースを見直してみたいと思います。

お礼日時:2008/10/20 20:06

ANo.3です。



> <a name="xxx" id="xxx">●●●●●</a>
> のように、なにがしかの要素を入れ、アンカー打ちするのが良いということでしょうか?

結果はそうなる場合もありますが、考え方が逆になっています。「飛んで欲しい箇所が予め存在しているのだから、その要素を個別識別できる目印を適切に打ってマークアップする」という意味です。
例えば、飛び先が以下の様な内容になっているとします。
-----------------------------------------------------------
<h1>大見出し</h1>
<h2>小見出し</h2>
<p>文章…</p>
-----------------------------------------------------------
で、「大見出し」の箇所に飛んで欲しいのであれば、
-----------------------------------------------------------
<h1 id="xxx">大見出し</h1>
-----------------------------------------------------------
もしくは、
-----------------------------------------------------------
<h1><a name="xxx" id="xxx">大見出し</a></h1>
-----------------------------------------------------------
とすべきでしょう、という事です。ただし先程の回答でも触れましたが、name属性はDOCTYPEによって非推奨又は廃止、となっていますのでご自分のニーズに合った方法で記述して下さい。XHTML1.1では前者の記述が必須となります。(【参考】http://w3g.jp/webstandards/optimize/anchor
    • good
    • 0
この回答へのお礼

皆さん、ありがとうございました。
いただいた内容を基にソースを見直してみたいと思います。

お礼日時:2008/10/20 20:05

ANo.2様が正解を出しておられます。

つまり、

> IE7は正常に飛んでくれますが、

こちらの方が「正常」なわけではなくおかしな挙動です。
#は<a href="~">ホゲ</a>の方にのみ指定するもので、呼び先<a name="~" id="~"></a>の方には付きません。
それから、蛇足ですが、

> <a name="#xxx" id="#xxx"></a>

の様に、要素がないところにアンカーを打つ、というのも推奨されません。呼び先として妥当な箇所にアンカーもマークアップするべきです。
また、id属性は不要という事もありません。むしろ、name属性の方が廃止の方向にあります(【参考】http://w3g.jp/xhtml/dic/a)。

この回答への補足

ご回答ありがとうございます。

> <a name="#xxx" id="#xxx"></a>
の様に、要素がないところにアンカーを打つ、というのも推奨されません。呼び先として妥当な箇所にアンカーもマークアップするべきです。

ということは、
<a name="xxx" id="xxx">●●●●●</a>
のように、なにがしかの要素を入れ、アンカー打ちするのが良いということでしょうか?

補足日時:2008/10/07 15:16
    • good
    • 0

<a name="xxx" id="xxx"></a>



とすればよいでしょう。
ハッシュについて勘違いしてますね?
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

#はいらなかったんですね。
前任者が#付きで記述していたので、そのままで使っていました。

同html内で、例えば、ページ上部に飛ばす場合は、
<a href="#pagetopr">ページ上へ↑</a></p>
のように#付きで問題なく動作しているので、
別htmlの場合、#を付けないということですね。

お礼日時:2008/10/07 15:12

<a name="#xxx" id="#xxx"></a>


のうち「id="#xxx"」は不要ではないでしょうか。
単に「<a name="#xxx"></a>」
だけなら良いと思うのですが。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
name と id の概念を、今一度、調べてみます。

お礼日時:2008/10/07 15:18

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QFirefoxでアンカーリンクが飛ばない件

こんにちわ。

Firefoxのみアンカーリンクが機能しません。
別ページには飛ぶのですが、そのページのTOPへ飛んでしまいます。

こういうことです。
B.htmlページ内からA.html内の#abc_01へ飛ばしたいのです。
しかしA.htmlのページTOPへ飛ばされ、ぜんぜーーん#abc_01へ飛んでくれず
機能しないのです。

しかし、ローカル環境では飛んでくれております。

※A.html
<h2 id="abc_01">ダミー</h2>

※B.html
<li><a href=A.html#abc_01>ダミーはこちら!</a></li>

色々調べて、以下の事を試してみましたが代わりませんでした。
■IDの名前を変更
■name="abc_01"を付け加える。

Firefox Ver.21.0

もう少しで納品の期日が迫ってきていますので急いでおります。
どなたかわかる方お返事お願いいたします。

Aベストアンサー

私自身その状態になったことがないのでなんともいえませんが
こんなサイトがヒットしました

http://www.sunsweb.net/archives/110

ざっと、
・マシンやブラウザの不調
・cssで@importを使っていると不調になる
という内容のようです。検証してみては?

QHTMLのでリンクが開かない…

 作成したHTMLファイルを実行して時々 起こる現象なのですが…

 同じフォルダ内に、たとえば、[xxx.html]と[yyy.html]の2つのファイルがあって、単独ではそれぞれ問題なく開くのですが、HTMLの中に次の2つの文を記述して、これを実行した時に、[yyy]は開くのに、[XXX]がどうしても開かないことがあります。

   <a href="xxx.html">XXX</a>
   <a href="yyy.html">YYY</a>

 記述の文字に問題がないように、文章作成する際に、両方の<a href="...">~</a>をコピペして、ファイル名もフォルダに表示されるファイル名をわざわざコピーして<a href="...">に貼り付けています。つまり、記述上は問題がないようにしています。

 この現象はオフライン(WEBに乗せていない状態)でも起こるのですが、WEBにアップロードしても同じように開けません。また、特定のHTMLファイルでなく、HTML文を作っていて時々起こります。

 どうしてなのでしょうか…? 理由と解決方法をお教えください。よろしくお願いします。

 作成したHTMLファイルを実行して時々 起こる現象なのですが…

 同じフォルダ内に、たとえば、[xxx.html]と[yyy.html]の2つのファイルがあって、単独ではそれぞれ問題なく開くのですが、HTMLの中に次の2つの文を記述して、これを実行した時に、[yyy]は開くのに、[XXX]がどうしても開かないことがあります。

   <a href="xxx.html">XXX</a>
   <a href="yyy.html">YYY</a>

 記述の文字に問題がないように、文章作成する際に、両方の<a href="...">~</a>をコピペして、ファイル名もフォルダに...続きを読む

Aベストアンサー

href="75h/..." を、href="./75h/..." に修正してみてください。

それから、lintで既に確認済かもしれませんが、タグの誤使用が気になりました。
<li>タグは単独では使用できません。
<td>
<ul>
<li>内容。。。
</ul>
</td>
のように記述します。

で、本題ですが、ローカルの拡張子が違っているといった問題ではありませんか?
.htmであるはずが、.htm.txtになっている、など。

URLエンコードするとどうなりますか?
「 - 」→「 %2D 」
「 _ 」→「 %5F 」

"75h/WBR75H_Win-VerUP.htm"
  ↓
"75h/WBR75H%5FWin%2DVerUP.htm"

参考URL:http://validator.w3.org/check?uri=http%3A%2F%2Fmembers.at.infoseek.co.jp%2Fpersonalnet%2F

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qsafariでアンカーリンクが動作しません

safariでアンカーリンクを反応するようにしたいのですが、動作してくれません。他のブラウザだと問題ありません。

調べて、ファイル名ではなくhttp~にすれば反応するということを聞いたのですが、ネットをつながない環境で見れるようにする必要があるのでどうしてもファイル名のまま動作させなければなりません。

記述しているタグはこのようになっています。
<a href="home.html#start">home</a>

どうにか、ネットにつなぐことなくsafariでアンカーリンクを動作させる術はないでしょうか?
どなたかご教授お願いいたします。

Aベストアンサー

<a href="home.html#start">home</a>

という記述とのことなのでおそらく今回該当してないかとは思いますが、

<a href="home.html#○○○">home</a>

で、○○○が日本語文字列だと、Safariでエラーになってしまうようです。。


また、ページ内でのリンク先のタグの指定は、

<div id="start">~~</div>

のような形で「id」で指定されていますでしょうか・・・?

<a name="start">~</a>

のような「name」の形だとうまくいかないことがあるようです。


にしても、Safariだけうまくいかない。。というのは解せないですね・・・

以上、ご参考になれば幸いです。よろしくお願いいたします。

Qページ内リンクがずれてしまう

お世話になっております。
制作しているWEBで、ページ内リンクを使用しているのですが、いざリンクへ飛ばすとずれが起こり固定ヘッダーの部分と画像が被って困っています。

http://depthcode.com/2011/02/header-fixed.html
上記のサイトを参考にアンカーの位置を調整したところヘッダーに被らず画像もぴったり収まったのですが、こちらの要望としてはリンクで飛んだあとも添付画像のように画像とヘッダーの間を常に空けた状態にしておきたいのです。
どのように設定すれば良いかご教授お願い申し上げます。

Aベストアンサー

補足いただきましてありがとうございます。

いただいたCSSを元にHTMLを作成してみたのですが、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style type="text/css">
<!--
#top {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 70px;
background: red;
}
#work {
width: 840px;
margin-top: -70px;
margin-right: auto;
margin-left: auto;
padding-top: 70px;
background: green;
}
#contact {
width: 840px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 70px;
background: blue;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
</head>
<body>

<div id="top">top</div>

<div id="work">work</div>

<div id="contact">contact</div>

<div style="background: pink; height: 2000px;" ><a href="#top">to top</a><br /><a href="#work">to work</a><br /></div>

<div style="background: yellow;" ><a href="#top">to top</a><br /><a href="#work">to work</a></div>

</body>
</html>

このHTMLだと私の環境では、きっちりと各タグの先頭にページ内リンクできました。
(FireFox 最新版、GoogleChrome最新版、IE7~10)

この動作がshiopple様がお考えの挙動と相違無いとすると、
ヘッダーを固定するスクリプトと何か干渉している可能性がありますでしょうか・・・??(・・;)

可能であれば、現状のHTML、Javascript、CSSなどをもう少し仔細にお伝えいただければ、
解決の糸口を示すことができるかもしれません。

ご確認の程、何卒よろしくお願いいたします。

補足いただきましてありがとうございます。

いただいたCSSを元にHTMLを作成してみたのですが、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title><...続きを読む

Qiframe内の特定の場所にジャンプする方法

iframeの枠内に長い記事を入れています。スクロールをするのが大変なので、枠外に第1章、第2章などのボタンをつけておき、それをクリックすることによりそれぞれの場所にジャンプできるようにしたいと思っています。普通のアンカー名を使うページ内リンクではiframeが崩れてジャンプ先の表示が外に出てしまいます。何とかiframeの枠内で表示させたいと思っています。どなたか方法をご教示いただきたいと思います。よろしくお願いします。

Aベストアンサー

(もしかしたら私の解釈が間違っているのかもしれませんが…)
親となるファイルがsample1.html、iframeの中に表示するファイルがsample2.htmlとすると、

sample1.htmlの中身
<iframe src="sample2.html" name="window" width="300" height="200"></iframe>
<a href="sample2.html#idou" target="window">移動</a>

sample2.htmlの中身
<a name="idou">移動させたい場所</a>

とすれば、iframe内に移動させたい場所が表示されると思います。

Q別ページのページ内リンクでの不具合(スマホサイト)

現在、スマホサイトを制作しているのですが、iPhoneの実機で確認した際にページ内リンクで不具合が生じており、Androidでは一切同じ現象が起きないことや探してみてもそういった不具合を解決する手段が見当たらず、制作が滞ってしまったため、今回このような質問をさせていただきました。

具体的な不具合の内容としては「sample.html#content」のようなリンクによって、別ページの指定箇所(<div id="content">)へ遷移した場合にその場所からどこへスクロールしても再び同じ指定箇所に引き戻されてしまうような現象が起きています。
説明が下手な上に文章だけでは上手く伝わらないかもしれませんが、もしも同じ事態に直面した経験のある方は解決に至った方法や別の処理で同じ動作を実現する方法など、ページ遷移後も通常通りのスクロールを可能にする方法をお教えいただけたら幸いです。

本来であれば、このような事態に陥ることはまずないことかと思いますし、JavaScriptを多数組み込んでいることが原因である可能性が高いですが、JavaScriptのこの処理を行うとそういった現象が起きることがあるといったアドバイスでも構いませんので、ご教授の程、よろしくお願い致します。

現在、スマホサイトを制作しているのですが、iPhoneの実機で確認した際にページ内リンクで不具合が生じており、Androidでは一切同じ現象が起きないことや探してみてもそういった不具合を解決する手段が見当たらず、制作が滞ってしまったため、今回このような質問をさせていただきました。

具体的な不具合の内容としては「sample.html#content」のようなリンクによって、別ページの指定箇所(<div id="content">)へ遷移した場合にその場所からどこへスクロールしても再び同じ指定箇所に引き戻されてしまうような現...続きを読む

Aベストアンサー

とあるWebページにおいて、iPadのsafariで同様の現象を確認したことがあります。

原因としては、下記URLにもある通りJavaScriptによるHTMLの書き換えによるものだと思われます。
挙動としては、ページの内容に変更があった時、再描画する際にURLの情報からアンカーの場所に移動しているのだと思われます。

回避方法としては、JavaScriptによるページの変更をしないことですね。
先に述べたWebページでは、きちんと最後までページを読み込ませてからスクロールすると発生しませんでしたので、ページの描画中に色々と内容を変更していて、変更が完了しないうちにスクロールしたのだと思います。
(あくまで予測ですが。)

もしリアルタイムに情報を更新するような画面であれば、その部分だけインラインフレームにすることで回避できるかもしれません。
(全く実証していないので可能性の提示です。)


http://hamalog.tumblr.com/post/3158769710/ios-safari

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング