html,cssでの要素間のスペースについて

お世話になります。
htmlとcssを使って要素間のスペースを作りたいのですが全くスペースが空きません。
どなたかご教示お願い致します。

html
1<html>
2<head>
3  <meta charset="UTF-8">
4  <link rel="stylesheet" href="sample.css">
5  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
6
7  <title>Original Song</title>
8</head>
9
10<!--<div id="page">-->
11<body>
12  <header>
13  <div class="p-3 mb-2 bg-success text-white" style="height: 90px; overflow: hidden;">
14    <center>
15      <div style="padding: 3px; margin-bottom: 5px; border: 1px dotted #333333;border-radius: 5px; color: black; width: 630px; background-color: white;"  >
16      <h1>曲にオリジナル歌詞を付けよう！</h1>
17      </div>
18    </center>
19  </div>
20  </header>
21<!--サイドナビ-->
22<?php
23$dsn  = 'mysql:dbname=yyyiii333_createsong;host=mysql1.php.xdomain.ne.jp;charset=utf8';  // 接続先を定義
24$user = 'yyyiii333_csong';      // MySQLのユーザーID
25$pw   = 'yasu0729';   // MySQLのパスワード
26
27// 実行したいSQL
28$sql = 'SELECT * FROM massage';  // Userテーブルの全ての列を取得する
29
30//-------------------------------------------------
31// SQLを実行
32//-------------------------------------------------
33$dbh = new PDO($dsn, $user, $pw);   // 接続
34$sth = $dbh->prepare($sql);         // SQL準備
35$sth->execute();                    // 実行
36
37?>
38
39<div class="kokuban"><span class="point">ポイント</span>
40
41<?php
42// 取得した内容を表示する
43while( $buff = $sth->fetch(PDO::FETCH_ASSOC) ){  // 実行結果から1レコード取ってくる
44  $name    = $buff['name'];
45  $contents  = $buff['contents'];
46
47
48  // 表示する
49echo  '作詞者<br />';
50printf("%s",$name);
51echo  '<br />';
52echo  '作詞<br />';
53printf("%s",  $contents);
54echo  '<br />';
55
56}
57
58?>
59</div>
60  <!--今月の課題曲-->
61  <div class=main.nav>
62    
63      <h2><img src="song.png" alt="rogo"width="3%" height="3%"title="歌ロゴ">今月の課題曲</h2>
64
65      <iframe width="560" height="315" src="https://www.youtube.com/embed/gsaa3iluNA8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
66    
67  </div> 
68  
69  <!--投稿領域-->
70  <div class="toukou.nav">
71  
72    <p>作詞者</p>
73    <form method="POST" action="toukou1.php">
74    <input type="text" name="name"><br><br>
75
76    <p>歌詞</p>
77    <textarea name="contents" rows="15" cols="60">
78    </textarea><br><br>
79    <input type="submit" name="submit" value="投稿する">
80    </form>
81  </div>
82  
83  
84
85
86  
87  <div class="p-3 mb-2 bg-secondary" style="height: 150px;">
88  </div>
89
90</body>
91</html>
92
93
94

css
1
2.kokuban {
3    font-family: HuiFontP109;
4    color: #fff;
5    background-color: #114400;
6    margin: 10px 0 10px 0;
7    padding: 15px;
8    border: 9px solid #a60;
9    border-radius: 3px;
10    box-shadow: 2px 2px 4px #666, 2px 2px 2px #111 inset;
11    text-shadow: 0px 0px 2px #000;
12    line-height: 1.9;
13    width: 250px;
14    height: 900px;
15    float: left;
16    display: inline-block;
17
18@font-face {
19    font-family: 'HuiFontP109';
20    src:url('/fonts/public/HuiFont/HuiFontP109.eot');
21    src:url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'), 
22url('/fonts/public/HuiFont/HuiFontP109.woff')format('woff'), 
23url('/fonts/public/HuiFont/HuiFontP109.ttf')format('truetype'), 
24url('/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg');
25    font-weight: normal;
26    font-style: normal;
27}
28}
29.point {
30    color: #ffb1b3;
31    font-weight: bold;
32    border: 3px solid #ffb1b3;
33}
34
35.main.nav{
36    float: left;
37    
38    width: 70%;
39}
40
41.toukou.nav{
42   float: left;
43   width: 25%;
44}
45

