- ベストアンサー
HTMLで一部だけスクロールするようにしたい
HTMLで画像のような画面構成でタイトルとメニューを固定してメインの部分だけをスクロールするようにしたいのですがどのようにすればいいか教えてくれませんか？
- WhiteTigerteil
- お礼率26% (21/80)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
cssで指定すれば可能ですね。 overflowをscrollでいけます。 あとはiframeタグ使うとか。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
簡単なサンプル ★<div class="section"></div>や<section></section>をコピーペーストして増やしてみる。 ★タブは＿に置換してあるので戻すこと。 ★HTML4.01以降、HTMLには焚書構造を文書構造しか書かないのでHTMLは楽です。スタイルシートは学んでください。 ★ウィンドウ幅に依存しないのでスマホでも幅広ディスプレイでも利用可。印刷時は素のままで ★HTML5はまだ時期尚早かな 【HTML4.01strict 文字コードはShift_JIS】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;position:relative;} div.section,div.footer{width:80%;margin:0 auto;padding:5px;} div.header{position:fixed;width:100%;} div.header h1,div.header p{line-heigh:1.6em;width:80%;margin:0 auto;padding:5px;} div.header div.nav{width:80%;margin:0 auto;} div.header div.nav ol{margin:0;padding:5px;width:190px;height:600px;list-style:none;position:relative;left:-5px;} div.header div.nav ol li{text-align:center;width:80%;height:2em;margin:5px;} div.section{padding-top:100px;} div.section>*,div.footer>*{margin-left:200px;} div.section+div.section{padding-top:5px;} div.header h1,div.header p{background-color:lime;} html{background-color:gray;} div.header div.nav ol{background-color:rgb(238,255,130);} div.header div.nav{} div.section,div.footer{background-color:rgb(255,192,128);} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./link1">リンク1</a></li> ＿＿＿＿<li><a href="./link2">リンク2</a></li> ＿＿＿＿<li><a href="./link3">リンク3</a></li> ＿＿＿＿<li><a href="./link4">リンク4</a></li> ＿＿＿＿<li><a href="./link5">リンク5</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>HTMLで一部だけスクロールするようにしたい</h2> ＿＿<p>HTMLで画像のような画面構成でタイトルとメニューを固定してメインの部分だけをスクロールするようにしたいのですがどのようにすればいいか教えてくれませんか？</p> ＿</div> ＿<div class="section"> ＿＿<h2>HTMLで一部だけスクロールするようにしたい</h2> ＿＿<p>同じソースをコピーする。</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-11-20</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html> 【HTML5】文字コードはUTF-8で保存すること。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- html,body{margin:0;padding:0;position:relative;} section,footer{width:80%;margin:0 auto;padding:5px;} header{position:fixed;width:100%;} header h1,header p{line-heigh:1.6em;width:80%;margin:0 auto;padding:5px;} header nav{width:80%;margin:0 auto;} header nav ol{margin:0;padding:5px;width:190px;height:600px;list-style:none;position:relative;left:-5px;} header nav ol li{text-align:center;width:80%;height:2em;margin:5px;} section{padding-top:100px;} section>*,footer>*{margin-left:200px;} section+section{padding-top:5px;} header h1,header p{background-color:lime;} html{background-color:gray;} header nav ol{background-color:rgb(238,255,130);} header nav{} section,footer{background-color:rgb(255,192,128);} --> </style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li><a href="./link1">リンク1</a></li> ＿＿＿＿<li><a href="./link2">リンク2</a></li> ＿＿＿＿<li><a href="./link3">リンク3</a></li> ＿＿＿＿<li><a href="./link4">リンク4</a></li> ＿＿＿＿<li><a href="./link5">リンク5</a></li> ＿＿＿</ol> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>HTMLで一部だけスクロールするようにしたい</h2> ＿＿<p>HTMLで画像のような画面構成でタイトルとメニューを固定してメインの部分だけをスクロールするようにしたいのですがどのようにすればいいか教えてくれませんか？</p> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-11-20</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</footer> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLの問題ではなくスタイルシートの問題ですよ。 headerとnavigationをfixedで指定すれば良いです。
