- ベストアンサー
固定位置で表示する方法とは？
- ウインドウの幅を変更されても固定位置で表示する方法についてご教示ください。
- ウィンドウの右側に固定されたトップへページ移動ボタンをスクロールしても固定して表示させたいです。
- ウインドウの幅を狭くしても内容が重ならない方法があるのか教えてください。
- みんなの回答 （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;} }
その他の回答 (1)
なんで右側に固定したいのに左からの距離で位置を指定しているんですか？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
