- 締切済み
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を上手く収めるにはどうしたらいいのでしょうか。
- mintia009
- お礼率74% (20/27)
- CSS
- 回答数2
- ありがとう数17
- みんなの回答 （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 の理解は難しいと思います。ご呈示されたソースを、前回、回答して頂いたソースと見比べて、カスタマイズをしてみてください。
関連するQ&A
- DreamWeaverでテーブルをCSSにした場合にずれます。
DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!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=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #wrap { width: 500px; } #content { float: left; width: 200px; background-color: #00CCCC; } #main { width: 300px; float: left; background-color: #99FF99; } #footer { clear: both; width: auto; background-color: #CCFF66; } --> </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。 ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。
- ベストアンサー
- HTML
- Dreamweaver デザインビューの表示が変
DreamweaverCS4を使っていますが、デザインビューに、テーブルの一番上のセルに張った画像しか表示されません。 ブラウザでプレビューすると綺麗に全体が表示されるのですが、デザインビューで編集がまったくできない状態なので困っています。 表示→ライブビューをクリックすると、デザインビューにも綺麗に表示されますが、編集は効かない状態です。 以下が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=UTF-8" /> <meta http-equiv="content-script-type" content="text/javascript"> <meta name="keywords" content="aaa"> <meta name="description" content="aaaaaa" /> <title>あいうえおかきくけこ</title> <link href="style/common.css" media="all" rel="stylesheet" title="CSS" type="text/css" /> </head> <body> <div id="pageBody"> <table width="700" border="0" align="center"> <tr> <td><center> <img src="style/top_image_a.png" /> </center></td> </tr> <table width="700" border="0" align="center" cellspacing="0"> <tr> <td bgcolor="#97E1A3">このサイトは？</td> </tr> <tr> <td bgcolor="#E8FECF">あいうえお</td> </tr> </table> <table class="table001"> <tr> <td width="130" rowspan="2"><img src="style/Btn_info_a.bmp" /></td> <td width="570"><h2>このサイトのごあんない</h2></td> </tr> <tr> <td valign="top"><p>このサイトの説明です。</p></td> </tr> </table> </table> </div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- CSSでテーブルを中央にする方法
CSSでテーブルを中央にする方法を教えてください いろいろなサイトで見た通りにしたのですが、どうしてもFirefoxではテーブルが中央によりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content=""> <meta name="keywords" content=""> <title>テーブル</title> <style type="text/css"> <!-- .tableley { margin-left: auto; margin-right: auto; text-align: center; } //--> </style> </head> <body> <div class="tableley"> <table cellpadding="0" cellspacing="0" summary="テスト" border="1"> <caption style="font-weight: bolder;">てすと</caption> <tbody> <tr> <td>てすと1</td> <td>てすと2</td> <td>てすと3</td> <td>てすと4</td> </tr> <tr> <td>てすと5</td> </tr> </tbody> </table> </div> </body> </html> 何が悪いのでしょうか？ <div align="center">にするしか方法がないのでしょうか？ 文法検証すると<div align="center">はあまりよくない使い方と指摘されてしまいます よろしくお願いします。
- ベストアンサー
- HTML
- Firefoxで崩れる
IE6.0 IE7.0では、問題なく表示されるのですが、Firefoxで 一部のページが右にずれてしまうのです。 問題点を教えていただけますと幸いです。 正常なページのソース <!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>XXXXXXXXXXXXXXXXXXXXXサイト</title> <META HTTP-EQUIV="Imagetoolbar" CONTENT="no"> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td height="95" colspan="2"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td width="213" rowspan="4"><a href="../index.html"><img src="../common/images/rogo.jpg" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2"><img src="images/" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td height="21" colspan="2" class="td-bar"> </td> </tr> <tr> <td width="556" height="111" valign="top"><table width="543" height="182" cellpadding="10" cellspacing="0" class="td-0e3758"> <tr> <td colspan="2" class="bottom-border0e3758"><strong>200X/XX/XX</strong></td> </tr> <tr> <td width="94" height="131"><img src="images/s_img.jpg" width="94" height="125" /></td> <td width="407" valign="top">テテキストテキスト</td> </tr> </table></td> ***************************** 崩れてしまう方 <!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>XXXXXXXXXX</title> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td width="758" height="95"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td rowspan="4"><a href="../index.html"><img src="../common/" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2" class="td-bar"><img src="images/blog-.gif" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td align="center"><table width="725" cellspacing="0" cellpadding="7"> <tr> <td colspan="2"> </td> </tr> <tr> <td width="37" align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td width="658" align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXXXXXXXXXXXXXX</td> </tr>
- 締切済み
- HTML
- 表示すると文字化けします
下記のファイルが表示されると文字化けしてエンコードを修正しないとみれませんなぜでしょうか？ 日本語EUCになってしまします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD bgcolor="#ffff00" width="699"><B><FONT size="+2">登録ありがとうございました</FONT></B></TD> </TR> <TR> <TD height="99" width="699"><B>■<A href="http*************************">使いこなすために</A>手順に沿って進んでください</B>→<A href="http**************************">次へ進む</A></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- 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つ並べて、それぞれ文字を入れると定義してみたのですが、見事にレイアウトが崩れてしまいました。 こんな初歩的な事で質問するのも恐縮ですが、お分かりになる方いらっしゃいましたら教えて頂けないでしょうか。
- ベストアンサー
- CSS
- xhtmlでvalignが反映されずこまっています。
xhtmlでvalignが反映されずこまっています。 はじめて質問させていただきます。こんにちは。 xhtmlで画面のちょうど真ん中に内容を配置したくて、試しているのですが どうしてもうまくいかないため、こちらで質問させていただいています。 <?xml version="1.0" encoding="Shift_JIS"?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta name="ROBOTS" content="NONE" /> <meta name="generator" content="mi" /> </head> <body> <table cellpadding="0" cellspacing="0" height="100%" width="100%"><tr valign="middle"><td align="center"> 内容テスト </td></tr></table> </body> </html> のように記述しているのですが、valignが反映されません。 なぜだかheightとwidthを400などの数値にしてみたら反映されました。 ですが、ほかの解像度から観覧しても、内容が真ん中に表示されるようにしたいです。 MacBook 10.6、miで作成しており、確認はfirefoxで行っています。 いろいろ検索してcssからvertical-alignやwidthやheightを指定したりも試したのですが、うまくいきません。 どなたかおわかりになる方がいらっしゃいましたら、ぜひ教えてください。 よろしくお願い致します。
- ベストアンサー
- HTML
- テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
#test1はちゃんとスクロールバーが付くのに、 テーブル内の設定したセルにはスクロールバーが付きません。 tableタグやth,tdタブにも設定したりと色々しましたが、 付きません。 なぜなのでしょうか。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test page</title> <style type="text/css"> table { background:yellow; } th,td { width:200px; border:solid 1px #000000; overflow:scroll; } #test1 { width:100px; overflow:scroll; } </style> </head> <body> テーブル <br /> <table> <tr> <th>見出し１</th><td>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</td> </tr> <tr> <th>見出し２</th><td></td> </tr> <tr> <th>見出し３</th><td>本文</td> </tr> </table> <div id="test1">あああああああああああああああああああああああああああああああああ</div> </body> </html>
- ベストアンサー
- HTML
- CSSのposition：fixedでIE6にも対応させたい Part.2
前回の質問でアドバイスを元に作ってみました。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>XYXYXYXYXY</title> <style type="text/css"> * { margin:0; padding:0; color:#FFFFFF; } body { background-color:#000000; text-align:center; } div#pagebody { width:684px;margin:25px auto; } span#a1 { position: fixed; bottom:50px; left:0px; right:0px; } h1 { font-size:44px; font-weight:bold; padding:25px; } div#left { width:342px; float:left; } div#right { width:342px; float:right; } </style> <!--[if lt IE 7]> <style type="text/css"> html {overflow: hidden;} body { height: 100%; overflow: auto; } span#a1 { position: absolute; } </style> <![endif]--> </head> <body> <div id="pagebody"> <h1>XXXXXXXXXX</h1> <div id="left">XYXYXYXYXY</div> <div id="right">XYXYXYXYXY</div> <div id="left">XYXYXYXYXY</div> <div id="right">XYXYXYXYXY</div> <table width="480" height="2000" border="1" cellspacing="5" cellpadding="5"> <tr> <td> </td> <td> </td> </tr> </table> <span id="a1"><a href="#"><img src="3top.jpg" width="240" height="95" border="20"></a></span> </div> </body> </html> 上記でFirefoxはほぼ完璧のようです。 jpgが見れませんが実際jpgを用意すると見れます。 （tableが何故かセンタリングしていませんが、、、スクロールバーで確認するためにtableを入れただけです。） 問題のIE6です。 IE6ではセンタリングが全く作用していません。 （tableは何故かセンタリングが作用しています、、、スクロールバーで確認するためにtableを入れただけです。） かなりの初心者なので何故XHTMLが出てきたのかさっぱり理解できませんが あとはIEのセンタリングだけなのでアドバイスお願いします！
- 締切済み
- HTML
補足
当初タイトル2はh2の定義をしていましたが、そうするとタイトル1と同一線上に並ばないので、一旦外してあります。 そうですね…検証が足りないですね。 私もこの問題を乗り切らなければ今後ずっとつまずきっぱなしのような気がします。 再度質問する前に、もっと自分で考えます。ありがとうございました。