HTMLで一部だけスクロールするようにしたい

解決済

質問者：WhiteTigerteil
質問日時：2013/12/28 13:39
回答数：3件

HTMLで画像のような画面構成でタイトルとメニューを固定してメインの部分だけをスクロールするようにしたいのですがどのようにすればいいか教えてくれませんか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Bnbnbnta101
回答日時：2013/12/28 13:50

cssで指定すれば可能ですね。

overflowをscrollでいけます。
あとはiframeタグ使うとか。

- 2
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2013/12/28 18:26

簡単なサンプル

★<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">

＿</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">

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