前に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-transitio …
<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を上手く収めるにはどうしたらいいのでしょうか。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.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で)しながら作業していくとどうなっているのかわかりやすいですよ。
No.1
- 回答日時:
提示されたソースでは、h2 の定義がされていません、具体的にどのような定義をされたのでしょうか。
また、前回の質問の内容をよく検証してみてください。
厳しいようですが、ここでこの問題を乗り切れないと、CSS の理解は難しいと思います。ご呈示されたソースを、前回、回答して頂いたソースと見比べて、カスタマイズをしてみてください。
この回答への補足
当初タイトル2はh2の定義をしていましたが、そうするとタイトル1と同一線上に並ばないので、一旦外してあります。
そうですね…検証が足りないですね。
私もこの問題を乗り切らなければ今後ずっとつまずきっぱなしのような気がします。
再度質問する前に、もっと自分で考えます。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
Firefoxを使ってるのですがズー...
-
同じクラス名はつけないほうが...
-
cssで、テーブルのtdの中の文字...
-
vbscriptで時計を作りたい
-
リストの記号を括弧付きの文字...
-
テーブルのセル内の隙間を取れ...
-
Visual Studio で CLR 開発でデ...
-
Tableタグ内のspan styleが適応...
-
formのinputなどの幅100%指定
-
td要素内のdiv要素をセンタリン...
-
htmlで画像の上にテキストを表...
-
HTMLのテーブルでそれぞれの大...
-
HPに載せる写真にかっこいい...
-
ブラウザの文字サイズを変える...
-
Tableタグで作成した表の縮小
-
divで囲んだ文字が消える
-
TABLEのセルの中の文字を行単位...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
ブラウザによってテーブルのセ...
-
cssで、テーブルのtdの中の文字...
-
td要素内のdiv要素をセンタリン...
-
vbscriptで時計を作りたい
-
formのinputなどの幅100%指定
-
Firefoxを使ってるのですがズー...
-
テーブルの枠線に色が付かない
-
divで囲んだ文字が消える
-
TDタグ内での均等割付の仕方
-
表とリスト(ulとtable)の違い...
-
firefoxで「height: 100%;」と...
-
<img>タグにCSSのclass設定可能?
おすすめ情報