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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

456閲覧

どういった理由でレイアウトに違いが出たのか分かりません.marginとpadding指定による背景画像への効き。

Akaho

総合スコア39

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/07/03 03:33

編集2019/07/03 05:21

progateのhtml&CSS中級道場コース(一から自分でお手本のサイトを目指して、コーディングするコース)をやっています。その中で、なぜそのコードでないといけないのか?、どういう理由でレイアウトが動いたのか分からない所があります。
それは画像(下)にある背景色をLearn Where to Get Started!の上を超えて背景画像のところまで効かす部分です。
下のコードに載せたのは課題をクリアしたものです。
cssの.head{
color:#5f5d60;
margin:0 auto 60px;
width:1170px;
font-size:24px;
padding-top:90px;
}ですが、これに到るまでにheadクラスに対してmargin:90 auto 50px;を指定し、padding-topは指定していませんでした。そのプレビューが下画像です。
なぜこの指定ではうまくいかなかったのかが分からないです。
自分の考えは、headクラスを覆うlesson-wrapperクラスに対してbackground-color:#f7f7f7;を指定しているから、別にmarginで背景画像に影響を与えないと思うのですが、、、。どういう理屈でレイアウトが動いたのか教えて下さい。
イメージ説明

参考ページ
リンク内容

html

1コード 2<!DOCTYPE html> 3<html> 4<head> 5 <meta charset="utf-8"> 6 <title>Progate</title> 7 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 8 <!-- ここでFont Awesomeを読み込んでください --> 9 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 10 11</head> 12<body> 13 <!-- ここにコードを書いていきましょう --> 14 <div class="header"> 15 <div class="content"> 16 <div class="header-logo"> 17 <img src="https://prog-8.com/images/html/advanced/main_logo.png"> 18 19 20 </div> 21 <div class="login"> 22 <a href="#">ログイン</a> 23 </div> 24 </div> 25 </div> 26 <div class="top-wrapper"> 27 <div class="contents"> 28 <div class="heading"> 29 <h1>LEARN TO CODE</h1> 30 <h1>LEARN TO BE CREATIVE</h1> 31 <p>Progateはオンラインプログラミング学習サービスです。</p> 32 <P>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</P> 33 </div> 34 <div class="btn-wrapper"> 35 <a href="#" class="btn new" >新規登録はこちら</a> 36 <p>or</p> 37 <a href="#" class="btn facebook" ><span class="fa fa-facebook"></span>Facebookで登録</a> 38 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 39 </div> 40 </div> 41 </div> 42 43 <div class="lesson-wrapper"> 44 45 <P class="head">Learn Where to Get Started!</P> 46 <div class="lessons"> 47 48 <div class="lesson"> 49 <div class="lesson-content"> 50 <img src="https://prog-8.com/images/html/advanced/html.png"> 51 52 <P class="title">HTML&amp;CSS</P> 53 <div class="text-content"> 54 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 55 </div> 56 </div> 57 </div> 58 <div class="lesson"> 59 <div class="lesson-content"> 60 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 61 62 <P class="title">jQuery</P> 63 <div class="text-content"> 64 <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> 65 66 </div> 67 </div> 68 </div> 69 <div class="lesson"> 70 <div class="lesson-content"> 71 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 72 73 <P class="title">Ruby</P> 74 <div class="text-content"> 75 <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 76 77 </div> 78 </div> 79 </div> 80 <div class="lesson"> 81 <div class="lesson-content"> 82 <img src="https://prog-8.com/images/html/advanced/php.png"> 83 84 <P class="title">PHP</P> 85 <div class="text-content"> 86 <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 87 </div> 88 </div> 89 </div> 90 </div> 91 </div> 92 93</body> 94</html>

css

