- ベストアンサー
カラムの高さの調整方法
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
双方に、相手の高さを適用させる方法はありません。通常は、static以外の直近の親コンテナブロックのサイズを参照して指定します。(親コンテナブロックにはmin-heightを設定しておく) メニューの量が異なる場合は、<head></head>内のスタイルシートでmon-heightを指定すると良いでしょう。また、bodyまたはsectionに対してclassで指定しても良いでしょう。 「その都度変わる高さをメニューの数で等分するする事は出来るでしょうか？」のは、親コンテナブロックの高さの%指定で可能ですが、ブロックの寸法はpadding辺の内側ですから、borderや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> <!--container部分終わり--> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> 【例2】 <div id="container"> <div id="contents"> 本文 </div> <div id="sidebar"> サイド部分 </div> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> </div> <!--container部分終わり-->
- ベストアンサー
- 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サービス）
お礼
お互いをお互いに参照して高さを変えるのは不可能ですか。。 やはり、どちらかを最低限の高さに設定して、 相手がその高さを超えると延びるようにするしかないですよね。。。。 子ブロックにpaddingを設定してる(したい)ので、 その辺を含めて等割にしたいと考えてるのですが難しいですよねぇ。 回答ありがとうございました。