- ベストアンサー
カラムの高さの調整方法
- 本文の領域の高さをメニュー領域の高さに合わせる方法をご紹介します。
- メニューの高さを本文領域の高さに合わせる方法をご紹介します。
- メニューの数でメニュー領域の高さを等分する方法をご紹介します。
- みんなの回答 (6)
- 専門家の回答
関連するQ&A
- Perlでcssを使わないで3カラムにしたい
現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム(三段組み)、最下部をフッターにしたいと考えています。 現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか? 横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。 お手数をおかけ致しますが、アドバイスよろしくお願い致します。
- ベストアンサー
- Perl
- 2カラムレイアウトをサイドバーとコンテンツとで、別のファイルで作りたい。
CSSを利用して2カラム(サイドがメニューで、中央がコンテンツ)のレイアウトを作りたいのですが、そういったレイアウトを作ろうとすると通常一つのhtmlファイルの中でメニューとコンテンツをそれぞれ<div>でくくって、CSSでそれぞれの<div>に対してレイアウトを指定することで2カラムを実現すると思います。 メニューとコンテンツで別のファイルに書いたものを、表示させたいのですが、どうすれば実現できるでしょうか? よろしくお願いします。
- ベストアンサー
- 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
- CSSレイアウトの2カラム左メニューでコンテンツを先にHTMLに記述できる方法をおしえてください。
趣味でHPを作成しております。 一般的なCSSレイアウト2カラム左メニューにしたいのですが、 HTML部分で左メニューよりコンテンツを先に記述し、 CSSで左メニューで右にコンテンツがくるようにしたいです。 現在の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; } このような記述です。 つづきましてHTML部分は <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部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをHTML部分を変えずにCSSでメニューを左に配置する方法はありますでしょうか? 1週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。
- ベストアンサー
- 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
- 3カラムのレイアウトにおいて・・・
こんにちわ、サイトを趣味で作っている者です。 最近よくあるCSSでの3カラムレイアウトで作成してます。 上部にヘッダーその下にメニューとコンテンツ部分という構成ですが、 あるサイトにおいて、どのページを開いても、 ヘッダ部分とメニュー部分が表示されるようにアップしたので、 メニュー部分に追加があった時は、 全ページのメニュー部分を書き換えないといけない状態です。 1ページだけ更新したら良い様な作り方とか、 またアプリケーションってあるんでしょうか? 大変な労力で困っています。 よろしくお願いします
- ベストアンサー
- HTML
- ちょっとSEO意識した3カラムWEBサイトの作り方
こんにちは。 WEBページ作成の初心者で、CSSとHTMLを使ったちゃんとしたHTMLを書き始めてからまだ3~4ヶ月といったところの者です。 (高校一年です) 質問内容は題のとおりです。 現在の状況を簡単に説明すると、 HTMLの記述がヘッダ⇒左メニュー⇒真ん中のコンテンツ⇒右カラム⇒フッタ という感じになっています。 で、左メニューとコンテンツと右カラムにフロートを設定してます。 ↑の一番の問題点は、h1タグの次にh3タグが着てしまうことだと思います。 そこで、これじゃまずいと思い、TOPページからいじり始めました。 しかし、この方法でよいのかがわからないので、すべてのページに反映する前に質問させてください。 http://wingnovel.web.fc2.com/ ↑ここのサイトです。 TOPページのみ(と作者についてのページ)は、コンテンツを『左右のmarginをautoに指定』してセンタリングし 左右のカラムをpositionプロパティでうまく持ってきています。 しかし、これだと問題があり、コンテンツのたての幅が左右のカラムよりも短いと、左右のカラムがフッタに突き刺さってしまいます。。。(作者についてのページが若干そうなっています…実際にはフッタの前に広告があるのでたいした問題ではなさそうですが) ただ、実際のところ、小説の長さが左右のカラムよりも短いということはありえなさそうなので…このサイトに関してはこの方法でも大丈夫だと思うのですが、他のサイトに流用できそうにもないので… 他にも、SEO的に[最悪]という点がこのサイトにおいてありましたら、教えていただけないでしょうか? ひとつきになるのですが、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; }
- 締切済み
- ブログ
- 2カラムのホームページを作っているのですが
質問お願いします。 右にメニューリストを作って左側にコンテンツを表示させる2カラムのホームページを作っています。 現在、右の側のメニューリストはPHPのinclude機能を使って呼び出しています。 しかし、PHPの動作が遅くページが表示されるまでちょっと時間がかかります。(2~3秒ですが、体感でかなり遅く感じる) なので現在PHP以外の方法で呼び出す方法を考えています。 直接それぞれのページに表を書く方法はメニューの追加が大変なので止めました。 perlなども似たような物だと思うので、できればHTMLやCSSの機能でやりたいのですが、無理でしょうか? 詳しい方、よろしくお願いします。
- 締切済み
- その他(インターネット・Webサービス)
お礼
先ほど試してみました。 確かにメニューが間延びするのは良くない感じです。 質問の回答という事では良い感じでしたのでベストアンサーとさせていただきますが、 右の本文の中に項目が入っているのを本文に本文内容を記述し、 項目の領域を削除したらフロートが落ちたのと、 本文が領域からはみ出してしまいました。 なのでちょっとそのまま改造して使うのが難しいです。 別の質問が生じてしまいましたので一度閉じて質問の仕方を変えて質問させて頂きます。