1コード 2/* CSSのリセット(消さないでください) */ 3html, body, 4ul, ol, li, 5h1, h2, h3, h4, h5, h6, p, div { 6 margin: 0; 7 padding: 0; 8} 9 10body { 11 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 12} 13 14li { 15 list-style: none; 16} 17 18a { 19 text-decoration: none; 20} 21 22/* ここからCSSを書いていきましょう */ 23.header{ 24 width:100%; 25 height:65px; 26 background-color:rgba(34,49,52,0.9); 27 z-index:10; 28 position:fixed; 29 30} 31.content{ 32 width:1170px; 33 margin:0 auto; 34} 35.header-logo img{ 36 width:124px; 37 margin-top:20px; 38 float:left; 39 40} 41.login{ 42 text-align:right; 43} 44.login a{ 45 display:inline-block; 46 position:relative; 47 transition:background-color 1s; 48 padding:0 25px; 49 background-color:rgba(255,255,255,0.3); 50 line-height:65px; 51 color:white; 52} 53.login a:hover{ 54 background-color:rgba(255,255,255,0.6); 55} 56 57.top-wrapper{ 58 59 padding:180px 0 100px ; 60 background-image:url(https://prog-8.com/images/html/advanced/top.png); 61 background-size:cover; 62} 63.contents{ 64 width:1170px; 65 text-align:center; 66 margin:0 auto; 67} 68.heading h1{ 69 font-size:45px; 70 font-weight:bold; 71 letter-spacing:5px; 72} 73.heading{ 74 margin-bottom:30px; 75 color:white; 76 opacity:0.7; 77 margin-left:auto; 78 margin-right:auto; 79} 80.btn-wrapper p{ 81 margin:15px 0; 82 color:white; 83 84} 85.btn{ 86 padding:8px 24px; 87 color:white; 88 border-radius:4px; 89} 90.facebook{ 91 margin-right:10px; 92 background-color:#3b5998; 93 opacity:0.8; 94} 95.twitter{ 96 background-color:#55acee; 97 opacity:0.8; 98} 99 100.new{ 101 background-color:#239b76; 102 opacity:0.8; 103} 104 105.lesson-wrapper{ 106 height:580px; 107 text-align:center; 108 background-color:#f7f7f7; 109} 110.head{ 111 color:#5f5d60; 112 margin:0 auto 60px; 113 width:1170px; 114 font-size:24px; 115 padding-top:90px; 116} 117.lessons{ 118 width:1170px; 119 margin:50px auto 0; 120} 121 122 123.lesson{ 124 width:25%; 125 float:left; 126 position:relative; 127 left:30px; 128} 129.lesson img{ 130 margin-bottom:15px; 131 132} 133.title{ 134 position:absolute; 135 top:90px; 136 left:80px; 137 color:white; 138} 139.lesson-content{ 140 width:80%; 141} 142.text-content{ 143 color:#b3aeb5; 144}

追記
『子要素のmarginは親要素にも影響を与えます。(親要素にmarginが設定されていない場合』
この点を理解していなかった。
間違った理解
親要素と子要素の距離間をmarginでとれるとだけしか理解できていなかった。
リンク内容
リンク内容
リンク内容

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

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

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

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

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

Akaho

2019/07/03 03:52

実際にそうなっています。urlをペーストした時にこんな感じになりました。 文章が長いから折り返したのかな?と思い、そのままにしていました。 直すようにします。ご指摘ありがとうございます。
m.ts10806

2019/07/03 03:56

はい。画像に限らず属性値はなるべくきちんと詰めたほうが良いです。 画像やCSS,JSなど外部ファイルの場合は特に気を付けてください。これで問題が起きるかというとそうではないと思いますが、絶対に起きないとは言いきれませんし、ブラウザに正しく解釈させるためにはきっちりしておいたほうが良いです。
KojiDoi

2019/07/03 04:27

デベロッパーツールは使えないのでしょうか?
Akaho

2019/07/03 04:36

使えます。
guest

回答1

0

ベストアンサー

marginpaddingは全くの別物です。
margin領域間のスペース
padding領域内のスペースです。

例ですが、白紙があって縦並びで2個適当な箱があったとします。
箱と箱の間の空間がmargin
箱の中で上下左右どれぐらいあけてテキストを入れるかがpaddingです。
イメージつきますでしょうか?

そして、子要素のmarginは親要素にも影響を与えます。(親要素にmarginが設定されていない場合)
子要素のmarginを質問にある90px auto 50pxにすると
親要素にも全く同じmarginが設定されます。
結果としてmarginは領域間スペースなので.lesson-wrapper.top-wrapper間に90pxのスペースができ、白くなってしまったのです。
模範解答はmarginが0なのでスペースがなくなりpaddingが設定されたので.lesson-wrapperの上端から90px下に.headが表示されています。
このあたりは「子要素 margin」とかで調べてみてください。たくさん出てきます。
蛇足ですがmarginの相殺とかも調べてみるとより理解が深まるかもしれません。

投稿2019/07/03 04:53

mepon

総合スコア480

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

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

Akaho

2019/07/03 05:11

分かりやすく教えて下さりありがとうございました。理解できました。 ありがとうございました。
mepon

2019/07/03 05:15

理解できたようで何よりです。 HTML CSSのボックスモデルという概念は覚えるまで大変ですが 覚えてしまえば頭でイメージしながら自在に配置できるようになるかと思われます。 頑張ってください
Akaho

2019/07/03 05:23

ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問