ページの途中にリンクするとそれより上部分が表示されない。

解決済

質問者：52966925
質問日時：2010/04/01 16:59
回答数：4件

ページの途中にリンクするとそれより上部分が表示されない。

HTML,css,javascriptを組み合わせてページを作っています。

リンク先：<a name="tochu" id="tochu"></a>
リンク元：<a href="ファイル名#tochu">途中へ</a>

と記述しております。リンクをクリックすると移動はするのですが、
リンク先の名前をつけたところがページの一番上になってしまい、
それより上部が表示されず、上にスクロールも出来ません。
ページ全体が上にずれ、画面外にはみ出してしまっている状態です。

cssのposition等の設定かと思い、探したのですがそのような記述はありません。
原因を思い当たる方、おられましたらよろしくお願いいたします。

通報する

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

質問の本文を隠す

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

「CSS name」に関するQ&A： CSSで参照するID（or NAME）属性値の基本的な名称を教えていただけますか？

さらに表示

「id 属性」に関するQ&A： inputタグ内にあるid属性の意味？

回答 (4件)

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

No.4ベストアンサー

回答者： yyr446
回答日時：2010/04/01 19:27

そのリンク先アンカーがおかれている親要素のstyle属性（もしくはCSS定

義）で、overflow:hidden; とか、scrolling=no とかありませんか？

- 0
- 件

通報する

この回答へのお礼

まさにその通りでした！
ずばりの回答、ありがとうございます。

通報する

お礼日時：2010/04/02 09:16

No.3

回答者： scorpion2009
回答日時：2010/04/01 17:43

補足です

id属性にしておけば、リンク先は<a>タグだけでなく、任意のタグ部分にジャンプさせることが出来ます。
例:
リンク元
<a href="hoge.html#tochu">途中へ</a>
リンク先(hoge.html)
<p id="tochu">途中</p>
　
　参考までに。
　

- 0
- 件

通報する

この回答へのお礼

解説ありがとうございます。
idのみ、nameのみの設定を試しましたが上手くいきませんでした。

通報する

お礼日時：2010/04/02 09:20

No.2

回答者： scorpion2009
回答日時：2010/04/01 17:30

リンク先のタグを

<a name="tochu" id="tochu"></a>
↓
<a id="tochu"></a>
に変更すればOKです。
XHTMLでは <a name=....>属性は推奨されません。
モダンブラウザ(IE7以降,FireFox,Safari,Chrome)を対象とするのであればid属性を指定するだけでOKです。
　

- 0
- 件

通報する

No.1

回答者： pasocom
回答日時：2010/04/01 17:09

リンク先：<a name="tochu" id="tochu"></a>

この「 id="tochu"　」ってなんですか？。
私、そんなの付けたこと無いですが・・・。
これ、削除すればきっとうまく動くでしょう。

この回答への補足

nameのみ、idのみの設定にしてみても上手くいきませんでした。

補足日時：2010/04/02 09:19

通報する

- 0
- 件

通報する

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

「id 属性」に関するQ&A： Javascriptでのbuttonのname属性、もしくはid属性を取得

さらに表示

「CSS name」に関するQ&A： inputタグのテキストBOXだけ右寄せにする方法

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

質問する（無料）

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

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

質問する（無料）

他の専門家の回答をチェック

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

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

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の方も修正する方法でもよけ...続きを読む

他の回答も見る

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか？

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

他の回答も見る

Qカルーセルスライダー「slick.js」のカスタマイズ

jQuery「slick.js」にて下記のようにカスタマイズをしたいのですが
調べても答えがなかったので質問させてください。

1、基本は添付画像の形で1枚の画像をスライドさせていきたいのですが両脇にある矢印(次へと戻る)は通常表示させたくありません。
マウスオンした場合に表示させるようにしたいのですがどのようにすればよろしいでしょうか？

動きとしては
http://flexslider.woothemes.com/
が理想です。
※上記サイトの場合は画像をマウスのドラッグで動かせないので今回は見送りました。

2、たぶん初歩的な質問かもしれませんが矢印とドット部分を独自でデザインする場合はどこをいじればいいででしょうか？
※slickのデフォルトの場合はwebフォントのようでどこをいじればいいのかがわかりません。

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

Aベストアンサー

slick.jsのサイト見たところ、slick-theme.cssをいじればすべてできそうです。
前へボタンは　.slick-prev
次へボタンは　.slick-next
下のドット状のページャーは　.slick-dots 以下
なので該当のクラスのCSSを良いように変更すればできます。

質問の１は
.slick-slider .slick-prev ,.slick-slider .slick-next{
opacity:0;
cursor: default;
}
.slick-slider:hover .slick-prev ,.slick-slider:hover .slick-next{
opacity:1;
cursor: pointer;
}
というふうな感じで書けば良いのかなと思います。

質問...続きを読む

他の回答も見る

Qテキストエリア内の文字の装飾

<textarea>で囲んだ文章を、部分的に
・色を変えたり
・太字にしたり
・大きさを変えたり
etc...
したいのですが、このエリアで囲まれた文章は
<br>すら、htmlとして認識されませんよね？
（素直に記述上で改行すれば、反映されますが）

テキストエリア内で、htmlのように文字修飾をするには
どうすればよいのでしょうか？
ついでに、テキストエリアの背景なのも設定できる
ものなのでしょうか？

フレームとして、新たなページを１つ作るのは
できるだけ避けたいのです。

Aベストアンサー

