■問題点
高さと横幅を指定したのに何故か表示されない。
html
1<main> 2 <section class="main"> 3 <span>あああああ</span> 4 </section> 5 </main>
scss
1main{ 2 .main{ 3 background-image:url('../../image/thumb.jpg'); 4 background-repeat: no-repeat; 5 background-position: 90% 10%; 6 height: 300px; 7 width: 100%; 8 } 9}
css
1/* 2html5doctor.com Reset Stylesheet 3v1.6.1 4Last Updated: 2010-09-17 5Author: Richard Clark - http://richclarkdesign.com 6Twitter: @rich_clark 7*/ 8html, body, div, span, object, iframe, 9h1, h2, h3, h4, h5, h6, p, blockquote, pre, 10abbr, address, cite, code, 11del, dfn, em, img, ins, kbd, q, samp, 12small, strong, sub, sup, var, 13b, i, 14dl, dt, dd, ol, ul, li, 15fieldset, form, label, legend, 16table, caption, tbody, tfoot, thead, tr, th, td, 17article, aside, canvas, details, figcaption, figure, 18footer, header, hgroup, menu, nav, section, summary, 19time, mark, audio, video { 20 margin: 0; 21 padding: 0; 22 border: 0; 23 outline: 0; 24 font-size: 100%; 25 vertical-align: baseline; 26 background: transparent; 27} 28 29body { 30 line-height: 1; 31} 32 33article, aside, details, figcaption, figure, 34footer, header, hgroup, menu, nav, section { 35 display: block; 36} 37 38nav ul { 39 list-style: none; 40} 41 42blockquote, q { 43 quotes: none; 44} 45 46blockquote:before, blockquote:after, 47q:before, q:after { 48 content: ''; 49 content: none; 50} 51 52a { 53 margin: 0; 54 padding: 0; 55 font-size: 100%; 56 vertical-align: baseline; 57 background: transparent; 58} 59 60/* change colours to suit your needs */ 61ins { 62 background-color: #ff9; 63 color: #000; 64 text-decoration: none; 65} 66 67/* change colours to suit your needs */ 68mark { 69 background-color: #ff9; 70 color: #000; 71 font-style: italic; 72 font-weight: bold; 73} 74 75del { 76 text-decoration: line-through; 77} 78 79abbr[title], dfn[title] { 80 border-bottom: 1px dotted; 81 cursor: help; 82} 83 84table { 85 border-collapse: collapse; 86 border-spacing: 0; 87} 88 89/* change border colour to suit your needs */ 90hr { 91 display: block; 92 height: 1px; 93 border: 0; 94 border-top: 1px solid #cccccc; 95 margin: 1em 0; 96 padding: 0; 97} 98 99input, select { 100 vertical-align: middle; 101} 102 103*, :before, :after { 104 border: 0; 105 -webkit-box-sizing: border-box; 106 box-sizing: border-box; 107} 108 109@media screen and (min-width: 1200px) { 110 .page-header .page-header__box { 111 display: -webkit-box; 112 display: -ms-flexbox; 113 display: flex; 114 -ms-flex-pack: distribute; 115 justify-content: space-around; 116 -webkit-box-align: center; 117 -ms-flex-align: center; 118 align-items: center; 119 } 120 .page-header .page-header__box .logo { 121 width: 17%; 122 } 123 .page-header .page-header__box .page-header__nav .page-header__list .page-list__block { 124 background-color: #55ace1; 125 -webkit-box-shadow: 0px 3px 0px 0px #2085c3; 126 box-shadow: 0px 3px 0px 0px #2085c3; 127 border-radius: 10px; 128 } 129 .page-header .page-header__box .page-header__nav .page-header__list .page-list__block a { 130 color: #fff; 131 width: 100%; 132 height: 100%; 133 font-size: 1.5rem; 134 font-weight: bold; 135 text-align: center; 136 padding: 9px 10px; 137 display: inline-block; 138 text-decoration: none; 139 min-width: 180px; 140 } 141} 142 143main .main { 144 background-image: url("../../image/thumb-messi2.jpg"); 145 background-repeat: no-repeat; 146 background-position: 90% 10%; 147 height: 300px; 148 width: 100%; 149} 150/*# sourceMappingURL=style.css.map */
回答1件
あなたの回答
tips
プレビュー