main と right 全体的に大きくしたいです！！

前提・実現したいこと

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> <ul> <li>トップ</li> <li>プロフィール</li> <li>このサイトについて</li> <li>問い合わせ</li> <li>その他</li> </ul> </header>   <main> <div class="left"> <h2>掲示板</h2>

<!-- ------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>";
  }
  
?>

</div> </main>

<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>

<footer> xxxxxxxxxxxxxxxxxxxxx </footer>  </body> </html>

ソースコード
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/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Yorrie

2020/04/23 10:19

コードブロックの使い方ですが、グラーブアクセント3つに挟まれている行の間にソースを入力してください。 ```ここに言語を入力 // ここにCSSとかHTMLとかのコードを入れる ```

hatena19

2020/04/23 10:32

HTMLコードも提示してください。

退会済みユーザー

2020/04/23 13:22

ありがとうございます。 HTMLコード記入いたします。

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

回答1件

ベストアンサー

横幅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

new1ro

総合スコア4528

退会済みユーザー

2020/04/25 04:52

ご教示いただきありがとうございます。思った通りのレイアウトになりました！！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！