TEXTAREAってのは、あくまでも複数行入力可能な「入力用」の要素ですからね。あまり色々書ける方が不都合なんです。そのままサーバのプログラム（cgiとか）にテキスト・データとして渡したりしますので。

#入力用以外に使うこともできますけど、あまりいい方法ではないです、色んな面で。

入力用ではなくて、表示用に右にスクロールバーのついた領域が欲しいということなら、IE5.5とNetscape6以上でしたらスタイルシートだけで可能です。

<html>
<head>
<title>TEXTAREAみたいなスタイルシート</title>...続きを読む

他の回答も見る

QFORMで送信ボタンと戻るボタンを2つつけてそれぞれ遷移先を変えたい

以下のような画面を作りたいのですが↓

--------------------------------------------------------------------------------
● a.php （ユーザ情報入力画面） ※フォームに入力する画面
　
　<FORM method="POST" action="b.php">
　　<INPUT type="text" name="mail">
　　<INPUT type="submit" name="submit" value="確認">
　</FORM>

● b.php　（ユーザ情報入力確認画面）※フォームに入力された値を表示する画面

　<FORM method="POST" action="c.php">
　　<!-- ここには、フォームに入...続きを読む

Aベストアンサー

はじめまして。

<INPUT type="submit" name="submit" value="登録" onClick="form.action='c.php';return true">
<INPUT type="submit" name="submit" value="戻る" onClick="form.action='a.php';return true">

でいいと思います。（実際、このコードで使っています）
値を渡すには、FORM内にhiddenで、値を設定しておいて、methodをPOSTに設定しておけば、渡せます。

他の回答も見る

Qcss固定したフッターが本文と重なってしまいます

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定...続きを読む

Aベストアンサー

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出...続きを読む

他の回答も見る

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ベストアンサー

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

他の回答も見る

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

</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などをもう少し仔細にお伝えいただければ、
解決の糸口を示すことができるかもしれません。

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

他の回答も見る

QCSSで、何故か、「float」が上手く効かない

詳しく書きますと、前回した質問、
http://oshiete.goo.ne.jp/qa/7786505.html
の続きになります。
ちなみにこれは、今の所、解決した次第です。
しかし、新たな場面に直面している最中であります。
http://sky.geocities.jp/thanksv0358/index.html#
質問は、上記で作成しているページについてです。

その内容ですが、ページ中程にある「今月のおすすめ」とある、すぐ下の「見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。

そのため、項目内容をHTMLで、
<div class="l...続きを読む

Aベストアンサー

幅を設定しましょう。
今現在の状況は、小さな箱にそれよりも大きな物を入れようとしています。
そうすると、箱に入らないか、箱は壊れますよね・・・

問題点：
１、トップ画像よりも大きな枠にする。または、画像を小さくする。
２、メイン＝レフト＋ライトの幅に収まるようにする。

１、
画像が、787pxなのだから、mainの枠は600pxでは無理があります。
なので、
width: 600px;　ではなく、　width: 800px;　程度にしましょう。

２、
枠幅が狭いからライトが入れない・・・
なので、
.left {
float: left;
width: 400px;
}
.right{
float:right;
width: 400px;
}

左width: 400px;＋右width: 400px;＝合計800px　←この値より小さくする事。

他の回答も見る

Q で表示されない。

パソコンやりはじめてちょっとの初心者です。
日記とかにリンクを上の通りやって，この<a href=100q-a.htm>こちら</a>
のようにリンクしてるのに，表示されません。
けど，ファイルとして開くとちゃんと文字が移るんですけど…。
これって、100q-a.htmというのがまずいんでしょうか？
できれば２０日までに教えてくださるととても嬉しいです。
よろしくお願いします。

Aベストアンサー

　補足を拝見いたしました。回答としては＃７、＃８の方と同じになりますが、以下のことをご確認下さい。

・ファイル名が完全に同一である。すでの他の方がおっしゃっていますが、大文字小文字、htmとhtml、日本語と英語の違いです。簡単なのは、リンク先のページのファイル名をそのままコピーしてソースに貼り付けるのが良いかと思います。
　もしアップロードした先でリンクがうまくいっていないと、もともとのページのファイル名に日本語（全角）が含まれている可能性があります。インターネット上では、ファイル名に全角は使えないからです。パソコンでは問題なく使えるので、パソコンで見ているときには気がつきません。

・問題のファイルが、リンク元（<a href="～のあるページ）と同じディレクトリ内にある。
　つまり同一フォルダ内にあり、そのフォルダの中でさらに小分けにされた別のフォルダや、その上のフォルダではないということです。
　Aフォルダの中にBフォルダ、Cフォルダ、Dフォルダがあるとすると、そのリンク元とリンク先が同じフォルダ内にあり、AフォルダとCフォルダに別々の保存されていない、ということです。これは、ページを保存してあるパソコン内ではなく、アップロードした先のディレクトリを見てください。
　アップロードはFTPソフトなどお使いでしょうか？そうだと見分けやすいのですが・・。当該サイトに接続すると、アップロード先が表示されると思います。
　前回と同じ回答になりますが、ファイル名自体が受けつけられないということはないと思います。実は同じファイル名でアップしている方はたくさんいらっしゃるようです。（察するに、最近はやりの「○○へ１００の質問」ではないでしょうか？）
　また、表示されない、ということも先に確認するべきでした。これは、「そのようなファイルは存在しないか、または削除されました」という、レンタルした先からのメッセージが表示される、ということですよね？
　もし、ページが真っ白なまま、というのであればその真っ白なページのままソースを開いてみてください。