Q&A
コードブロックの使い方ですが、グラーブアクセント3つに挟まれている行の間にソースを入力してください。
```ここに言語を入力
// ここにCSSとかHTMLとかのコードを入れる
```
前提・実現したいこと
main と rightを全体的に大きくしたいです。
main:width 70%/right:width 30% と記述するも間の幅が広い。
発生している問題・エラーメッセージ
CSSの記述が間違っていると思いますが、わからず...
お手数ですが、ご教示いただけますと幸いです。
よろしくお願いいたします。
エラーメッセージ
該当のソースコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <?php mb_internal_encoding("utf8"); $pdo = new PDO("mysql:dbname=lesson01;host=localhost;","root",""); $stmt=$pdo->query("select * from 4each_keijiban"); ?> <script src="script.js"></script> <div class="logo"><img src="4eachblog_logo.jpg"></div> <!-- -----header----- --> <header> <ul> <li>トップ</li> <li>プロフィール</li> <li>このサイトについて</li> <li>問い合わせ</li> <li>その他</li> </ul> </header> <!-- ---------------- --> <!-- ------main------ --> <main> <div class="left"> <h2>掲示板</h2></div> </main> <!-- ---------------- --> <!-- -----right------ --><!-- ------form------ --> <h1>入力フォーム</h1> <form method="post" action="insert.php"> <div> <label>ハンドルネーム</label> <br> <input type="text" class="text" size="35" name="handlename"> </div> <div> <label>タイトル</label> <br> <input type="text" class="text" size="35" name="title"> </div> <div> <label>コメント</label> <br> <textarea cols="35" rows="7" name="comments"></textarea> </div> <div> <input type="submit" class="submit" value="投稿"> </div> </form> <!-- ------kiji------ --> <?php while($row = $stmt->fetch()){ echo "<div class='kiji'>"; echo "<h3>".$row['title']."</h3>"; echo "<div class='contents'>"; echo $row['comments']; echo "<div class ='handlename'>posted by".$row['handlename']."</div>"; echo "</div>"; echo "</div>"; } ?>
<!-- ---------------- --> <!-- -----footer----- --> <footer> xxxxxxxxxxxxxxxxxxxxx </footer> <!-- ---------------- --> </body> </html><div class="right"> <h3>記事一覧</h3> <ul> <li>xxxxxxx</li> <li>xxxxxxx</li> <li>xxxxxxx</li> <li>xxxxxxx</li> </ul> <h3>オススメ</h3> <ul> <li>xxxxxxx</li> <li>xxxxxxx</li> <li>xxxxxxx</li> <li>xxxxxxx</li> </ul> <h3>カテゴリ</h3> <ul> <li>xxxxxxx</li> <li>xxxxxxx</li> <li>xxxxxxx</li> <li>xxxxxxx</li> </ul> </div>
ソースコード 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/ツールのバージョンなど） ここにより詳細な情報を記載してください。
HTMLコードも提示してください。
ありがとうございます。
HTMLコード記入いたします。
回答1件
0
ベストアンサー
横幅width: 70%;の要素の子要素にもwidth: 70%;が指定されている場合、
画面全体からすると49%くらいのサイズになってしまいます。右側に大きな余白が生じてしまっているのはそのためです。
ステップ1:
form、.submid、.contentsなど、.left以外でwidth: 70%;を指定している箇所をすべてコメントアウトしてください。
これで、まずは広すぎる余白はなくなると思います。
ステップ2:
「ステップ1」を終えると今度は余白がゼロになるという問題が生じると思います。
以下のようにすることで、余白を作ることができると思います。
CSS
1.left { 2 width: 65%; 3}
や
CSS
1.left { 2 width: calc(70% - 40px); /* 40pxが余白。好きなように調整してください。 */ 3}
いったん、上記で見た目を確認してほしいのですが、
<h1>入力フォーム</h1>や<form>..</form>については、
もしかしたら意図通りでないレイアウトになっているかもしれません。
その場合、width: 70%のコメントアウトを解除するか、
float: leftをコメントアウトしてみるといいかもしれません。
投稿2020/04/23 11:58
編集2020/04/24 22:49
総合スコア4528
ご教示いただきありがとうございます。
思った通りのレイアウトになりました！！
あなたの回答
tips
プレビュー
