- 締切済み
CSSでのページ構築につまずいてます
前にCSSの事で質問させて頂いたものです。（以下に質問内容） ---------------------------------- 質問させて頂きます。 只今テーブルレイアウトから脱却すべく、CSSでのレイアウトを練習中なのですが、以下のhtml(テーブル)をCSSにマークアップするところでつまずいてます。 <table width="80%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="3" cellpadding="0" bgcolor="#99CCFF"> <tr> <td><b><font size="+1">タイトル1</font></b></td> <td nowrap> <div align="right"><b>タイトル2</b></div> </td> </tr> </table> </td> </tr> <tr> <td>本文が入ります</td> </tr> </table> 問題なのはタイトル2を上手く挿入出来ない点です。 タイトル1は<h1>としてbackground-colorで色を敷いたのですが、タイトル2を<h2>と見出しとして定義すると、横並びに出来ません。 それならばと同じ色のボックスを横2つ並べて、それぞれ文字を入れると定義してみたのですが、見事にレイアウトが崩れてしまいました。 こんな初歩的な事で質問するのも恐縮ですが、お分かりになる方いらっしゃいましたら教えて頂けないでしょうか。 ↓質問ページのURL http://oshiete1.goo.ne.jp/qa4230033.html ---------------------------------- この質問に対し、様々なアドバイスを頂いて実践してみたのですが、実際のページに合わせてカスタマイズするとヘッダー部に隙間が出来たりしてしまいます。 恐らくこちらのカスタマイズのやり方が悪いのと、もっと詳細な実現させたいデザインを伝えていなかったせいだと思うので、今度は前回の質問時に自分なりに出来る所まで組んだソースを表示したいと思います。（以下ソース） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="description" content="省略" /> <meta name="keywords" content="省略,省略,省略" /> <meta name="robots" content="index,follow" /> <title>テスト</title> <base target="_self"> <style type="text/css"> h1 {font-size:1em; height:40px; background-color:#99CCFF} h1 img {vertical-align:middle } #nakami {width:79%; margin-left:auto; margin-right:auto } #honbun {margin-left:55px } p {font-size:0.8em; line-height:1.4} p img {float:right} </style> </head> <body> <div id="nakami"> <h1> <img border="0" src="cut1.gif" alt="カット1" width="53" height="40" /> タイトル </h1> <h2> 2008年8月7日(木） </h2> <div id="honbun"> <p> <img src="cut2.gif" alt="カット2" width="100" height="100" /> 本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります </p> </div> </div> </body> </html> ↑ごらんの通り、日付けが上手く収まっていません。 これを上の帯に右詰めで載せたいという質問でした。 教えて頂いたソースはボックスを二つ並べてタイトル1とタイトル2を入れるというものですが、borderを中の地色と同じにするとプレビューした時に隙間があいてしまいます。 前に答えてくださった回答者様には申し訳ないですが、再度質問させて頂きます。タイトル2を上手く収めるにはどうしたらいいのでしょうか。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
この場合日付はp要素でマークアップするのが妥当です。 横に並ぶ要素であるからと言って同じ要素を使う必要はありません。 headline要素はあくまで見出しなので。 それで横並びということですが、 <h2> 2008年8月7日(木） </h2> を <p class="date"> 2008年8月7日(木） </p> に書き換えて以下のcssを追加 .date { height:40px; margin-top:-40px; text-align:right; } 参考程度で。 cssの適用状態を知るためにbackgroundやborderで要素ごとに色別したりして視覚的に現状をまず把握してみてください。 その上でdisplayやfloat等をいじって表示確認(firefoxで)しながら作業していくとどうなっているのかわかりやすいですよ。
- nori_007
- ベストアンサー率35% (369/1048)
提示されたソースでは、h2 の定義がされていません、具体的にどのような定義をされたのでしょうか。 また、前回の質問の内容をよく検証してみてください。 厳しいようですが、ここでこの問題を乗り切れないと、CSS の理解は難しいと思います。ご呈示されたソースを、前回、回答して頂いたソースと見比べて、カスタマイズをしてみてください。
補足
当初タイトル2はh2の定義をしていましたが、そうするとタイトル1と同一線上に並ばないので、一旦外してあります。 そうですね…検証が足りないですね。 私もこの問題を乗り切らなければ今後ずっとつまずきっぱなしのような気がします。 再度質問する前に、もっと自分で考えます。ありがとうございました。