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

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

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

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

CSS

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

Q&A

解決済

2回答

571閲覧

justify-content: space-between; 余白が反映されない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

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

CSS

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

0グッド

0クリップ

投稿2023/02/25 12:54

前提

一冊で身につくhtml&cssとwebデザイン入門講座という本で学習しています。
そこでFlex boxで横並びにはなったのですが、上下の余白がうまくいきません。
どのようにすれば解決できるかを教えてくださるとありがたいです。

実現したいこと

現在このようにずれてしまっている状態を↓
イメージ説明

このようにヘッダーとフッターの間に余白を持たせたいです。↓
イメージ説明

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4<meta charset="utf-8"> 5<title>WEB Cafe - NEWS</title> 6<meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> 7<!-- CSS --> 8<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 9<link href="https://fonts.googleapis.com/css?family=philosopher" rel="stylesheet"> 10<link href="css/style.css" rel="stylesheet"> 11<link rel="icon" type="image/png" href="images/favicon.png"> 12 </head> 13 <body> 14 15 <div id="news" class="big-bg"> 16 <header class="page-header wrapper"> 17 <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WEBカフェホーム"></a></h1> 18 <nav> 19 <ul class="main-nav"> 20 <li><a href="news.html">News</a></li> 21 <li><a href="menu.html">Menu</a></li> 22 <li><a href="comtact.html">Contact</a></li> 23 </ul> 24 </nav> 25 </header> 26 <div class="wrapper"> 27 <h2 class="page-title">News</h2> 28 </div><!-- /.wrapper --> 29 30 <div class="news-contents wrapper"> 31 <article> 32 <header class="post-info"> 33 <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2> 34 <p class="post-date">3/30 <span>2019</span></p> 35 <p class="post-cut">カテゴリー:お店の紹介</p> 36 </header> 37 38 </article> 39 40 <aside> 41 サイドバー部分 42 </aside> 43 </div><!-- /.news-contents --> 44 </div><!-- /#home --> 45 <footer> 46 <div class="wrapper"> 47 <p><small>&copy; 2019 Manabox</small></p> 48 </div> 49 </footer> 50 </body> 51</html>

CSS

1@charset "UTF-8"; 2 3/*-共通部分 4--------------------*/ 5html { 6 font-size: 100% 7} 8body{ 9 font-family: "Yu Gothic Midium", "遊ゴシック Midium", YuGothic, "遊ゴシック体", "ヒラギノ角ゴ pro W3", sans-serif; 10 line-height: 1.7; 11 color: #432; 12} 13a { 14 text-decoration: none; 15} 16img { 17 max-width: 100%; 18} 19/* HEADER 20--------------------*/ 21.logo { 22 width: 210px; 23 margin-top: 14px; 24} 25 26.main-nav { 27 display: flex; 28 font-size: 1.25rem; 29 text-transform: uppercase; 30 margin-top: 34px; 31 list-style: none; 32} 33.main-nav li { 34 margin-left: 36px; 35} 36.main-nav a { 37 color: #432; 38} 39.main-nav a:hover { 40 color: #0bd; 41} 42.page-header { 43 display: flex; 44 justify-content: space-between; 45} 46.wrapper { 47 max-width: 1100px; 48 margin: 0 auto; 49 padding: 0 4%; 50} 51/* HOME 52--------------------*/ 53.home-content { 54 text-align: center; 55 margin-top: 10%; 56} 57.home-content p { 58 font-size: 1.125rem; 59 margin: 10px 0 42px; 60} 61/* 見出し */ 62.page-title { 63 font-size: 5rem; 64 font-family: 'Philosopher', serif; 65 text-transform: uppercase; 66 font-weight: normal; 67} 68/* ボタン */ 69.button { 70 font-size: 1.375rem; 71 background: #0bd; 72 color: #fff; 73 border-radius: 5px; 74 padding: 18px 32px; 75} 76.button:hover { 77 background: #0090aa; 78} 79/* 大きな背景画像 */ 80.big-bg { 81 background-size: cover; 82 background-position: center top; 83} 84#home { 85 background-image: url(../images/main-bg.jpg),linear-gradient(#c9ffbf,#ffafbd); 86 background-blend-mode: luminosity; 87 min-height: 100vh; 88} 89#home .page-title { 90 text-transform: none; 91} 92/* NEWS 93--------------------*/ 94#news { 95 background-image: url(../images/news-bg.jpg); 96 height: 270px; 97 margin-bottom: 40px; 98} 99#news .page-title { 100 text-align: center; 101} 102/* フッター 103--------------------*/ 104footer { 105 background: #432; 106 text-align: center; 107 padding: 26px 0; 108} 109footer p { 110 color: #fff; 111 font-size: 0.875rem; 112} 113 114/* 記事部分 */ 115article { 116 width: 74%; 117} 118 119/* サイドバー */ 120aside { 121 width: 22%; 122} 123.news-contents { 124 display: flex; 125 justify-content: space-between; 126 margin-bottom: 50px; 127} 128

試したこと

ネットで同じような事例がないか調べましたが見つけられませんでした。
最初から書き直したり、見本のHTMLやCSSをコピぺしてみても解決できませんでした。

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

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

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

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

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

guest

回答2

0

下記で#newsの高さを 270px にしていますが、それが原因では。中身の高さがそれ以上あるのでその分はみ出します。 削除するかautoに設定すればどうでしょう。

css

1#news { 2 background-image: url(../images/news-bg.jpg); 3 height: 270px; 4 margin-bottom: 40px; 5}

投稿2023/02/25 13:29

hatena19

総合スコア33856

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

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

退会済みユーザー

退会済みユーザー

2023/02/26 13:04

コメントありがとうございます!確かに height: 270px;を削除するとヘッダーとフッターの間にスペースができるようになりました! 説明が悪かったのですが、『店内ギャラリーの絵が…』の部分をヘッダーとフッターの間に表示させたく… 今回の修正では『店内ギャラリーの絵が…』の部分は動かなかったので、もう一度見直してみます。
guest

0

ベストアンサー

すみません、解決しました…

HTML

1 <div class="news-contents wrapper"> 2 <article> 3 <header class="post-info"> 4 <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2> 5 <p class="post-date">3/30 <span>2019</span></p> 6 <p class="post-cut">カテゴリー:お店の紹介</p> 7 </header> 8 9 </article> 10 11 <aside> 12 サイドバー部分 13 </aside> 14 </div><!-- /.news-contents -->

このHTMLの位置が他のコードの上に記載されていたことが原因でした。
コードの位置でも見え方が変わってしまうのですね。勉強になりました。ご回答いただきありがとうございました!

投稿2023/02/26 13:26

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問