あるウェブサイトを閲覧中、スクロールしてページの途中にあるリンクから別のページを表示し、ブラウザの「戻る」を使って戻ってみると、ページの一番上に戻されてしまう──。
ページの途中を見ていて「更新」すると、いつもページの一番上まで戻されてしまう──。
リンク集など、「リンクをクリック→ブラウザの戻るボタンで戻る」、という操作を繰り返すことが多い場合、この現象は非常にわずらわしく、いちいちページをスクロールするのにイライラしてしまう人もいるでしょう。
読み込みのたびにページの一番上まで戻ってしまうのは、ブラウザの仕様(不具合)である場合もありますが、そのページに使われているスタイルシート(CSS)が原因であることもあります。
たとえばブログのレイアウトによくある、ページの上部に横長のタイトルがあり、その下に、左側にメニュー、右側に記事本文というページがあるとします。
全体とタイトルの横幅(width)が800px、メニューが200px、本文が600pxとなっていて、それぞれIDがtitle、menu、honbunだとします。
それがHTMLで
という順番で記述されているとしましょう。このままではタイトルの下に本文、本文の下にメニューが縦に並ぶだけで左右のレイアウトにならないので、スタイルシートを使って指定する必要があります。
それがCSSでは、titleはともかく、
となっている場合があるのです。これでもレイアウトできますが、実はposition:absoluteというのが曲者です。
absoluteは絶対的な配置で、html要素を基準とした──つまりページの最上部からの──距離を指定した要素(ボックス)になります。そのため、このページを更新したり別のページから移動したりすると、いつもページの一番上に戻ってきてしまうのです。
どうすればよいのかというと、テーブルを使う手もありますが、floatを使ってボックスを回り込ませるのが一番いいと思います。
と、このようになります。メニューの左マージンをマイナス800pxにするところがポイントです。
ページの途中を見ていて「更新」すると、いつもページの一番上まで戻されてしまう──。
リンク集など、「リンクをクリック→ブラウザの戻るボタンで戻る」、という操作を繰り返すことが多い場合、この現象は非常にわずらわしく、いちいちページをスクロールするのにイライラしてしまう人もいるでしょう。
読み込みのたびにページの一番上まで戻ってしまうのは、ブラウザの仕様(不具合)である場合もありますが、そのページに使われているスタイルシート(CSS)が原因であることもあります。
たとえばブログのレイアウトによくある、ページの上部に横長のタイトルがあり、その下に、左側にメニュー、右側に記事本文というページがあるとします。
全体とタイトルの横幅(width)が800px、メニューが200px、本文が600pxとなっていて、それぞれIDがtitle、menu、honbunだとします。
それがHTMLで
<div id="title">
<div id="honbun">
<div id="menu">
という順番で記述されているとしましょう。このままではタイトルの下に本文、本文の下にメニューが縦に並ぶだけで左右のレイアウトにならないので、スタイルシートを使って指定する必要があります。
それがCSSでは、titleはともかく、
#honbun {
position:absolute;
width:600px;
top:略;
left:200px;
}
#menu {
position:absolute;
width:200px;
top:略;
left:0px;
}
となっている場合があるのです。これでもレイアウトできますが、実はposition:absoluteというのが曲者です。
absoluteは絶対的な配置で、html要素を基準とした──つまりページの最上部からの──距離を指定した要素(ボックス)になります。そのため、このページを更新したり別のページから移動したりすると、いつもページの一番上に戻ってきてしまうのです。
どうすればよいのかというと、テーブルを使う手もありますが、floatを使ってボックスを回り込ませるのが一番いいと思います。
#honbun {
float:left;
width:600px;
margin-left:200px;
}
#menu {
float:left;
width:200px;
margin-left:-800px;
}
と、このようになります。メニューの左マージンをマイナス800pxにするところがポイントです。
この記事へのコメント
コメント一覧 (1)