- ベストアンサー
DIVでの段組でhight属性の設定方法
abrilの回答
- abril
- ベストアンサー率69% (388/560)
＃この質問は繰り返し出てくるので、過去の回答例も参考になさってみては。 > Cの縦の長さに関係なく、Bの縦の長さを連動させてBとDの間をあけないようにする BとCは親子関係にあるわけではなく並列なだけなので、BとCを連動させて高さを合わせる、という考え方は（今の仕様の）CSSでは成り立たないと思います。 それはさておき、見た目をご希望通りにする方法は何通りかあります。よく知られていると思われるテクニックをいくつかあげておきます。既出の回答と一部重なりますが補足的な事も含みますので、ご容赦下さい。 (1)BとCの親要素であるEのbackgroundに、BとCの背景をくっつけて1枚にした画像を指定する。BとCにはbackgroundは指定しない。 これは先の回答者様がお答えになっている方法で、実際にはBとCの高さは揃っていませんが、2カラムの背景色・背景画像が親要素の方に背景画像として描画されている事で、擬似的にBとCの高さが常に揃っている様に見える、という簡単な理屈です。最近も同様のご質問があり、そちらの方に詳細を書きましたのでご参考までに。 【参考】http://okwave.jp/qa/q5908706.html ただし、この方法にも欠点はあります。例えば、それぞれのカラムにborderを指定してしまうと見せかけの高さと実質的な高さが揃っていない事がばれてしまうので、borderでカラムを囲む様なスタイルの場合は不向きです（その場合はborderっぽく見せる背景画像を用意したり等々、ちょっと工夫が必要になります）。 (2)BとCの高さを揃えるJavaScriptを使う No.2の回答者様も紹介してくださっているheightLine.jsが有名ですね。高さを揃えたいコンテナブロックに所定のルールにのっとったclass名を指定するだけで、自動的にカラムの高さを計算して揃えてくれるので、非常に簡単に使えます。リロードする際には一瞬伸縮する動作が見えますが気にする程のものではないと思います。 (3)ネガティブ・マージンとoverflowの合わせ技 BとCに padding-bottom: 32768px; margin-bottom: -32768px; という巨大な正負の数値を指定して高さを揃えた上で、親要素Eに overflow: hidden; を指定してはみ出し分をカットする、という方法です。詳細は下記に紹介されています。 http://coliss.com/articles/build-websites/operation/css/558.html ただ、かなり強制的な方法の為か、一部で印刷の不具合などが出る場合もある様です。 (4)2カラムの領域を重ねてずらす こちらの詳細も上記と同じサイトで紹介されていますので、ご覧になってみて下さい。 http://coliss.com/articles/build-websites/operation/css/1591.html 確かにこの方法であれば作者の言うとおり、古いIEを含むほとんどのブラウザに対応しつつCSSハックも使わず、(1)の様な画像の手間をかける事無く、(2)の様にJavaScriptを使用する必要もありませんね。文法的にもValidです（個人的にはちょっと入れ子構造が増えるのが気になりますが）。
関連するQ&A
- DIVの崩れを防ぐには
図のように<div>で段組を作った場合、このままだとウィンドウの幅を狭めた時に、 CのブロックがBの下に回りこんでしまうと思うのですが、 これを防ぎたい場合はやはりA・B・CもしくはB・Cをさらにブロックで囲うしか 方法はないでしょうか？
- ベストアンサー
- HTML
- xhtml+cssでdivをdivで内包する
xhtml+cssでウェブサイトを作成しています。 その際、 <div id="a"> <p>題名</p> <div class="b">内容</div> <div class="b">内容</div> </div> のようにdiv要素内にdiv要素を内包したいと思っています。 しかしこのままだと親であるdiv id="a"を、子であるdiv class="b"がはみ出してしまいます。 ｃｓｓハックを使用する方法が http://www.alink.co.jp/tech/blog/2009/04/13/css-clearfix%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fdiv%E3%81%AE%E6%AE%B5%E7%B5%84%E3%81%BF%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/ に掲載されていましたが、ＩＥ７とＩＥ－ＭＡＣが対象のようです。 これと同じような効果が得られるもので、ＩＥ６以降、Ｆｉｒｅｆｏｘ２以降、Ｆｏｄｏｒａそれぞれに対応している方法はありますでしょうか？ 私がどうしたいのか少しわかりにくいかもしれませんが、上記ＵＲＬでどうしたいのかはわかると思います。 アドバイスお願い致します。
- ベストアンサー
- CSS
- pとdivのどちらが良いでしょうか？
pタグとspanタグとdivタグの使い分けがよくわからないので http://techmemo.biz/html/p%E8%A6%81%E7%B4%A0%E3%80%81div%E8%A6%81%E7%B4%A0%E3%80%81span %E8%A6%81%E7%B4%A0%E3%81%AE%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84/ を読んだのですが、それでもよくわかりません。 私がやりたい事はindexページにタイトルを表示したいのですが 文字の装飾はしたいです。 でも文字全部に色を付けてサイズを調整したいだけなので spanタグで文字の中の一部の装飾ではないです。 この場合 pとdivのどちらが良いでしょうか？ ページの上部に ～サイトの名前～ みたいにしたいです。
- 締切済み
- HTML
- IE5*でもCSSで画像を横に並べる方法を・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml version="1.0" encoding="Shift_JIS" ?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><style type="text/css"> <!-- .box_a{ } .box_b{ } .box_c{ float:left; width:80px; background-color:#c8ffdb; } .box_d{ float:left; width:10px; background-color:#c8ffdb; } --> </style> </head> <body> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> </body> </html> 上記のコードをブラウザで見るとIE6では隙間なく並んでいるのですが、IE5.01,IE5.5で見ると画像の間に隙間が空いてしまっています。 IE5*でもCSSで画像を横に並べる方法をご存じの方、教えてください。 お願いします (_ _)人。
- 締切済み
- HTML
- divを追加すると下に隠れてしまう
<div id="a"> <div id="c">もともとある枠</div> <div id="d">タグ</div> </div> <div id="b"> 公開 </div> 上記のような縦に並んだdiv要素があり id="d"のdivはjavascriptであとから追加されるページがあるのですが dが追加されるとbの下に隠れてしまいます。 z-indexが指定されているわけでもなく、 bにclear:both;を指定してみても隠れてしまいます。 どなたか解決の方法ご存知の方いらっしゃいませんでしょうか。 些細なことでもお心当たりがあれば教えていただきたいです。 ちなみに環境はiphone4 ios6.2 safariです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- ２段組レイアウト時に意図しない空白が生じる
IE6.0 と firefox での動作が異なって困っています。 HTMLおよびスタイルシートは以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> * { margin: 0; padding: 0; } div.area_body { width: 80%; margin: 0 auto; background-color: yellow; } div.area_navi { float: left; width: 100px; background-color: red; } div.area_content { margin-left: 100px; background-color: blue; } div.block1 { background: green; } div.block2 { background: blue; } --> </style> </head> <body> <div class="area_body"> <div class="area_navi"> aaa<br> aaa </div> <div class="area_content"> <div class="block1"> a <br /> <div class="block2"> b <br /> c <br /> </div> d </div> </div> </div> </body> </html> IE 6.0 (win) における右段の文字 a b c d firefox (win) における右段の文字 a b c d となり、IEは左段に文字がある場合に右段の文字が微妙にインデントされてしまいます。 firefoxの結果が自分が望む動作なのですが、原因は何でしょうか？ アドバイスをお願いします。
- ベストアンサー
- HTML
- CSSの書き方について
全体を<div class="a">で囲み、その中に、以下のような配置で、<div class="b">,<div class="c">,<div class="d">を、入れ子にしたいと思っています。 ｂとｃは、単純に位置を指定すれば、思うような配置になったのですが、ｄについては、位置を指定しても、ｃの下に配置されてしまいます。 ｄがｂ、ｃの横に配置されるようにするには、どのような設定をしたらよいのでしょうか？ ＣＳＳを使い始めたばかりの素人で、くだらない質問かもしれませんが、何卒よろしくお願いします。 ＋－－－－a －－－－＋ ｜○○○○○○□□□｜○:b ｜○○○○○○□□□｜●:c ｜○○○○○○□□□｜□:d ｜●●●●●●□□□｜ ｜●●●●●●□□□｜ ｜●●●●●●□□□｜ ＋－－－－－－－－－＋
- ベストアンサー
- CSS
- エクセルで#DIV/0!を消す方法
エクセルでパーセンテージを計算する表を作成しています。 Ａ１に日付、Ｂ１に会員数、Ｃ１に出席者数、Ｄ１に出席率とします。Ｄ１にＣ１/Ｂ１の数式を入力します。Ｄ１の数式を隣のＤ２～Ｄ１０までコピーしました。Ｂ，Ｃ行が空白または０の場合、#DIV/0!と表示されます。数式はそのまま残しておいてこのエラー表示を消す方法はありませんでしょうか。
- ベストアンサー
- オフィス系ソフト
- 【CSS】class属性とid属性の使い分けについて
ＣＳＳの勉強をしているのですが、 任意の範囲にスタイルを設定する [class属性]と[id属性]の使い分け について、どのように解釈したら 良いか、今一すっきり飲み込めません。 W3Cの定義によれば、idの場合は、一つ のHTML文書内で１度しか呼び出す事が できないことになっているようです が、たった１度しか呼び出す事の できないid属性は、どのような場合に 使ったらよいですか？ 宜しくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- wordで真ん中に線を引きたい（段組み）
word2000を使っています。 A4縦の用紙に縦中央に線を入れて、2段の段組みを入れたいのです。 段組みの設定をして、文字を打てば中央に線がひかれていきますが、下まで文字がない場合線が引かれないですよね？仮に用紙の下まで文字がない場合でも、中央に線を引きたいのですが、段組みではできないのでしょうか？ 段組みを使わない場合の方法として、罫線を引くとか、表を使って中央だけ残して周りを消すとかくらいしか思いつかないのですがほかにいい方法はありますでしょうか？ちなみに、線は全ページに引きます。 よろしくお願いします。
- ベストアンサー
- オフィス系ソフト
お礼
みなさま回答ありがとうございます。 まとめての返信お許し下さい。 色々方法を教えて頂いた#4様にベストアンサーをつけようかとも思ったのですが、 今回#2様が先に教えて頂いた方法で解決しましたので、今回は#2様に付けさせていただきます。 色々な方法が分かり大変助かりました。 みなさまありがとうございました。