崩れてしまうcssのレイアウトを修正したいです。

やりたいこと

・添付画像の右側の飛び出している白枠を長方形に成型したい。

IE、Chromeで画面を確認して同様の事象が発生し、googleで調べて行き詰ってしまったのでこちらでご質問させてください。初歩的な知識不足による質問になり申し訳ございません。
皆様のお力添えいただければ幸いです。
どうぞよろしくお願いいたします。

<!DOCTYPE html>
<html lang=“ja”>
  <head>
    <meta charset=“UFT-8”>
    <title>CSS</title>
    <style>
      body {
        background: #eeeeee;
      }
      div {
        background: #ffffff;
        width: 300px;
        padding: 10px;
        text-align: center;
        margin: 30px auto;
      }
    </style>
  </head>
  <body>
    <div>
    <h1>CSS入門</h1>
    <p>はじめてのCSS</p>
    <div>
  </body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

右にちょこんと出ている変な四角を消したいということでしょうか?

恐らくdivタグの終了タグが無いから、divタグが自動で二つ作成されていると思います。
なので二つ目の<div>を</div>にしてみてください。

html
1<!DOCTYPE html>
2<html lang=“ja”>
3  <head>
4    <meta charset=“UFT-8”>
5    <title>CSS</title>
6    <style>
7      body {
8        background: #eeeeee;
9      }
10      div {
11        background: #ffffff;
12        width: 300px;
13        padding: 10px;
14        text-align: center;
15        margin: 30px auto;
16      }
17    </style>
18  </head>
19  <body>
20    <div>
21    <h1>CSS入門</h1>
22    <p>はじめてのCSS</p>
23    <div> ←ここを</div>にしてみてください。
24  </body>
25</html>

投稿2020/11/15 07:24

987654321

総合スコア28

Rinriinrinrin

2020/11/15 07:41

miyazawakentoさん迅速なご回答ありがとうございます。 <div>の終わりを</div>にしていないと今回の様な右側に四角が出てしまうのですね。分かりやすいご説明で納得しました！ありがとうございます。

987654321

2020/11/15 07:51

> <div>の終わりを</div>にしていないと今回の様な右側に四角が出てしまうのですね。正確には終了タグである</div>が無いので、ブラウザでは ```html <body> <div> <h1>CSS入門</h1> <p>はじめてのCSS</p> <div></div> </div> </body> ``` とdivタグの中にもう一つdivタグが勝手にできてしまっていました。勝手に出来てしまったdivタグにcssが当てられてしまったので、今回のような感じになってしまっていました。

行動規範の内容に同意します