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

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

ただいまの
回答率

87.91%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 455
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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>

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

<!-- -----right------ --> 
<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----- -->
<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/ツールのバージョンなど)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • TatamiSteak

    2020/04/23 19:19

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

    ```ここに言語を入力
    // ここにCSSとかHTMLとかのコードを入れる
    ```

    キャンセル

  • hatena19

    2020/04/23 19:32

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2020/04/23 22:22

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

    キャンセル

回答 1

checkベストアンサー

+1

横幅width: 70%;の要素の子要素にもwidth: 70%;が指定されている場合、
画面全体からすると49%くらいのサイズになってしまいます。右側に大きな余白が生じてしまっているのはそのためです。


ステップ1: 
form.submid.contentsなど、.left以外でwidth: 70%;を指定している箇所をすべてコメントアウトしてください。
これで、まずは広すぎる余白はなくなると思います。


ステップ2: 
「ステップ1」を終えると今度は余白がゼロになるという問題が生じると思います。
以下のようにすることで、余白を作ることができると思います。

.left {
  width: 65%;
}


.left {
  width: calc(70% - 40px); /* 40pxが余白。好きなように調整してください。 */
}

いったん、上記で見た目を確認してほしいのですが、

<h1>入力フォーム</h1><form>..</form>については、
もしかしたら意図通りでないレイアウトになっているかもしれません。

その場合、width: 70%のコメントアウトを解除するか、
float: leftをコメントアウトしてみるといいかもしれません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/25 13:52

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

    キャンセル

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

  • ただいまの回答率 87.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る