Q&A
前提
HTML/CSSを学習中です。
現在、実践練習のために下記サイトの模写コーディングを行っています。
・模写中のサイト→リンク
@media screen and (min-width: 980px)
.header-image {
margin-bottom: 90px;
}
上記コードを入力して画像とテキスト(Writeは文章を書く人の～)の間に余白を指定しましたが、余白が反映されません。↓イメージ参照
######現在の誤りのある状態
######本来指定したい状態
###実現したいこと
画像とテキスト(Writeは文章を書く人の～)の間に余白を作りたいです。回答お願いします。
試したこと
デベロッパーツールを使用し調べていますが自分だけでは解決には至っていません
補足情報（FW/ツールのバージョンなど）
使用機器：Dynabook 15インチ
使用ブラウザ：Chrome
使用エディタ：Visual Studio Code
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"></html> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <title>Write – 書くためのテーマ_copy</title> 8 <link rel="dns-prefetch" href="//s0.wp.com"> 9 <link rel="dns-prefetch" href="//s.w.org"> 10 <link rel="alternate" type="application/rss+xml" title="Write » フィード" href="http://demo.themegraphy.com/write-ja/feed/"> 11 <link rel="alternate" type="application/rss+xml" title="Write » コメントフィード" href="http://demo.themegraphy.com/write-ja/comments/feed/"> 12 <script type="text/javascript"> 13 window._wpemojiSettings = {"baseUrl":"https://s.w.org/images/core/emoji/11/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/11/svg/","svgExt":".svg","source":{"concatemoji":"http://demo.themegraphy.com/write-ja/wp-includes/js/wp-emoji-release.min.js?ver=4.9.8"}}; 14 !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings); 15 </script><script src="http://demo.themegraphy.com/write-ja/wp-includes/js/wp-emoji-release.min.js?ver=4.9.8" type="text/javascript" defer=""></script> 16 <style type="text/css"> 17 img.wp-smiley, 18 img.emoji { 19 display: inline !important; 20 border: none !important; 21 box-shadow: none !important; 22 height: 1em !important; 23 width: 1em !important; 24 margin: 0 .07em !important; 25 vertical-align: -0.1em !important; 26 background: none !important; 27 padding: 0 !important; 28 } 29 </style> 30 <link rel="stylesheet" id="sb_instagram_styles-css" href="http://demo.themegraphy.com/write-ja/wp-content/plugins/instagram-feed/css/sb-instagram-2-2.min.css?ver=2.4.7" type="text/css" media="all"> 31 <link rel="stylesheet" id="contact-form-7-css" href="http://demo.themegraphy.com/write-ja/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.1.4" type="text/css" media="all"> 32 <link rel="stylesheet" id="genericons-css" href="http://demo.themegraphy.com/write-ja/wp-content/plugins/jetpack/_inc/genericons/genericons/genericons.css?ver=3.1" type="text/css" media="all"> 33 <link rel="stylesheet" id="normalize-css" href="http://demo.themegraphy.com/write-ja/wp-content/themes/write/css/normalize.css?ver=8.0.0" type="text/css" media="all"> 34 <link rel="stylesheet" id="write-style-css" href="http://demo.themegraphy.com/write-ja/wp-content/themes/write/style.css?ver=2.1.2" type="text/css" media="all"> 35 <link rel="stylesheet" id="write-style-ja-css" href="http://demo.themegraphy.com/write-ja/wp-content/themes/write/css/ja.css" type="text/css" media="all"> 36 <link rel="stylesheet" id="drawer-style-css" href="http://demo.themegraphy.com/write-ja/wp-content/themes/write/css/drawer.css?ver=3.2.2" type="text/css" media="screen and (max-width: 782px)"> 37 <link rel="stylesheet" id="jetpack_css-css" href="http://demo.themegraphy.com/write-ja/wp-content/plugins/jetpack/css/jetpack.css?ver=6.8.1" type="text/css" media="all"> 38 <script type="text/javascript" src="http://demo.themegraphy.com/write-ja/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script> 39 <script type="text/javascript" src="http://demo.themegraphy.com/write-ja/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script> 40 <script type="text/javascript" src="http://demo.themegraphy.com/write-ja/wp-content/themes/write/js/iscroll.js?ver=5.2.0"></script> 41 <script type="text/javascript" src="http://demo.themegraphy.com/write-ja/wp-content/themes/write/js/drawer.js?ver=3.2.2"></script> 42 <link rel="https://api.w.org/" href="http://demo.themegraphy.com/write-ja/wp-json/"> 43 <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://demo.themegraphy.com/write-ja/xmlrpc.php?rsd"> 44 <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://demo.themegraphy.com/write-ja/wp-includes/wlwmanifest.xml"> 45 <meta name="generator" content="WordPress 4.9.8"> 46 <style type="text/css">img#wpstats{display:none}</style> <style type="text/css"> 47 /* Colors */ 48 49 /* Home Text */ 50 .home-text { 51 } 52 </style> 53 54 <!-- Jetpack Open Graph Tags --> 55 <meta property="og:type" content="website"> 56 <meta property="og:title" content="Write"> 57 <meta property="og:description" content="書くためのテーマ"> 58 <meta property="og:url" content="http://demo.themegraphy.com/write-ja/"> 59 <meta property="og:site_name" content="Write"> 60 <meta property="og:image" content="https://s0.wp.com/i/blank.jpg"> 61 <meta property="og:locale" content="ja_JP"> 62 63 <!-- End Jetpack Open Graph Tags --> 64 <link id="avast_os_ext_custom_font" href="chrome-extension://eofcbnmajmjmplflapaojjnihcjkigck/common/ui/fonts/fonts.css" rel="stylesheet" type="text/css"></head> 65 66 <body class="home blog drawer header-side footer-side no-sidebar footer-3 has-avatars drawer-close"> 67 <div id="page" class="hfeed site"> 68 <a class="skip-link screen-reader-text" href="#content">コンテンツへスキップ</a> 69 <header id="masthead" class="site-header"> 70 <div class="site-top"> 71 <div class="site-top-table"> 72 <div class="site-branding"> 73 <h1 class="site-title"> 74 <a href="" rel="home">Write</a> 75 </h1> 76 <div class="site-description">書くためのテーマ</div> 77 </div> 78 <!-- .site-branding --> 79 <nav id="site-navigation" class="main-navigation"></nav> 80 <!-- #site-navigation --> 81 </div> 82 <!-- .site-top-table --> 83 </div> 84 <!-- .site-top --> 85 <div id="header-image" class="heeader-image"> 86 <img src="img/cropped-nicole-honeywill-730102-unsplash.jpg" width="1035" height="500" alt=> 87 </div> 88 <!-- #header-image --> 89 <div class="home-text">Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</div> 90 <!-- .home-text --> 91 </header> 92 <!-- #masthead --> 93 <div id="content" class="site-content"></div> 94 <!-- #content --> 95 <footer id="colophon" class="site-footrer"></footer> 96 <!-- #colophon --> 97 </div> 98 <!-- #page --> 99 <!-- #instagram feed JS --> 100 <script type="javascript"></script> 101 <script type="javascript"></script> 102 <script type="javascript" src=""></script> 103 <script type="javascript" src=""></script> 104 <script type="javascript" src=""></script> 105 <script type="javascript" src=""></script> 106 <script type="javascript" src=""></script> 107 <script type="javascript" src=""></script> 108 <script type="javascript" src=""></script> 109 110 <img src="" alt="" width="6" height="5" id="wpstats"> 111 </body> 112</html>
CSS
1* { 2 text-decoration: none; 3 font-family: Georgia, '游明朝', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif; 4} 5 6body { 7 width: 1035px; 8 margin-right: auto; 9 margin-left: auto; 10} 11a { 12 color: inherit; 13 text-decoration: none; 14 transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out, opacity .15s ease-in-out; 15} 16 17.site-top { 18 margin-bottom: 70px; 19} 20 21site-title a:hover { 22 color: #111; 23} 24.site-description { 25 font-style: normal; 26 color: #777; 27 font-style: italic; 28 line-height: 1.4; 29 padding-top: 4px; 30} 31.home-text { 32 color: #777; 33 font-family: 'Slabo 27px', serif; 34 font-size: 27px; 35 line-height: 1.6; 36 margin-bottom: 90px; 37 padding-bottom: 25px; 38} 39 40 41
Responsive
1@media screen and (min-width: 980px) 2.header-image { 3 margin-bottom: 90px; 4}
回答1件
0
ベストアンサー
css
1@media screen and (min-width: 980px) { 2 .heeader-image { 3 margin-bottom: 90px; 4 } 5}
メディアクエリが括弧でくくられていません。
クラス名が間違っています。
投稿2020/12/02 08:32
総合スコア159
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/02 08:46