- ベストアンサー
リキッドデザイン3カラム左端幅固定の個別スクロール
- リキッドデザインで幅3カラムのレイアウトをしようとしています。左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。IE9以下ではレイアウトが崩れますが、IE7以降で崩れずにレイアウトを完成させる方法はありますか？
- 中央と右カラムを完全に二分割のサイズにする方法も知りたいです。
- ご迷惑をおかけしますが、お知恵をお借りできないでしょうか。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
左側もスクロールさせるのなら、ずっと簡単に <!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"> <!-- html,body{background-color:gray; ＿margin:0;padding:0; } div.article{background-color:green; ＿height:400px;margin:0;paddig:0; ＿position:relative; ＿padding-left:178px; } div.main{background-color:yellow; ＿height:100%;margin:0; ＿position:relative; } div.contentTable,div.section,div.aside{overflow:auto;} div.contentTable,div.aside{ ＿position:absolute;top:0; ＿height:100%;margin:0; } div.contentTable{background-color:white; ＿width:178px; ＿left:0; } div.aside{background-color:fuchsia; ＿width:50%;right:0;} div.section{background-color:lime; ＿width:50%;height:100%; } div.section div.section{width:100%;height:auto;} --> ＿</style> </head> <body> ＿<div class="header" id="Top"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="article"> ＿＿<div class="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#Top">トップ</a></li> ＿＿＿＿<li><a href="#section1">一章</a></li> ＿＿＿＿<li><a href="#section2">ニ章</a></li> ＿＿＿＿<li><a href="#section3">三章</a></li> ＿＿＿＿<li><a href="#section4">四章</a></li> ＿＿＿＿<li><a href="#aside1">補足</a></li> ・・・【中略】・・・ ＿＿＿</ol> ＿＿</div> ＿＿<div class="main"> ＿＿＿<div class="section"> ＿＿＿＿<div class="section" id="section1"> ＿＿＿＿＿<h2>記事(1)</h2> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿</div> ＿＿＿＿<div class="section" id="section2"> ＿＿＿＿＿<h2>記事(2)</h2> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿</div> ＿＿＿＿<div class="section" id="section3"> ＿＿＿＿＿<h2>記事(3)</h2> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿</div> ＿＿＿＿<div class="section" id="section4"> ＿＿＿＿＿<h2>記事(4)</h2> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿</div> ＿＿＿</div> ＿＿＿<div class="aside" id="aside1"> ＿＿＿＿<h2>補足記事</h2> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer" id="documentInfo"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLとCSSはややこしいので見てません。なぜかはサンプルコードを見ればわかるでしょう。 「左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。」 だけから ★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 タブは＿に置換してあるので戻すこと。 <!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"> <!-- html,body{ ＿margin:0;padding:0; ＿background-color:gray;/* for test */ } div{border:solid 0.1px gray;} div.section{ ＿height:400px;margin-left:178px; ＿position:relative; ＿background-color:green;/* for test */ } div.section div.section{ ＿height:100%;width:50%;margin:0; ＿overflow:auto; ＿position:absolute;/* for IE7 */ ＿top:0; ＿background-color:yellow;/* for test */ } div.section div.section div.section{ ＿position:static;/* for IE7 */ ＿width:100%; ＿height:auto; ＿overflow:visible; ＿background-color:lime;/* for test */ } div.section div.contentTable{ ＿position:fixed; ＿width:178px;height:400px; ＿left:0; ＿background-color:white;/* for test */ } div.section div.aside{ ＿position:absolute; ＿width:50%;margin:0;height:100%; ＿overflow:auto;right:0;top:0; ＿background-color:fuchsia;/* for test*/ } --> ＿</style> </head> <body> ＿<div class="header" id="Top"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="section"> ＿＿<div class="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#Top">トップ</a></li> ＿＿＿＿<li><a href="#section1">一章</a></li> ＿＿＿＿<li><a href="#section2">ニ章</a></li> ＿＿＿＿<li><a href="#section3">三章</a></li> ＿＿＿＿<li><a href="#section4">四章</a></li> ＿＿＿＿<li><a href="#aside1">補足</a></li> ＿＿＿＿<li><a href="#documentInfo">文書情報</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="section"> ＿＿＿<div class="section" id="section1"> ＿＿＿＿<h2>記事(1)</h2> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿</div> ＿＿＿<div class="section" id="section2"> ＿＿＿＿<h2>記事(2)</h2> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿</div> ＿＿＿<div class="section" id="section3"> ＿＿＿＿<h2>記事(3)</h2> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿</div> ＿＿＿<div class="section" id="section4"> ＿＿＿＿<h2>記事(4)</h2> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿</div> ＿＿</div> ＿＿<div class="aside" id="aside1"> ＿＿＿<h2>補足記事</h2> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿</div> ＿<div class="footer" id="documentInfo"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
お礼
ありがとうございました！ いただいたサンプルを見てみたのですが、左カラムはスクロールしないようでしたので、 もう少しいじれないか試してみます。 やはりposition:fixedを多用すべきでは無いですかね。。。 かなり試行錯誤をして、ご回答のような使わないパターンも考えてみていたのですが、 どうにもうまくいっておらず。。。。 ともかくありがとうございました！
- Questa
- ベストアンサー率48% (13/27)
多重 DIV構造になってしまいましたが、とりあえず作ってみました。 IE9の表示は未確認です。 (HTML) <div class="contents"> <div class="nav">左ブロック</div> <div class="main-sub-w"> <div class="main-sub-in-w"> <div class="main">中央ブロック</div> <div class="sub-w"> <div class="sub">右ブロッック</div> </div> </div> </div> </div> (CSS) .contents { height: 300px; /* 適当 */ min-width: 980px; /* 178 + 401 + 401 */ } .nav { float: left; margin-right: -178px; overflow: auto; width: 178px; height: 100%; background: #fcc; } .main-sub-w { float: left; width: 100%; height: 100%; } .main-sub-in-w { margin-left: 178px; width: auto; height: 100%; } .main { float: left; margin-right: -50%; overflow: auto; width: 50%; height: 100%; background: #cfc; } .sub-w { float: left; width: 100%; height: 100%; } .sub { margin-left: 50%; overflow: auto; height: 100%; background: #ccf; }
お礼
ありがとうございます。 内容を確認してみたのですが、左カラムと中央カラムのスクロールバーが表示されてはいるのですが、 どうもうまくスクロールしないようです。 もう少し考えてみますね。
お礼
ありがとうございます！ やりたいことがほぼ実現できたと思います！！ 教えていただいたものを元に、ちゃんと動くか組み込んでみます。 どうもありがとうございました！