- ベストアンサー
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つ並べて、それぞれ文字を入れると定義してみたのですが、見事にレイアウトが崩れてしまいました。 こんな初歩的な事で質問するのも恐縮ですが、お分かりになる方いらっしゃいましたら教えて頂けないでしょうか。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No 2 です。 No 3様の書き込みを見て、質問者様の質問で、h1 と h2 の記述に関して、質問されている事に気に付きました。No2 の解答は単に、テーブルtタグで組まれているレイアウトを CSS 化しただけでした。 ソースを修正してみました。 基本的には同じ考え方で、h タグを囲んでいた div を無くしました。div を無くしたことで殆ど No 3様と同じになっています。違いを確認してみてください。 -- ここから -- <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>goo2</title> <style type="text/css"> <!-- div#wrap { text-align: centr; width: 800px; margin: 0 auto; /*background-color: #FFE;*/ } div#wrap h1 { float: left; font-size: 100%; width: 398px; margin: 0; padding: 0; background-color: #9CF; border: 1px solid #F00; } div#wrap h2 { float: right; font-size: 100%; text-align: right; width: 398px; margin: 0; padding: 0; background-color: #9CF; border: 1px solid #F00; } div#main { clear: both; width: 100%; margin: 0 auto; padding: 0; } --> </style> </head> <body> <div id="wrap"> <h1>タイトル１</h1> <h2>タイトル2</h2> <div id="main"> <p>本文が入ります</p> </div> </div> </body> </html> -- ここまで -- 最終的には、質問者様がどのような構成にしたいのかで、CSS も変わってくるのではないでしょうか。取りあえずテーブル構成を、CSS 化してみましたと言う例になると思います。
その他の回答 (3)
- abril
- ベストアンサー率69% (388/560)
色々方法はありますが、以下は一例として。 ANo.2様と考え方の基本は同じ様な感じです。できるだけマークアップが簡易になる様に心がけてみました。 【HTML】 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>サンプル</title> <link rel="stylesheet" type="text/css" href="css/sample.css" media="all" /> </head> <body> <div class="hoge"> <h1>タイトル1</h1> <h2>タイトル2</h2> </div> <p>本文が入ります</p> </body> </html> 【CSS】 body {←ここの設定はお好みで。 margin: 0; padding: 0; font-size: 12px; } div.hoge { zoom: 100%; width: 80%; background: #9cf; } div.hoge:after {←これは所謂clearfixというtipsを使用しています。 height: 0; visibility: hidden; content: "."; display: block; clear: both; } div.hoge h1, div.hoge h2 { width: 49%;←このパーセンテージはお好みで<h1>と<h2>で割合を変えたい様でしたら個別指定（足して100%未満で）して下さい。 margin: 0;←初期化していますが、上下の値はお好みで設定して下さい。 padding: 3px; } div.hoge h1 { float: left; font-size: 14px;←サイズは適当、相対指定でもかまいません。 } div.hoge h2 { float: right; text-align: right; font-size: 12px;←同上 } まあ、<h1>と<h2>だけで<div>で囲まれている、というのもマークアップ的にはすっきりしないのですが、今回のご依頼の場合、元のソースを見る限り実現したいイメージが「<h1>と<h2>が同じ背景色の一本の帯の中で左寄せ・右寄せで並び且つそれぞれの見出しが折り返してもお互いの領域に重ならない」といった感じだと思いましたので、それだと入れ子構造にしないとちょっと難しいものがありました。 <h1>が<h2>に横並びに続くだけでいいのなら、display: inline;を使えば済む話なのですが、それだと背景色が幅一杯にはなりませんし、<h2>の方を右寄せにする、というのもできなくなります。<h1>と<h2>をfloatで横並びにしただけだと、今度は高さがなくなる為、背景色がレンダリングされなくなります。 上記は一部環境でしか実際の検証はしておりませんので、不具合ある様でしたら補足して下さい。 なお蛇足ですが「CSSのマークアップ」とか「html(テーブル)をCSSにマークアップする」とは言いません。マークアップというのは、HTMLが”マークアップ言語だから”使う用語であり、CSSには使いません。
お礼
ありがとうございます。 折角書いて頂いたのですが、何故かブラウザエラーになって上手く表示されません。 詳細な解説助かりました。
- nori_007
- ベストアンサー率35% (369/1048)
以下のような感じでしょうか。 -- ここから -- <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>goo</title> <style type="text/css"> <!-- div#wrap { text-align: centr; width: 800px; margin: 0 auto; /*background-color: #FFE;*/ } div#title1 { float: left; width: 398px; margin: 0; padding: 0; background-color: #9CF; border: 1px solid #F00; } div#title2 { float: right; text-align: right; width: 398px; margin: 0; padding: 0; background-color: #9CF; border: 1px solid #F00; } div#main { clear: both; width: 100%; margin: 0 auto; padding: 0; } --> </style> </head> <body> <div id="wrap"> <div id="title1"> <h2>タイトル１</h2> </div> <div id="title2"> <h2>タイトル2</h2> </div> <div id="main"> <p>本文が入ります</p> </div> </div> </body> </html> -- ここまで -- イメージを判りやすくする為、タイトルの部分を 1px の線で囲んでみました。 出来る事で有れば、CSS で躓いた所を具体的に質問された方が良いと思います。ご確認ください。
- font_color
- ベストアンサー率45% (24/53)
tableを使わないでソースのの内容を表示させたいということでしょうか？ <h1>や<h2>はdisplay プロパティが初期状態で block になっているためなので、inline に変更して <div style="width:80%;background:#95CCFF;height:高さ"> <div style="float:left"><h1 style="display:inline;">タイトル1</h1></div> <div style="float:right"><h2 style="display:inline;">タイトル2</h2></div> </div> <div style="width:80%;clear: both;"> 本文が入ります </div> としてはどうでしょうか？
お礼
ありがとうございます。 要はCSSで例に挙げたレイアウトを表現したいという事なのです。 そしてタイトル1とタイトル2は同一線上で左右に位置し、且つ違うスタイルで表現したいのです。 説明が下手で申し訳ありません。色々試してみます。
お礼
一度ならず二度までも御丁寧にありがとうございます。 ほぼイメージ通りです。 ボックスを二つ並べるという方法はやってみたのですが、何故かレイアウトが崩れてしまって… とても助かりました。