重要なお知らせ

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

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

ウインドウの幅を変更されても固定位置で表示する方法

解決済

  • 質問者：kiseki777
  • 質問日時：
  • 回答数：2件

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



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

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

右端に最低限のスペースを確保した上で、リキッドスタイルにしましょう。


★リキッドデザインです。ウィンド巾を変えても常に右端にスペースが開きます。

タブは全角スペースに置換してあるので戻すこと

<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
    • 件
通報する

No.1

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

    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報