- ベストアンサー
HTMLとCSSの記述で表示がうまくされません
現在HTMLとCSSを使ってウェブのページを作っているのですが どうしても思ったように表示が出来ません。 HTMLの他にCSSの記述を記載致しました。 なにが出来ないかと申しますと 下記の <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> 記述部分を枠の中に入れたいのですが、どうしても外に出て表示されてしまいます。 どなたか解決方法をご存知の方はお教え頂けないでしょうか？ HTMLの記述がこちらになっております。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <meta http-equiv="Content-Type"content="text/html;charset=shift_jis"/> <head> <title>aaaa</title> <meta http-equiv="description"content="bbbb"> <meta http-equiv="keywords"content=""> <link rel="stylesheet" type="text/css" href="index.css" media="all"> </head> <body> <p class="head"><span lang="en"></span></p> <h1></h1> <div class="img"><img src="header.gif" alt="" width="800" height="165"></div> <div class="menu"> <a href="index.html"><img src="navi_top.gif" width="195" height="35" alt="top"></a> <a href="02.html"><img src="navi_ijime.gif" width="195" height="35" alt=""></a> <a href="03.html"><img src="navi_shokuba.gif" width="195" height="35" alt=""></a> <a href="04.html"><img src="navi_plofile.gif" width="195" height="35" alt=""></a> </div> <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> <p class="text_bg"> <div class="text">text</div> </p> </body> </html> CSSの記述がこちらになっております。 body{ text-align:center; width:800px; } p{ text-align:center; font-size:0.85em; color:#333333; } p.head { font-size:0.6em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight:bold; color:#666666; text-align:left; margin-bottom:0px; } .img{ margin-top:0; margin-bottom:0; } .menu { padding-left:1px; margin-bottom:0; margin-top:0; } h1{ font-size:0.5em; display:none; } h2{ font-size:0.5em; display:none; } h2 img{ vertical-align:middle; } .mark{ margin-right:10px; } .section{ font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; margin-bottom:0px; margin-top:0px; background-image:url(back_01.gif); background-repeat:no-repeat; width:800px; height:165px; color:#666666; font-size:1em; } p.01{ text-align:center; font-size:1.05em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } p.text_bg{ background-image:url(back_02.jpg); background-repeat:no-repeat; margin-top:10px; width:800px; height:365px; } .text{ margin-top:10px; text-align:center; }
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
> <p class="section"> > <h2>解決できる方法</h2> > <img src="mark.gif" alt="*" width="14" height="18"><font > color="#FF0000">再短時間と最小の労力で職場や学校のマルマ > ルが解決できる方法!!</font> p要素(段落)の中にh要素(見出し)が現れるなんてあり得ないので、 h要素が現れた時点で直前の段落は終了したものと見なします。だ から、class="section"の枠の中身は空っぽです。 class="menu"のようにリストであるべきところをdivで描くのでは なく、今回のように見出しと段落をセットで扱いたいところをまと めるのが、正しいdivの使い方ですよ。 <div class="section"> <h2>解決できる方法</h2> <p><img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマ ルが解決できる方法!!</font>中略</p></div> でやってみてください。
その他の回答 (2)
- reverie013
- ベストアンサー率18% (26/143)
横槍失礼。 ★どうなって欲しいのがどうずれているのか。 ☆font要素ではなく、strongやem要素を使用して強調する。 ↑CSSをお使いならわかると思いますが、 strongやemにCSSで指定を加えれば、同様のことがマークアップとしても適切にできます。 No.2の方へ 私も気になる時は多々あるし、自分がtypoしていることもありますが、 基本的にはわざわざ『突っ込みだけ』はしませんよ。 回答するついでに、ちょこっと注意を促すことならありますけどね。
- okmotokun
- ベストアンサー率59% (92/155)
回答ではなく、失礼を承知で一筆啓上させていただきますが、「再短時間」というのは意味を成さない言葉ではありませんか。 こういう変換ミス？が気になるのは私だけでしょうか。
補足
さっそくのご回答ありがとうございます。 こちらでさっそく確認をさせて頂きました。 こちらでご指摘通りに書いてみたのが <div class="section"> <h2>いじめが解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間解決できる方法!!</font> <br />心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">『マルマル』</font>対処法とは？ </p></div> になるのですが、枠内に移ることが出来ました！ ありがとうございます。 一点質問があるのですが、枠内には入ったのですが、 枠の中で文字の位置がずれてしまいます。 こちらはどのように修正をしたら宜しいのでしょうか？ 大変お手数ですがご返答頂けましたら幸いです