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

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

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1509閲覧

WEBサイトのレイアウトに躓いています。

nyanchuu

総合スコア8

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/04/07 01:20

前提・実現したいこと

初めてWEBサイトを作っています。2カラムのレイアウトにしたいと思っているのですが、中々上手くいきません。
この方法でなくてもこっちのコードのが分かりやすいよ等のご意見ございましたら、自分では気付けていないのでご教授お願いいたします。

発生している問題・エラーメッセージ

.wrapperをbackground-color: #FFC0CB;に設定しているものの、ヘッダー下のみ 白いまま表示されてしまう。

試したこと

ネットで自分なりに2カラムのレイアウトの作り方を調べて、試行錯誤していました。.wrapperの上部は少しスペースを開けたかったので
margin-top: 50px;でしたことで、backgroundcolorがつかないのでしょうか。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--cssリンク--> <link rel="stylesheet" href=".css"> <link href="http://fonts.googleapis.com/earlyaccess/notosansjp.css"> <title></title> </head> <body> <header>
<div class="container"> <div class="header-left"> <img class="logo" src="image\www.777logos.com.png"> </div> <div class="header-right"> <ul> <li> <a href="#">Body</a> </li> <li> <a href="#">Hair</a></a> </li> <li> <a href="#">Cosme</a> </li> <li> <a href="#">login</a> </li> </ul> </div> </div> </header>
<div class="wrapper">
<div class="main"> <div class="contents"> </div> </div> <div class="side"> <div class="box-bdr"> <div class="headerarea"> </div>
<div class="message"> </div> </div> </div> </div> <footer>
<img src="image\www.777logos.com.png"> <p>~Blue rose~ </p>
</footer> </div> </div> </body> </html>

css

1 2@charset "UTF-8"; 3@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); 4 5* { 6 margin:0; 7 padding:0; 8} 9 10 11 body { 12 font-family: 'Noto Sans JP', sans-serif; 13 14 } 15 16 17/* header */ 18 19 20 21header { 22 height: 106px; 23 width: 100%; 24 background-color: rgb(221, 140, 221, 0.3); 25 26 27 border-bottom: 1px solid rgba(25, 25, 112, 0.3); 28} 29 30 31.header-left { 32 float: left; 33 height: 106px; 34} 35 36.header-right { 37 float: right; 38 height: 106px; 39 40 41} 42 43 44 45a { 46 text-decoration: none; 47 display: inline-block; 48 line-height: 106px; 49 text-align:center; 50 51} 52 53 54li { 55 list-style: none; 56 float: right; 57 padding: 0 30px; 58 font-weight: bold; 59 60} 61 62li:hover { 63 background-color: rgba(255, 255, 255, 0.3); 64 65} 66 67.container { 68 width: 1200px; 69 margin: 0 auto; 70 background-color: rgba(255, 255, 255, 0.3); 71} 72 73 74 75 76/* メイン部分 */ 77 78 79 80.wrapper { 81 82 83 display: flex; 84 width: 1903px; 85 margin-top: 50px; 86 height: 1300px; 87 background-color: #FFC0CB; 88} 89 90 91 92 93 94 95.main { 96 margin: 0 auto; 97 width: 60%; 98 99} 100.contents { 101 background: white; 102 103 margin: 0 auto; 104 105 text-align: center; 106 color: #8d8d8d; 107 height: 1198px; 108 width: 75%; 109 border: 1px solid #a0d468; 110 border-radius: 10px; 111} 112 113 114.side { 115 116 width: 40%; 117 118 119} 120.box-bdr { 121 text-align: center; 122 padding: 0 15px; 123 border: 1px solid #a0d468; 124 border-radius: 10px; 125 height:1200px; 126 width: 600px; 127 background: white; 128} 129 130 131 132 133 134/* footer */ 135 136 137 138 139 140footer { 141 background-color: rgb(150, 44, 44); 142 height: 60px; 143} 144

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/04/07 03:06

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
nyanchuu

2020/04/07 03:42

時間がなかったのですみません。今致しますね。
guest

回答1

0

ベストアンサー

こんにちは!

marginをpaddingに変更してみて下さい

css

1padding-top:50px;

marginは「要素の外側の余白」、paddingは「要素の内側の余白」です。

このサイトわかりやすいので見て下さい
https://saruwakakun.com/html-css/basic/margin-padding

投稿2020/04/07 01:55

noriochan

総合スコア53

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nyanchuu

2020/04/07 02:36 編集

初歩的なミスを・・!色がつきました、ありがとうございます!! ご指定くださったサイトを参考にさせていただきます。paddingとmarginがごっちゃになっているんですよね・・marginはwrapper要素のボーダーの外枠と考え、色がつかなかったのですね。もう一度勉強します。
noriochan

2020/04/07 02:44

marginとpaddingの違いは結構な躓きポイントだと思います! ボクも最初は違いがわからず苦労しました笑 理屈で理解されているようなので素晴らしいですね。 頑張って下さい!
nyanchuu

2020/04/07 03:45

励みになります! ご親切にご回答くださいましてありがとうございます(^^) 頑張ります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問