質問: ### 前提・実現したいこと main と rightを全体的に大きくしたいです。 main:width 70%/right:width 30% と記述するも間の幅が広い。 ### 発生している問題・エラーメッセージ CSSの記述が間違っていると思いますが、わからず... お手数ですが、ご教示いただけますと幸いです。 よろしくお願いいたします。 エラーメッセージ ### 該当のソースコード HTML タイトル query("select * from 4each_keijiban"); ?> トップ プロフィール このサイトについて 問い合わせ その他 掲示板 入力フォーム ハンドルネーム タイトル コメント fetch()){ echo ""; echo "".$row['title'].""; echo ""; echo $row['comments']; echo "posted by".$row['handlename'].""; echo ""; echo ""; } ?> 記事一覧 xxxxxxx xxxxxxx xxxxxxx xxxxxxx オススメ xxxxxxx xxxxxxx xxxxxxx xxxxxxx カテゴリ xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxxxxxxxxxxxxxxxx ```ここに言語名を入力 ソースコード CSS /* ------main------ */ .left { float: left; width: 70%; margin-bottom: 40px; } .left h2 { border-left: 5px solid black; border-bottom: 1px solid black; width: 70%; } body{ font-family: "Hiragino Kaku Gothic ProN","メイリオ",sans-serif; } h1{ margin: 0 auto; margin-top: 30px; margin-bottom: 20px; border-left: 4px red solid; /* background-color: #f1f1f1; */ padding-top: 5px; padding-bottom: 5px; padding-left: 15px; width: 70%; font-size: 20px; float: left; } form { margin: 0 auto; background-color: #fbfbfb; border: 3px #ebebeb solid; border-radius: 10px; width: 70%; margin: 0 auto;; float: left; } form div{ padding: 15px; } .text, textarea, .dropdown{ border: 1px solid #dfdfdf; padding: 5px; color: #999; background: #fff; } .submid{ border: 1px solid lightgray; padding: 4px 10px; color: white; background-color: #bfbfbf; border-radius: 5px; border-bottom: solid 2px gray; float: left; width: 70%; } /* ------title------ */ h3 { border-bottom: 1px solid lightgrey; width: 70%; } .contents { width: 70%; padding-top: 20px; background-color: #fbfbfb; border: 3px #ebebeb solid; border-radius: 10px; margin-top: 20px; } .title2 { width: 70%; padding-top: 20px; background-color: #fbfbfb; border: 3px #ebebeb solid; border-radius: 10px; margin-top: 10px; } /* ------right------ */ .right { float: right; width: 30%; margin-bottom: 40px; } .right h3 { border-bottom: 1px dashed black; } .right ul { list-style-type: none; margin-left: -35px; margin-top: -10px; line-height: 30px; } /* -----footer----- */ footer { clear: both; width: 100%; height: 60px; color: white; background-color: black; text-align: center; line-height: 60px; } ### 試したこと 対象文の見直しやブラウザの検証をし、修正を試しましたができませんでした。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: 横幅`width: 70%;`の要素の子要素にも`width: 70%;`が指定されている場合、 画面全体からすると49%くらいのサイズになってしまいます。右側に大きな余白が生じてしまっているのはそのためです。 ステップ1: `form`、`.submid`、`.contents`など、`.left`以外で`width: 70%;`を指定している箇所をすべてコメントアウトしてください。 これで、まずは広すぎる余白はなくなると思います。 ステップ2: 「ステップ1」を終えると今度は余白がゼロになるという問題が生じると思います。 以下のようにすることで、余白を作ることができると思います。 ``` .left { width: 65%; } ``` や ``` .left { width: calc(70% - 40px); /* 40pxが余白。好きなように調整してください。 */ } ``` いったん、上記で見た目を確認してほしいのですが、 `入力フォーム`や`..`については、 もしかしたら意図通りでないレイアウトになっているかもしれません。 その場合、`width: 70%`のコメントアウトを解除するか、 `float: left`をコメントアウトしてみるといいかもしれません。