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

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

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

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

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

Q&A

解決済

2回答

586閲覧

CSSで、パターンAとパターンBでレイアウトが異なる理由を知りたい。

adgjm3703

総合スコア7

HTML5

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

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

0グッド

0クリップ

投稿2020/02/26 13:05

編集2020/02/26 15:05

前提・実現したいこと

ProgateのHTML&CSS中級編の問題で、サイトのwidthの決め方が理解できずに困っています。
top-wrapperとcontainerをdivで作り、cssでwidthを規定したいのですが、
top-wrapperでwidthを決めるのと、containerでwidthを決めるのでは、
サイトのレイアウトが変わってしまい、原因がわかりません。

パターンAでは、top-wrapperタグ内でwidthを規定していて、パターンBでは、containerタグ内でwidthを規定しています。
パターンAでは右側に余白が出てしまうのですが、なぜ違いが生まれるのか原因を知りたいです。

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

cssで、AパターンとBパターンではレイアウトが異なる理由が分からない。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 8 9</head> 10<body> 11 <div class="top-wrapper"> 12 <div class="container"> 13 <h1>LEARN TO CODE.<br> 14 LEARN TO BE CREATIVE.</h1> 15 <p>Progateはオンラインプログラミング学習サービスです。<br> 16 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 17 <div class="btn-wrapper"> 18 <a href="#" class="btn signup">新規登録はこちら</a> 19 <p>or</p> 20 <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>facebook</a> 21 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>twitter</a> 22 </div> 23 </div> 24 </div> 25 26</body> 27</html>

css

1<以下、cssパターンA> 2 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.top-wrapper{ 23 background-image: url(https://prog-8.com/images/html/advanced/top.png); 24 background-size: cover; 25 color: white; 26} 27 28.container{ 29 width: 1170px; 30 padding-top: 180px; 31 padding-bottom: 100px; 32 margin: 0 auto; 33 text-align: center; 34}

css

1<以下、cssパターンB> 2 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.top-wrapper{ 23 background-image: url(https://prog-8.com/images/html/advanced/top.png); 24 background-size: cover; 25 color: white; 26 width: 1170px; 27} 28 29.container{ 30 padding-top: 180px; 31 padding-bottom: 100px; 32 margin: 0 auto; 33 text-align: center; 34}

試したこと

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

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

thyda.eiqau

2020/02/26 13:14

インスペクタでどの要素にどのようなスタイルが適用されているか確認しましたか?
kei344

2020/02/26 13:36

HTML/cssパターンA/cssパターンBでコードブロックを分けていただけませんか?
guest

回答2

0

ベストアンサー

.top-wrapperも.containerもdiv要素になっていますね。
div要素はデフォルトでdisplay:block;のスタイルを持っています。
display:block;のスタイルが当たっているとき、その要素は幅に関する指定をしない限りはデフォルトでwidth:100%;となります。

背景画像を指定しているのは.top-wrapperですから、.top-wrapperに幅指定をしない時には、背景画像が(.top-wrapperの親要素である)body要素の幅いっぱいに広がります。
.top-wrapperに幅指定をすると、背景画像は.top-wrapperの幅までしか広がらないので、指定した幅(ここでは1170px)以上に画面をひろげれば、当然その分の余白ができてしまいます。

.containerに幅を指定した時も、指定した幅(ここでは1170px)以上に画面をひろげれば、当然.top-wrapperとの間に隙間が出来ています。.containerには背景が設定されていないのでわかりづらいですが。

kei344さんも書いていますが、ブラウザの検証ツールを使ってどの要素がどんな形になっているのか確認してみるとよくわかると思います。

投稿2020/02/26 15:41

hwatarig

総合スコア461

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

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

0

動くサンプル:パターンA / パターンB

パターンAで「余白」が出るとしたら、ブラウザの横幅がwidthで指定した値より小さいのでしょう。
デベロッパーツールで各要素の状況を確認してみてください。

【初心者向け!Chromeの検証機能(デベロッパーツール)の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

投稿2020/02/26 15:33

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問