カラムの高さの調整方法

2023/10/23 21:21

このQ&Aのポイント

本文の領域の高さをメニュー領域の高さに合わせる方法をご紹介します。
メニューの高さを本文領域の高さに合わせる方法をご紹介します。
メニューの数でメニュー領域の高さを等分する方法をご紹介します。

ベストアンサー

カラムの高さ

2012/06/22 02:48

2カラムのサイトを外部CSSを使って記述しているのですが、左にメニュー(ナビゲーション)の領域があり、右に本文(コンテンツ)の領域があります。このメニューの領域と本文の領域の高さで質問があります。本文の長さがマチマチで、長い時もあれば短い時もあります。本文の長さが短い場合は本文の領域の高さが低くなり、本文が長い場合は高くなります。こういう状況下での質問なのですが、本文が短い場合は本文領域の高さをメニュー領域の高さに合わせ、本文が長い場合はメニューの高さを本文領域の高さに合わせて、短い領域の方を長い領域の方の高さに合わせるようにしたいのですが、どのようにすればいいでしょうか？あとメニュー領域なのですが、その都度変わる高さをメニューの数で等分するする事は出来るでしょうか？

ujicha0909
お礼率51% (76/148)

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

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

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

ベストアンサー

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

2012/06/23 18:58 回答No.5

