重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【GOLF me!】初月無料お試し

トップへページ移動させるためのボタンをウィンドウの右側に固定し、
ページを下にスクロールしてもその位置を固定して表示させたいです。
そのサンプルを作ってみたのですが、ウインドウ自体の幅を狭くすると内容とかさなってしまいます。
ウインドウサイズを固定する方法があると思うのですが、できれば使いたくありません。
この場合、どのようにしたら実現することができるのでしょうか。ご教示をお願いいたします。



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

A 回答 (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;}
}
    • good
    • 0

なんで右側に固定したいのに左からの距離で位置を指定しているんですか?

    • good
    • 0

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