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

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

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

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

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

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

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

A 回答 (4件)

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


義)で、overflow:hidden; とか、scrolling=no とかありませんか?
    • good
    • 0
この回答へのお礼

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

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

補足です


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

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

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

リンク先のタグを


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

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

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


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

この回答への補足

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

補足日時:2010/04/02 09:19
    • good
    • 0

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

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

この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の方も修正する方法でもよければ

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

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を良いように変更すればできます。

質問の1は
.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;
}
というふうな感じで書けば良いのかなと思います。

質問2はちょっとここで細かくは説明するには無理があります。
難しいとかでなく、デザインのCSSどうするかはご自分で頑張ってもらうしかないので。slick-theme.cssをすべて見て修正してください。

あと、質問の文章から思ったのですが、質問者様はコーディングの環境整っていますか?

FirefoxとFirebugがあれば、プラグインが書き足した全体のソースが見れるので、
普通に自分で作ったHTMLと同じように、CSSでどうデザインするかなどわかってくると思います。

がんばってください。

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

質問の1は
.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のように文字修飾をするには
どうすればよいのでしょうか?
ついでに、テキストエリアの背景なのも設定できる
ものなのでしょうか?

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

Aベストアンサー

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

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

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

<html>
<head>
<title>TEXTAREAみたいなスタイルシート</title>
<style>
<!--
div.ScrollBox {overflow:auto;width:300px;height:50px;border:1px black solid;margin:0px}
-->
</style>
<body>
<div class="ScrollBox">
<p>
ここに、色々文章を書きます。<br>
この中は、タグによる<em>マークアップができます</em>のでお好きなように。<br>
DIV要素を大きさ固定にして、そこからはみ出すようだったら<strong>スクロールバーがでる</strong>ようにしてるだけなんですけどね。
</p>
</div>
</body>
</html>

この方法ですとDIV要素の中も普通のHTMLですので、まぁ何でも書けます。DIV要素のスタイル設定の方に背景を指定すれば当然背景も設定できます。

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">
  <!-- ここには、フォームに入力された値を表示する -->
  <INPUT type="submit" name="submit" value="登録"> // c.php に遷移する
  <INPUT type="submit" name="submit" value="戻る"> // a.php に戻る
 </FORM>

● c.php (完了画面)
--------------------------------------------------------------------------------
b.php について質問なのですが、
b.phpにおいて、登録ボタンと戻るボタンを2つつけて、
それぞれ遷移先を変えたいのですが、どうすればいいんでしょうか・・・?
<FORM method="POST" action="c.php">と書いてしまうと、
戻るボタンを押しても戻らずに、c.phpに遷移してしまいますよね??
こういう場合ってJavaScriptとかで遷移先を指定するんですか・・?
もしそうでしたら、JavaScriptがよくわからないので
できればサンプルコード示していただけると助かります・・・。
  

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

--------------------------------------------------------------------------------
● 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>
==============================================================
このように指定したのですが、
ウィンドウを小さくしたり、長い文を書いたりすると、
メインの記事がフッターと重なって読めなくなってしまいます。
記事が短い時は、ページ全体の下部に、
長い時はスクロールした一番下にくるようにしたいです。
テーブルのheight指定を使えば同じような効果は得られますが、
テーブルの無いレイアウトをやってみたかったので。
同じような質問は発見したのですが、いい解答が見つかりませんでした。

#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 はみ出した内容の扱い(Overflow)
scroll 内容を切り抜く。

次に、オーバーラップを回避した書き方を一応示しておきます。
Left<br/>を追加して、スクロールバーが出ることをご確認下さい。

<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Test</TITLE>
  <STYLE type="text/css">
  #left {
  position:absolute;
  top: 130px;
  left: 100px;
  width: 300px;
overflow-y: scroll;
  }
  #main {
  position:absolute;
  top: 130px;
  left: 400px;
  }
  #right {
  position:absolute;
  top: 130px;
  left: 700px;
  }
  #footer {
  position:absolute;
  bottom: 0px;
  left: 100px;
  }
  </STYLE>
</HEAD>
<BODY>
<div id="left">
 left<br/>
</div>
<div id="main">
 main
</div>
<div id="right">
 right
</div>
<div id="footer">
 footer
</div>
</BODY>
</HTML>

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、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ベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途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">
<!--
#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><...続きを読む

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

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

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

そのため、項目内容をHTMLで、
<div class="left">

</div>
と、
<div class="right">

</div>
で囲い、その後、それぞれをCSSで、
.left{
float:left;
}
.right{
float:right;
}
としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。
これが現在、意味不明な箇所になっています。

ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか?
詳しい方がいましたら、よろしくお願いします。

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

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

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

Aベストアンサー

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

問題点:
1、トップ画像よりも大きな枠にする。または、画像を小さくする。
2、メイン=レフト+ライトの幅に収まるようにする。

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

2、
枠幅が狭いからライトが入れない・・・
なので、
.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というのがまずいんでしょうか?
できれば20日までに教えてくださるととても嬉しいです。
よろしくお願いします。

Aベストアンサー

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

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

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

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

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


人気Q&Aランキング