ベストアンサー

2カラムの左固定、右変動幅にするには？

2011/07/14 14:23

CSS初心者です。ページ幅に合わせて右カラムの幅を変えたいのですが左カラムを固定にして右カラムだけ変動させるにはどのようにしたら良いですか? カラム全体をBOXで囲んで幅を決めてその中で左カラムの幅を固定にして右カラムの幅を100％としたところ右カラムのフローティングが崩れて左カラムの下に表示されてしまいます。

akaginoyama
お礼率88% (635/715)

CSS
回答数6
ありがとう数4

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

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

ベストアンサー

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

2011/07/15 19:08 回答No.6

ウェブ標準--文書構造に従ったHTMLとCSS、WAI---だと、後で好きなようにデザインを変更できます。i-padでのアクセスが多ければ、i-pad用のものを作ればよい。だからといってi-pad用にHTML用に書き直す必要もない。携帯電話用のスタイルシート(media="tty")も追加できる。このHTMLは、点字端末、読み上げブラウザ(スクリーンリーダー)、テレビ・・いずれもOK そしてなによりもCSSも簡潔。 [CSS] 2column_navTop.css @charset "Shift_JIS"; div.header, div.section, div.footer{ ＿min-height:100px; ＿max-width:1020px; ＿margin-top:20px; } div.header{ ＿text-align:center;background-color:yellow; } div.section{ ＿padding-right:210px; } div.section div.annotation div.article{ ＿width:200px; ＿position:absolute; ＿top:140px; ＿right:0; ＿height:300px; } div.section div.annotation div.nav ol, div.section div.annotation div.nav ol li{ ＿display:block; ＿list-style:none; ＿line-height:20px; ＿height:20px; ＿margin:0;padding:0; } div.section div.annotation div.nav ol{ ＿position:absolute; ＿top:0;left:0; ＿width:100%; } div.section div.annotation div.nav ol li{ ＿width:18%; ＿float:left; ＿text-align:center; ＿margin-right:2px; } div.section div.annotation div.nav ol li a{ ＿display:block; ＿width:100%;height:100%; ＿text-decoration:none; ＿background-color:green; } div.section div.annotation div.nav ol li a:hover{ ＿background-color:yellow; }

質問者

お礼 2011/07/21 22:21

ORUKA1951さま度々の回答誠に恐れ入ります。まだまだ、解らない所はたくさんあり、課題が残りますが。見よう見まねでなんとかなりました。教えて頂いた知識は、使いこなせるようになりたいと思います。

その他の回答 (5)

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

2011/07/15 19:02 回答No.5

ちょっと時間が取れたので・・たぶんIE5以上に対応できる。ポイントは ★HTMLはデザインのためじゃない。文書構造をマークアップするもの　<div class="wraper">のような非セマンティクなマークアップはなかなかなくなりません。そのため、タグスープと揶揄されるマークアップがいまだに多い。 ★きちんとマークアップされていれば、HTMLもCSSもシンプルで、しかも好きなようにデザインできる。 ※それによって、CSSはHTMLを見なくてもメンテナンスできます。他の端末、検索エンジンにも中身が伝わる ※3種類のスタイルシートが選択できる。(表示→スタイル) ※携帯電話も印刷もOK ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input" ) ★W3C CSS 検証サービス ( <a href="http://jigsaw.w3.org/css-validator/#validate_by_input" ) で検証済み。 ★＿はタブに戻す。 [HTML] <!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"> ＿<link rel="stylesheet" type="text/css" href="./CSS/default.css"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./CSS/2column.css" title="2カラム"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS/3column.css" title="3カラム"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS/2column_navTop.css" title="メニュートップ"> ＿<style type="text/css" media="screen">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<p> ＿＿＿文書構造に従ったマークアップとスタイルシートのサンプルです。＿＿</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<p>これはテストだよ。これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<div class="annotation"> ＿＿＿<div class="nav"> ＿＿＿＿<ol> ＿＿＿＿＿<li><a href="./">トップ</a></li> ＿＿＿＿＿<li><a href="./new/">新製品</a></li> ＿＿＿＿＿<li><a href="./product">製品</a></li> ＿＿＿＿＿<li><a href="./profile/">会社案内</a></li> ＿＿＿＿＿<li><a href="./contactUs/">コンタクト</a></li> ＿＿＿＿</ol> ＿＿＿</div> ＿＿＿<div class="article"> ＿＿＿＿<h3>脚注</h3> ＿＿＿＿<p>記事</p> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="document-version"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2011-07-10 12:00:00 (JST)</dd> ＿＿</dl> ＿</div> </body> </html> [CSS]default.css @charset "Shift_JIS"; html,body{margin:0;padding:0;} p{text-indent:1em;line-height:1.5em;margin:0} div{border:gray 1px solid;} [CSS]2column.css @charset "Shift_JIS"; div.header, div.section, div.footer{ ＿min-height:100px; ＿max-width:1000px; } div.header{ ＿text-align:center;background-color:yellow; } div.section{ ＿position:relative; ＿padding-left:210px; } div.section div.annotation{ ＿width:200px; ＿position:absolute; ＿top:0;left:0%; ＿height:100%; } [CSS]3column.css @charset "Shift_JIS"; div.header,div.section,div.footer{ ＿min-height:100px; } div.header{ ＿text-align:center;background-color:yellow; } div.section{ ＿position:relative; ＿padding:0 210px; } div.section div.annotation{ ＿border-color:red; ＿width:100%; ＿position:absolute; ＿top:0;left:0; ＿height:100%; } div.section div.annotation div.nav, div.section div.annotation div.article{ ＿width:200px; ＿position:absolute; ＿height:100%; } div.section div.annotation div.article{ ＿right:0; ＿color:green; } 続きは次回・・・

