
トップへページ移動させるためのボタンをウィンドウの右側に固定し、
ページを下にスクロールしてもその位置を固定して表示させたいです。
そのサンプルを作ってみたのですが、ウインドウ自体の幅を狭くすると内容とかさなってしまいます。
ウインドウサイズを固定する方法があると思うのですが、できれば使いたくありません。
この場合、どのようにしたら実現することができるのでしょうか。ご教示をお願いいたします。
<!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">
<title>絶対的な位置に固定配置する</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000000;
}
#main{
width: 900px;
background-color: #000;
margin: 0 auto;
}
#navi {
position: fixed;
top: 250px;
left: 930px;
width:20px;
margin: 0;
padding: 15px 5px;
text-align: center;
color: #ff0;
background: #ffcc00;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="navi">トップへ</div>
<!-- スクロールをさせるために -->
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
No.2ベストアンサー
- 回答日時:
右端に最低限のスペースを確保した上で、リキッドスタイルにしましょう。
★リキッドデザインです。ウィンド巾を変えても常に右端にスペースが開きます。
タブは全角スペースに置換してあるので戻すこと
<body>
<div class="article">
<div class="header">
<h1>サンプル</h1>
</div>
<div class="section">
<h2>本文記事</h2>
</div>
<div class="footer">
<h2>文書情報</h2>
<p class="goTop"><a href="./">トップへ</p>
</div>
</div>
</body>
html,body{margin:0;padding:0;}
div.article{
margin:0 4em 0 0;padding:0;
}
div.header,div.section,div.footer{
width:90%;
margin:0 auto;padding:0;
}
div.footer p.goTop{
width:5em;
position:fixed;
top:20px;
right:0;
line-height:1.6em;
text-align:center;
}
div.footer p.goTop a{
text-decoration:none;
display:block;
border:ridge 3px red;
}
div.footer p.goTop a:hover{border-color:yellow;}
div.footer p.goTop a:active{border-style:inset;background-color:silver;}
/* サンプルのため */
div.header h1,div.section h2,div.footer h2{margin-top:0;}
div.header{background-color:yellow;height:200px;}
div.section{background-color:aqua;height:600px;}
div.footer{background-color:lime;height:100px;}
}
<body>
<div class="article">
<div class="header">
<h1>サンプル</h1>
</div>
<div class="section">
<h2>本文記事</h2>
</div>
<div class="footer">
<h2>文書情報</h2>
<p class="goTop"><a href="./">トップへ</p>
</div>
</div>
</body>
★HTML5の場合は、
<body>
<article>
<header>
<h1>サンプル</h1>
</header>
<section>
<h2>本文記事</h2>
</section>
<footer>
<h2>文書情報</h2>
<p class="goTop"><a href="./">トップへ</p>
</footer>
</article>
</body>
html,body{margin:0;padding:0;}
article{
margin:0 4em 0 0;padding:0;
}
header,section,footer{
width:90%;
margin:0 auto;padding:0;
}
footer p.goTop{
width:5em;
position:fixed;
top:20px;
right:0;
line-height:1.6em;
text-align:center;
}
footer p.goTop a{
text-decoration:none;
display:block;
border:ridge 3px red;
}
footer p.goTop a:hover{border-color:yellow;}
div.footer p.goTop a:active{border-style:inset;background-color:silver;}
/* サンプルのため */
header h1,section h2,footer h2{margin-top:0;}
header{background-color:yellow;height:200px;}
section{background-color:aqua;height:600px;}
footer{background-color:lime;height:100px;}
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のボタンを等間隔に、かつ...
-
htmlのolやulなどlistにtitleや...
-
画面を縮小するとカラムが落ち...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<!-- #BeginLibraryItemとは
-
ヘッダーとフッターだけ背景を...
-
XHTMLでループ処理のやり方
-
html の divとtable の役割
-
<div id="container">の使いか...
-
hタグを使わずに小見出し
-
スペースを使わず文字位置を揃...
-
html5でheader,footerこみのwra...
-
htmlの文字が縦書きになる
-
含む含まないという概念自体の...
-
ulタグやliタグの中でbrタグ...
-
リストマーカーをボックス内に...
-
ドロップダウンメニューが隠れ...
-
<li>タグの数が増えすぎたので...
-
ボタンをセル内一杯に表示させ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
スペースを使わず文字位置を揃...
-
<div id="container">の使いか...
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
<!-- #BeginLibraryItemとは
-
body>div{}の意味を知りたい
-
IEだとリンクされるが他ブラウ...
-
CSSについて教えてください...
-
ウェブサイトの作成方法について
-
div要素が重なってします
-
SEO対策のタイミングはHP作成前...
-
IE10でホームページがもの凄く...
-
スタイルシート<記述>
-
.レスポンシブウェブデザインに...
-
グリッドレイアウトで"auto-fit...
-
CSS(初歩的)な質問です…float...
おすすめ情報