上記実行するとこの画面になります。

この赤く囲った場所にスペースを入れたいのですがどのように書けばいいでしょうか？
宜しくお願い致します。

m.ts10806

2020/07/25 22:36

レイアウトの問題でしたらPHPは直接関係ないので、ブラウザに出力されたHTMLを提示された方が良いです。ただ、実装に一貫性が見られません。 sample.cssがbootstrapの前に読み込まれていたり、インラインスタイルがガッツリ書かれていたり直接width,heightを指定していたり。これではレイアウトは崩れるばかりかと思います。Bootstrap利用するならBootstrapの機能を主として利用し、足りない部分や微調整したい部分を自身のCSSであてるべきですが、先に読まれてしまっては効果がありません。

banianizm

2020/07/25 22:39

ありがとうございます。その点、修正させていただきます。

m.ts10806

2020/07/25 22:40

ふんわり書きましたが「作り直した方が早い」と言ってます。ひとまずPHPなしで、モックから。 http://e-words.jp/w/%E3%83%A2%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97.html

miyabi_pudding

2020/07/26 02:37

余計なお節介ですが、 center要素は廃止された要素なので、使うのを止めましょう。あと、全体的に書き方が古いので、書籍とかを参考に作ったのであれば、参考にしているものを変えた方がいいかと思います。

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

回答1件

ベストアンサー

[1] 「<div class=main.nav>」の書き方がおかしいです。
誤: <div class=main.nav>
正: <div class="main nav">

「"」で囲う必要があります
複数のクラス名を指定したいときは半角スペースで区切ってください

そのうえで、CSSについては以下のように追加してください。

CSS
1.main.nav{
2    float: left;
3    width: 70%;
4    
5    /* 追加 */
6    margin-left: 50px;
7}

投稿2020/07/26 01:12

編集2020/07/26 01:13

new1ro

総合スコア4528

miyabi_pudding

2020/07/26 02:49

IEだと、float方向と同じ方向のマージンは倍になるってバグがありますが、 IEはもう無視でいいですよね　汗

m.ts10806

2020/07/26 04:26

やはり、bootstrap利用の意味ないですね。

banianizm

2020/07/26 05:02

new1roさんありがとうございます。実際には、クラス名の付け方も間違っていたのですが大きなヒントになりました。ベストアンサーにさせていただきました。

new1ro

2020/07/26 06:02 編集

> IEだと、float方向と同じ方向のマージンは倍になるってバグがありますが、 IEはもう無視でいいですよね　汗 IE6時代はそうでしたね.. IE7以降そういう崩れはないので問題ない認識です。 (自分自身がコーディングする際は、いまだに後遺症としてmargin-leftを使うのを躊躇してしまうのですが、2020年は大丈夫だろう、と思い今回は使ってみましたw)

miyabi_pudding

2020/07/26 06:40

> 後遺症としてmargin-leftを使うのを躊躇してしまうのですがこれめっちゃわかりますw IE6対応時代はトラウマでしかないですね、ほんに・・・。今はflexを堂々と使えるので楽なもんです。

miyabi_pudding

2020/07/26 06:46

m.ts10806さん > ほんとだ、bootstrap使わないのに読み込んでますね・・・。質問者さん、使わないものでもとりあえず読み込んでおけ、は、現代では特に非常にナンセンスです。この先のコーディング技術の習得にも悪影響になりかねません。用途などをしっかりおさえた上で使用することをオススメします。（質問に記載してない部分で使ってるならまだありだとは思うが）

m.ts10806

2020/07/26 09:07

miyabi_takatsukさんはい。使う使わないはハッキリしてほしいものです。使うならほぼ自分で作らなくてもこの程度作れるし、使わなくても元の質問のようなコードでやっててもまた別のところで綻びがでて、「あのとき作り直しておけば良かった」となるだけです。

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