Q&A
前提
一冊で身につく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>© 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をコピぺしてみても解決できませんでした。
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/26 13:04