• ベストアンサー

CSS ２カラムの可変

画像のような方法はありますでしょうか？ 宜しくお願いします。

画像を拡大する
  • CSS
  • 回答数2
  • ありがとう数15

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

普通にwidth:autoでよいです。

okogedesuga
質問者

お礼

ORUKA1951　様 width:autoで出来ました。 今まで使った事が無かったので、思いつきませんでした(´-｀;) No.2もご丁寧にありがとうございました。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

簡単なサンプル ★タブは＿に置換してあるので戻す。 ★HTML5のときは<div class="header"></div>などはそれぞれ<header></header>になる。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済みの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"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{ width:80%;min-width:630px;max-width:900px; margin:0 auto;padding:5px; } div.section{position:relative;} div.section div.nav{ position:absolute; left:30px;/* ★位置 */ top:0; width:298px;/* ★幅 */ border:solid green 1px; } div.section h2, div.section p, div.section div.section{ width:auto;/* ★width:auto;*/ min-width:0;margin:0 30px 0 360px;/* ★左右のマージン */ line-height:1.6em;background-color:white; border:solid 1px green; } div.section div.section p{margin:0;} div.section div.section{min-height:200px;} /* 説明 */ div.section div.nav:before, div.section div.nav:after, div.section h2:after{ content:"←→\A 30px"; text-align:center; display:block; white-space:pre; position:absolute;top:0; font-size:12px; font-weight:normal; } div.section h2:after{right:0;} div.section div.nav:before{left:-30px;} div.section div.nav:after{right:-30px;} div.section div.nav ol:before{ content:"←───300px──→\A";white-space:pre; } div.section div.nav{background-color:white;} body{background-color:gray;} div.header{background-color:aqua;} div.section{border:solid 1px green;padding:3px;} div.footer{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li>リスト</li> ＿＿＿＿<li>リスト</li> ＿＿＿＿<li>リスト</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-02-27</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSS 可変マージン

    画像のように、マージンを可変する方法はありますか？ 宜しくお願いします。

    • 締切済み
    • CSS
  • CSS カラム落ち

    Wordpressでホームページを作成しているのですが、画面をズーム縮小するとカラム落ちします。 画像のような感じで、ズーム縮小すると真ん中の緑の３つが右に寄って行き、最終的に一番右側の緑が下に行ってしまいます。 これはどのようにすれば防げるのでしょうか？ 教えてください

    • ベストアンサー
    • CSS
  • ３カラム→２カラムになるhtml・cssの書き方

    ３カラム→２カラムになる、html・cssの書き方について、ご教授お願いします。 ブログで、左サイド（サブ）、センター（メイン）、右サイド（サブ）を制作しています。 トップページは３カラム校正。 詳細記事（２階層目）に入ると、右サイドはなくして、その分センターを右に伸ばしたいと思っています。 ※文章だとわかりづらいので、図にしてみました。 http://kiyu0228.web.fc2.com/sample.gif このように制作したい場合、html・cssをどのように書くのが最適でしょうか？ ちなみに、SEO対策のため、htmlでのdivの書き順は、 センター（メイン）→左サイド（サブ）→右サイド（サブ）で書き表したいです。 また、なるたけ右サイドをコメントオフ、または削除するだけで、反映される書き方が望ましいです。 いろいろと条件が多くて申し訳ござません…。 ご教授いただけると、幸いです。 どうぞよろしくお願いいたします。

    • 締切済み
    • CSS
  • CSSで、縦の高さを可変にする方法

    ┌───┐ │□□□│ │■●■│ │□□□│ └───┘ このような形のボックスがあり、●を囲む左右のボックス（■）に、背景画像を設定しております。 ●は毎回高さの値が変わる画像なのですが、 ┌───┐ │□□□│ │■●■│ │■●■│ │■●■│ │■●■│ │■●■│ │■●■│ │□□□│ └───┘ このように、●の高さによって、左右の■も縦に伸びるようにするにはどうしたらよいでしょうか？ ■の部分のボックスのheightを、100%のリアクティブにしたり、Autoにしたりしても、 ┌───┐ │□□□│ │■●■│ │　 ● 　│ │　 ●　 │ │　 ●　 │ │　 ●　 │ │　 ●　 │ │□□□│ └───┘ このようになってしまい駄目でした。 どなたがご教授お願いします。

  • 【CSS】左右可変、中央固定の３カラムレイアウト

    ボックス３つを横一列に、 center：画面中央配置、幅は900px固定 left：残りの左領域全て（幅可変） right：残りの右領域全て（幅可変） というレイアウトをしたいのですが、CSSでの指定方法が解らず困っています。 ２カラムや左右固定・中央可変の３カラムレイアウトは様々なサイトで解説されているのですが、 このパターンは中々無いようで見つかりませんでした。 良い方法をご教示いただければと思います。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • CSSを使って3カラムにしたいのですが・・・。

    現在CSSを使って、2カラムのページを作っています。 これを今回3カラムにしようとしているのですが、うまく並んでくれません。 現在はA.Bというボックスを作って並べています。左からA.Bとします。最初にBのボックスを読み込ませたいので最初にBを書いて、次にAを持ってきて左に来るようにさせています。ですので見た目はABと並んでいますがソースはBAとなっています。 そこで今回Cというボックスを一番右に持ってこようと奮闘しているのですが、AとBの間にきたり、変な一番上のほうに表示されたりして、一番右に来てくれません。 どこにどのような記述をすれば、一番右にもう1個表示できるようになるでしょうか？？

    • ベストアンサー
    • HTML
  • ２カラムで固定幅＋可変幅のCSSは？

    ２カラムのデザインで、左のカラムは幅が200px、右のカラムは幅が可変（100%から200pxを引いた値）にするにはどうすればいいのでしょうか？ なお、右カラムの中身の文章はごくごく少量のときもありえます。 以上、よろしくお願いします。

    • ベストアンサー
    • CSS
  • 2カラムレイアウトでサイズ可変なCSSレイアウ

    例えば、右、左の２つのエリアにわかれた２カラムレイアウトで、真ん中の境界線を右左にずらすことで、ウィンドウサイズはそのままでエリアの領域が可変になるようなレイアウトをCSSなどで実現したいです。 「ウィンドウサイズ　可変」などで検索すると、１つのウィンドウサイズの可変、レスポンシブデザインやリキッドデザインなどの解説はたくさん出てくるのですが、意図することのページがでてきません。 以下のページが実際にやりたいことに似ているのですが、４つのエリアに分かれた領域を自由にサイズを大きくしたり、小さくしたり変更できます。 http://jsfiddle.net/hrfmmymt/f8zs5wsv/ コードを読んでいけば、どうやってやればいいのかわかるかもしれませんが、できれば簡単なサンプルで解説したサイトがあれば助かります。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • CSSで横方向の可変ボックスの作り方

    [ ]　←画像（縦方向のグラデーション） [ テキスト ] [ テキストテキストテキスト ] 上記のようにテキストの量によって自動で背景画像が可変するような CSS指定をしたいのですが、これって可能でしょうか？ 縦の可変はわかるのですが、横の可変がわかりません… すみませんが、わかるかたいましたらご教授お願いします。

  • CSS:3カラム センター固定

    質問させてください。 コンテンツを挟んで左右違う背景をつけたウェブサイトを作ろうと思います。 3カラムのうちセンターのカラムだけは900px固定の中央配置で 左右のカラムはウィンドウ幅に合わせて可変幅にしたいのですが、 HTMLを <div id="left_box"> <!-- left background --> </div> <!-- /left background --> <div id="main"> <!-- main contents --> <div id="header"></div> <div id="contents"></div> <div id="footer"></div> </div> <!-- /main contents --> <div id="right_box"> <!-- right background --> </div> <!-- /right background --> としたときのCSSの適用の仕方について教えてください。 左右カラムには縦に長い異なった画像をbackground-imageで 横にタイルしていく方法にしようと思っています。 よろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する