＞本文領域の高さが1000pxを超えて1500pxになったらメニュー領域も1500pxになります。そうしたら各メニューのブロックは150pxづつ等割になります。　position:absoluteですから、その子供のブロック要素はサイズを参照できますからheight:10%でよいです。　サンプルは、とても簡単で、かつウェブ標準で、当然文書構造も弄らなくて済む方法。 ★Another HTML-lint gateway ( http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。 ※タブは＿に置換してありますから元に戻すこと。　サンプル見てもわかるように、でも変じゃない？？。　本文が長いと、メニューが「だら～ん」と長くなって利用し辛くなる。 <!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>サンプル</h1> ＿</div> ＿<div class="section" id="S1"> ＿＿<h2>本文</h2> ＿＿<div class="section" id="S1-1"> ＿＿＿<h3>第１項</h3> ＿＿＿<div class="figure"> ＿＿＿＿<p>挿絵</p> ＿＿＿</div> ＿＿＿<p>2カラムのサイトを外部CSSを使って記述しているのですが、左にメニュー(ナビゲーション)の領域があり、右に本文(コンテンツ)の領域があります。</p> ＿＿＿<p>このメニューの領域と本文の領域の高さで質問があります。</p> ＿＿＿<p>本文の長さがマチマチで、長い時もあれば短い時もあります。本文の長さが短い場合は本文の領域の高さが低くなり、本文が長い場合は高くなります。</p> ＿＿</div> ＿＿<div class="section" id="S1-2"> ＿＿＿<h3>第２項</h3> ＿＿＿<div class="figure"> ＿＿＿＿<p>挿絵</p> ＿＿＿</div> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section" id="S1-3"> ＿＿＿<h3>第３項</h3> ＿＿＿<div class="figure"> ＿＿＿＿<p>挿絵</p> ＿＿＿</div> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section" id="S1-4"> ＿＿＿<h3>第４項</h3> ＿＿＿<div class="figure"> ＿＿＿＿<p>挿絵</p> ＿＿＿</div> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="nav" id="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#S1-1">１項</a></li> ＿＿＿＿<li><a href="#S1-2">２項</a></li> ＿＿＿＿<li><a href="#S1-3">３項</a></li> ＿＿＿＿<li><a href="#S1-4">４項</a></li> ＿＿＿＿<li><a href="#S1-5">５項</a></li> ＿＿＿＿<li><a href="#S1-6">６項</a></li> ＿＿＿＿<li><a href="#S1-7">７項</a></li> ＿＿＿＿<li><a href="#S1-8">８項</a></li> ＿＿＿＿<li><a href="#S1-9">９項</a></li> ＿＿＿＿<li><a href="#S1-10">10項</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

質問者

お礼 2012/07/04 05:29

先ほど試してみました。確かにメニューが間延びするのは良くない感じです。質問の回答という事では良い感じでしたのでベストアンサーとさせていただきますが、右の本文の中に項目が入っているのを本文に本文内容を記述し、項目の領域を削除したらフロートが落ちたのと、本文が領域からはみ出してしまいました。なのでちょっとそのまま改造して使うのが難しいです。別の質問が生じてしまいましたので一度閉じて質問の仕方を変えて質問させて頂きます。

その他の回答 (5)

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

2012/06/23 19:02 回答No.6

肝心なこと忘れてました。「メニューを１０分割」と言う時点で、最低限の高さは絶対に必要になりますから、本文にdiv.section{min-height:100px;} div.section{min-height:0;} を入れておかないと・・・　それで「本文が短くてもメニューの高さに合わせて」「本文が長いときはメニューがそれに合わせて」を両立できます。

質問者

お礼 2012/06/30 03:09

回答ありがとうございます。急にPCの前に座る時間が確保できなくなり、回答を試す時間がなくなりまして。後程試させて頂きます。

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

2012/06/23 06:17 回答No.4

要は表の様にというイメージだと思うのですが、それなら表の様にという価を指定すればできます。この価はCss2からの物でそろそろ現実的かと思います。IE6等を視野に入れなければ使えます。 <style type="text/css"> body { background:#cccccc;/*コンテンツと視覚的に分けるため*/ } .contents{ display:table-row;/*テーブルの行の様にディスプレイする*/ background:#ffffff; } .contents>div{/*contents直接の子（孫は関係なし）*/ display:table-cell;/*テーブルのセルの様にディスプレイする*/ vertical-align:middle;;/*テーブルの行の中央に配置する*/ padding:2em; } </style>  <div class="contents"> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div> <p>ああああああああああああああああああああ</p> <p>いいいいいいいいいいいいいいいいいいいい</p> </div> <div> <ul> <li>1</li> </ul></div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div>

質問者

お礼 2012/06/30 03:10

回答ありがとうございます。急にPCの前に座る時間が確保できなくなり、回答を試す時間がなくなりまして。後程試させて頂きます。

質問者

補足 2012/07/04 05:22

先ほど試してみました。両脇にナビゲーションメニューがあるのと、 .contents>div{/*contents直接の子（孫は関係なし）*/ の部分が解釈できず迷ってしまいました。多分、私の質問の方向性が悪かったのだと思います。一度閉じて質問の仕方を変えて質問させて頂きます。

pofhal
ベストアンサー率0% (0/1)

2012/06/23 03:56 回答No.3

通りがかりの者です。あなたが求める結果と違っていたらすいませんなのですが、左右のカラムに収まっている文章や画像のボリュームが同じではなくても、左右のカラムをDIVで囲い、そのDIVに上手いこと背景画像をセットする事で「左右のカラムが同じ高さに見える」ようにする事は可能です。以下の参考URLに詳しい方法が載っていました。僕もよく使う手ですので、もし以下のページを読んでもちょっと分からんわぁ～って感じでしたら、また言っていただければ、少しはお役に立てるかも知れません。がんばってください。

参考URL：: http://likealunatic.jp/2007/04/04_column_layout.php

質問者

お礼 2012/06/30 03:07

回答ありがとうございます。急にPCの前に座る時間が確保できなくなり、回答を試す時間がなくなりまして。後程試させて頂きます。

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

2012/06/22 20:05 回答No.2

等割とはどういう意味でしょうか？　いずれにしても、その中身のmarginで指定すれば良いかと <body> 　<div class="header"> 　</div> 　<div class="section"> 　　<h2>見出し</h2> 　　<p>記事</p> 　　<div class="contentTable"> 　　　<ol> 　　　　<li></li> 　　　　<li></li> 　　　</ol> 　　</div> 　</div> 　<div class="footer"> 　　<h2>フッタ</h2> 　</div> </body> 　てしたら div.header,div.section,div.footer{width:80%;margin:0 auto;} div.section{position:relative;min-height:300px;} div.section div.contentTable{position:absolute;top:0;left:0;width:50%;} div.section>*{margin-left:50%;} とかでよいはずです。参考 ※floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7079628.html ) ※clearfixが出来ません… - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7334820.html )

質問者

補足 2012/06/23 17:46

メニュー領域の高さの最小が1000pxとして、 10個のメニューで等割にすれば100pxづつですが、本文領域の高さが1000pxを超えて1500pxになったらメニュー領域も1500pxになります。そうしたら各メニューのブロックは150pxづつ等割になります。全体が変化してもそれぞれのブロックが等しく分割されたようにしたいと思いまして。

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

2012/06/22 09:34 回答No.1

双方に、相手の高さを適用させる方法はありません。通常は、static以外の直近の親コンテナブロックのサイズを参照して指定します。(親コンテナブロックにはmin-heightを設定しておく) 　メニューの量が異なる場合は、<head></head>内のスタイルシートでmon-heightを指定すると良いでしょう。また、bodyまたはsectionに対してclassで指定しても良いでしょう。　「その都度変わる高さをメニューの数で等分するする事は出来るでしょうか？」のは、親コンテナブロックの高さの%指定で可能ですが、ブロックの寸法はpadding辺の内側ですから、borderやpaddingを指定しない形にする必要があります。

質問者

お礼 2012/06/22 17:29

お互いをお互いに参照して高さを変えるのは不可能ですか。。やはり、どちらかを最低限の高さに設定して、相手がその高さを超えると延びるようにするしかないですよね。。。。子ブロックにpaddingを設定してる(したい)ので、その辺を含めて等割にしたいと考えてるのですが難しいですよねぇ。回答ありがとうございました。

関連するQ&A

Perlでcssを使わないで3カラムにしたい
現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか？横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。お手数をおかけ致しますが、アドバイスよろしくお願い致します。
- ベストアンサー
- Perl
２カラムレイアウトをサイドバーとコンテンツとで、別のファイルで作りたい。
CSSを利用して２カラム（サイドがメニューで、中央がコンテンツ）のレイアウトを作りたいのですが、そういったレイアウトを作ろうとすると通常一つのhtmlファイルの中でメニューとコンテンツをそれぞれ<div>でくくって、CSSでそれぞれの<div>に対してレイアウトを指定することで２カラムを実現すると思います。メニューとコンテンツで別のファイルに書いたものを、表示させたいのですが、どうすれば実現できるでしょうか？よろしくお願いします。
- ベストアンサー
- HTML
フッターのボーダーが消えてしまいます（cssとhtmlで2カラムのレイアウト）
cssとhtmlで2カラムのレイアウトのウェブページを作っています。左のカラムがナヴィゲーションメニューになっています。フッターにborderを設定しているのですが、borderの上のラインが消えてしまうことがあります。 htmlはこんな感じです。 <div id="contents"> </div> <div id="side"> <ul id="menu"> <li>・・・</li> <li>・・・</li> <li>・・・</li> </ul> </div> <div id= "footer" > Copyright・・・ </div> 実験してみたところ、左メニューの</li>の後に文字なり画像なりを加えるとボーダーは正常に現れ、 </li>で終わってしまうと、ボーダーが消えてしまうようです。フッターに背景色をつけてみたところ、本来のフッターの領域からはみだして背景色がついていました。やはり、</li>の後になんらかの文字を入れると、適正な位置に背景色がつくのです。なぜでしょうか。
- ベストアンサー
- CSS
ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> 　メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、メニューが右になってしまいます。これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？１週間くらい試行錯誤したのですが、できませんでした。お詳しい方教えてください。
- ベストアンサー
- HTML
3カラムのレイアウト、及びdivの入れ子等
初めまして。とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。どうぞ宜しくお願い致します。下記のように、3カラムの段組みレイアウトを行いました。左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？可能な限りシンプルに、正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？（ひとつひとつの画像をdivの中に入れたり、横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造）は避けたいと思っておりましたが、もしかして、それがいちばん正しいのでしょうか…？ご存じの方、どうぞご指南の程宜しくお願い致します！散文、失礼いたしました！
- ベストアンサー
- HTML
３カラムのレイアウトにおいて・・・
こんにちわ、サイトを趣味で作っている者です。最近よくあるCSSでの３カラムレイアウトで作成してます。上部にヘッダーその下にメニューとコンテンツ部分という構成ですが、あるサイトにおいて、どのページを開いても、ヘッダ部分とメニュー部分が表示されるようにアップしたので、メニュー部分に追加があった時は、全ページのメニュー部分を書き換えないといけない状態です。１ページだけ更新したら良い様な作り方とか、またアプリケーションってあるんでしょうか？大変な労力で困っています。よろしくお願いします
- ベストアンサー
- HTML
ちょっとSEO意識した3カラムＷＥＢサイトの作り方
こんにちは。ＷＥＢページ作成の初心者で、ＣＳＳとＨＴＭＬを使ったちゃんとしたＨＴＭＬを書き始めてからまだ3～4ヶ月といったところの者です。（高校一年です）質問内容は題のとおりです。現在の状況を簡単に説明すると、ＨＴＭＬの記述がヘッダ⇒左メニュー⇒真ん中のコンテンツ⇒右カラム⇒フッタという感じになっています。で、左メニューとコンテンツと右カラムにフロートを設定してます。 ↑の一番の問題点は、h1タグの次にh3タグが着てしまうことだと思います。そこで、これじゃまずいと思い、ＴＯＰページからいじり始めました。しかし、この方法でよいのかがわからないので、すべてのページに反映する前に質問させてください。 http://wingnovel.web.fc2.com/ ↑ここのサイトです。ＴＯＰページのみ（と作者についてのページ）は、コンテンツを『左右のmarginをautoに指定』してセンタリングし左右のカラムをpositionプロパティでうまく持ってきています。しかし、これだと問題があり、コンテンツのたての幅が左右のカラムよりも短いと、左右のカラムがフッタに突き刺さってしまいます。。。（作者についてのページが若干そうなっています…実際にはフッタの前に広告があるのでたいした問題ではなさそうですが）ただ、実際のところ、小説の長さが左右のカラムよりも短いということはありえなさそうなので…このサイトに関してはこの方法でも大丈夫だと思うのですが、他のサイトに流用できそうにもないので… 他にも、ＳＥＯ的に[最悪]という点がこのサイトにおいてありましたら、教えていただけないでしょうか？ひとつきになるのですが、h1のような重要なタグに画像を指定してしまうのは大丈夫なのでしょうか？alt属性はもちろん指定してあるのですが… <h1><img src=/date/**.png" alt="**" width="**" height="**"></h1>という感じになっているはずです… なにかよい方法を教えていただけないでしょうか。
- ベストアンサー
- HTML
2カラムのレイアウト
2カラムのレイアウトにおいて、HTMLの記述部分において。【例1】コンテナーの「★外」に、フッターがある場合と。・「コンテナー(コンテンツ+サイドバー)」・「フッター」【例2】コンテナーの「★中」に、フッターがある場合。・「コンテナー(コンテンツ+サイドバー+フッター)」があるように思いますが? ★どっちでもいいんでしょうか? (どっちも、同じレイアウトになるんでしょうか?　そんな感じがします。)　 ^^ HTML/CSS　初心者なもので。。。よろしくです。　^^ ---------------------------------------------------------------- 【例1】 <div id="container"> 　　<div id="contents">　本文 </div>　　　<div id="sidebar">　サイド部分 </div> </div>　 　<div id="footer"> 　　<p>著作権</p> 　</div>  【例2】 <div id="container"> 　　<div id="contents">　本文 </div>　　　<div id="sidebar">　サイド部分 </div> 　<div id="footer"> 　　<p>著作権</p> 　</div>  </div>　
- ベストアンサー
- HTML
アメブロcss 3カラムを2カラムに変更の仕方
アメブロカスタマイズについて。現在アメブロの3カラムをcssを編集し2カラム右メニューにしようとしているのですが、上手く2カラム右メニューに表示出来ません。まずサイドバー項目を右に全てずらし、左は空とし、 #sub_a{display:none;}として、 #mainの幅を拡大し2カラム左メニューは問題なく出来たのですが、メニューを右にずらす事が出来ておりません。感覚としては#mainは動かせているのですが、#sub_bがびくともしないような感覚です。現在のcssは以下のようになっており、表示としては#sub_bも#mainも左に寄っており、 #sub_bの下に#mainが表示されている状態です。具体的にどの点を修正すれば2カラム右メニューとなりますでしょうか？ #main{ float:left; width:673px; left: 0px; top: 0px; } #sub_main{ width:100%; overflow:hidden; } #sub_a{ display:none; } #sub_b{ float: right; width:200px; margin-left: 688px; top: 0px; z-index: 100; }
- 締切済み
- ブログ
２カラムのホームページを作っているのですが
質問お願いします。右にメニューリストを作って左側にコンテンツを表示させる２カラムのホームページを作っています。現在、右の側のメニューリストはPHPのinclude機能を使って呼び出しています。しかし、PHPの動作が遅くページが表示されるまでちょっと時間がかかります。（２～３秒ですが、体感でかなり遅く感じる）なので現在PHP以外の方法で呼び出す方法を考えています。直接それぞれのページに表を書く方法はメニューの追加が大変なので止めました。 perlなども似たような物だと思うので、できればHTMLやCSSの機能でやりたいのですが、無理でしょうか？詳しい方、よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）

カラムの高さの調整方法

カラムの高さ