非スクロールのサイドバー

解決済

質問者：kirinuma
質問日時：2012/06/08 10:47
回答数：3件

サイドバーだけ固定させ（非スクロール）、メインのコンテンツはスクロールさせるようなＨＰを作りたいです。参考になるＵＲＬを教えて下さい。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2012/06/08 15:07

間違えた・・

HTML5用、HTML4.01用共に
#content_Table{position:fixed;top:200px;left:5px;width:30%;}
ですみです。
HTML4.01なら
body>div.section>*{margin-left:31%;}
5なら
body>section{padding-left:31%;}
で左を開けておく。色々な書き方がある。

ごく簡単な例です。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み、ウェブ標準のHTML4.01strict + CSS2.1です。
タブは＿に置換してあるので戻すこと。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

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

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1 id="TOP">サンプル</h1>
＿</div>
＿<div class="section">
＿＿<h2>本文</h2>
＿＿<div class="section" id="section1">
＿＿＿<h3>第一章</h3>
＿＿＿<p>・・</p>
＿＿</div>
＿＿<div class="section" id="section2">
＿＿＿<h3>第二章</h3>
＿＿＿<p>・・</p>
＿＿</div>
＿＿<div class="section" id="section3">
＿＿＿<h3>第三章</h3>
＿＿＿<p>・・</p>
＿＿</div>
＿＿<div id="content_Table">
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="#TOP">トップ</a></li>
＿＿＿＿<li><a href="#section1">1章</a></li>
＿＿＿＿<li><a href="#section2">2章</a></li>
＿＿＿＿<li><a href="#section3">3章</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

時間をかけ、回答してもらい心より感謝しています。
これ以上の回答はないと言う位、私にとってとても勉強になりました。
よろしければ、今後とも宜しくおねがいします。

通報する

お礼日時：2012/06/08 20:53

No.2

回答者： ORUKA1951
回答日時：2012/06/08 12:00

position:fixed;です。

サイドバーとか・・・今のウェブではあまり勧められない考え方です。今後HTML5が普及すると文書構造と言う考え方が大事になります。

　それで質問を読み替えると
「目次をウィンドウの左に表示し、長い本文をスクロールしても常にウィンドウの左側に表示し続けたい」
　となります。
HTMLは、HTML5の場合
<body>
　<header>
　　ヘッダ
　</header>
　<section>
　　<section id="section1">
　　　<h2>第一章</h2>
　　　<p>・・</p>
　　</section>
　　<section>
　　　<h2>第一章</h2>
　　　<p>・・</p>
　　　・・・
　　</section>
　　<div id="content_Table">
　　　<ol>
　　　　<li><a href="#section1">1章</a></li>
　　　　<li><a href="#section2">2章</a></li>
　　　　<li><a href="#section2">3章</a></li>
　　　</ol>
　　</div>
　</section>
　<footer>
　</footer>
</body>

HTML4.01の場合
<body>
　<div class="header">
　　ヘッダ
　</div>
　<div class="section">
　　<div class="section" id="section1">
　　　<h2>第一章</h2>
　　　<p>・・</p>
　　</div>
　　<div class="section">
　　　<h2>第一章</h2>
　　　<p>・・</p>
　　　・・・
　　</div>
　　<div id="content_Table">
　　　<ol>
　　　　<li><a href="#section1">1章</a></li>
　　　　<li><a href="#section2">2章</a></li>
　　　　<li><a href="#section2">3章</a></li>
　　　</ol>
　　</div>
　</div>
　<div class="footer">
　</div>
</body>

と書くことになります。

その上で、スタイルシートで
HTML5用
section div.contentTable{position:fixed;top:200px;left:5px;width:30%;}
HTML4.01用
div.section div.contentTable{position:fixed;top:200px;left:5px;width:30%;}
とすればよいだけです。

資料は
★css fixed ナビゲーション - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&sclient … )
→CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture ( http://www.css-lecture.com/log/css/037.html )の最下段のdemoとか・・