DrFell
ベストアンサー率55% (305/551)

2011/07/14 19:49 回答No.4

質問文が矛盾してます。 ★希望 1.ページ幅にあわせる。 2.左固定、右変動 ★実際 1.全体をboxで囲んで幅を決め 2.左固定、右100％（え、100％？何に対して100％か分かってる？親要素に対してだから、そりゃー左と右が100％の中に両立できなくって落っこちるでしょう。） ★提案 1.変動ということなので、％で全体の幅を決め 2.右100％を外す。ものすごくシンプルな形（手抜きとも）だとこんな形 html <div class="wrap"> <div class="sub">左コラムがいろいろ</div> <div class="main">右コラムがいろいろ</div> </div> css .wrap{margin:0 10%;} .sub{width:10em;float:left;} .main{margin-left:11em;} 検索エンジンで「css 段組」などを検索すると、解説やテンプレートなど沢山ヒットすると思います。いろいろな方法があります。対応させるブラウザによっても変わってきます。背景の有無、対応範囲や崩れ方、問題点などそれぞれのやり方に長所も短所もありますので、いろいろ調べてから、どれを選ぶか決められるといいと思います。

質問者

お礼 2011/07/21 22:35

回答ありがとうございます。 >100％か分かってる。ここを間違って解釈してました。親要素の最大幅さえキチンと指定していれば、内包要素はなんとかなるだろうと言うことがそもそも間違っていたようです。

nobuoka
ベストアンサー率69% (23/33)

2011/07/14 18:09 回答No.3

同じ見た目にするにも、色々な方法があるので一概に何が正しいということはないですが。。 > 外側のブロックの配置にはfloatは使うべきではありません。本文中でfloatが使えなくなる。まあこれはそのとおりで、float を使わないで実現できるなら float は使わないほうがいいと思います。 > 本文中の挿絵とか、リストを並べるときとか限定して使うべき。基本はabsoluteです。ただ、position: absolute が万能かというとそんなことは全然なくて、position: absolute で配置された要素はないものとして後続要素が配置されるので、position: absolute を指定した要素のサイズが縦に長い場合などに別の要素と重なったり、はみ出してしまう、というような問題も起きます。 CSS3 が使えるなら display: box という選択肢もありますが、当面は float を使うのが便利なのではないかと私は思っています。そんなわけで float を使った場合の 2 カラムの方法ですが、親ボックスに固定幅にしたいカラムの幅分の padding をブロックの左側に設定して、その padding の部分に固定幅のカラムを置く、という手法がわりと汎用性が高くて便利だと思います。具体的なコードは参考 URL のような感じになります。もちろん状況によって最適な手法は異なるので、この方法が必ずしも良いとは限りません。

参考URL：: http://www.vividcode.info/sample/2011/0714_col2_left_fixed.html

質問者

お礼 2011/07/21 22:26

サンプルページまで作成して頂き感激です。的確な回答で解りやすくベストアンサーに選ばせて頂きたいくらいです。回答ありがとうございました。

k0021
ベストアンサー率26% (32/120)

2011/07/14 18:06 回答No.2

<div style="position:relative;height:70px;"> <div style="position:absolute;left:90px;width:243px;background-color:red; font:22px/69px 'ＭＳ明朝',serif;">上　奉造営</div> <div style="position:absolute;top:11px;left:333px;width:95px;background-color:blue; font:18px/24px 'ＭＳ明朝',serif;">穂積権現<br>少彦名大神</div> <div style="position:absolute;left:428px;width:auto;background-color:yellow; font:22px/69px 'ＭＳ明朝',serif;">二柱神社</div></div> ３段の段組ですが　最後の幅は、auto　指定して下さい。ポジショニング(位置を指定)で無いと質問内容は、出来ないと思います。

質問者

お礼 2011/07/21 22:23

ポジショニング理解できました。回答ありがとうございます。

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

2011/07/14 15:45 回答No.1

「この様にしようとしてこの様にマークアップした」考え方が根本的に違います。　HTMLは文書構造(見出し、記事、引用)をマークアップするもので、プレゼンテーションとは無関係です。というより、きちんとマークアップされていたら如何様にもデザインできます。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。外側のブロックの配置にはfloatは使うべきではありません。本文中でfloatが使えなくなる。本文中の挿絵とか、リストを並べるときとか限定して使うべき。基本はabsoluteです。 ★以下のソースは、タブインデントを＿に置換してあるので戻すこと ★作成中の文書の構造をしっかりマークアップすること。デザインは考えない。 ★それさえ出来てりゃ好きにデザインできます。けっしてデザインのためにHTMLを書かないこと。 ★携帯電話だとスタイルなしで表示される。 <!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> ＿＿＿最小450px、最大1020px,通常90%幅の左寄せサンプルです。＿＿</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./">トップ</a></li> ＿＿＿＿<li><a href="./new/">新製品</a></li> ＿＿＿＿<li><a href="./product">製品</a></li> ＿＿＿＿<li><a href="./profile/">会社案内</a></li> ＿＿＿＿<li><a href="./contactUs/">コンタクト</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<p>これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿＿<p>これはテストだよ。内容はテキストだよ。</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="document-version"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2011-07-10 12:00:00 (JST)</dd> ＿＿</dl> ＿</div> </body> </html>

2カラムの左固定、右変動幅にするには？