ベストアンサー

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

2012/06/08 10:47

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

kirinuma
お礼率75% (18/24)

HTML
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/08 15:07 回答No.3

間違えた・・ 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.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み、ウェブ標準の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>

質問者

お礼 2012/06/08 20:53

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

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/08 12:00 回答No.2

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=psy-ab&q=CSS+fixed+%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3&oq=CSS+fixed+%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3&aq=f&aqi=&aql=&gs_l=hp.3...4710.7830.1.8462.10.10.0.0.0.2.316.2320.2-9j1.10.0...0.0.WbvlnME0eaI&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=4fdea46fe12c4803&biw=1024&bih=615 ) →CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture ( http://www.css-lecture.com/log/css/037.html )の最下段のdemoとか・・