bodyに対して、背景色を指定しているのですが、反映されません。
色々調べてみたのですが、floatがあったりすると、反映されない場合があるとみたのですが、それが原因でしょうか?
初心者であまりよくわかっておらず、原因の突き止めができないのでお助けいただければ嬉しいです。
HTML
1<!DTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"> 6 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 7 <link rel="stylesheet" href="style.css"> 8 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> 9 <title></title> 10</head> 11<body> 12 <header> 13 <nav class="navbar navbar-expand-lg navbar-dark fixed-top"> 14 <div class="container d-flex justify-content-between"> 15 <a class="navbar-brand" href="#">DevFolio</a> 16 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> 17 <span class="navbar-toggler-icon"></span> 18 </button> 19 20 <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02"> 21 <ul class="navbar-nav"> 22 <li class="nav-item active"> 23 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 24 </li> 25 <li class="nav-item"> 26 <a class="nav-link" href="#">About</a> 27 </li> 28 <li class="nav-item"> 29 <a class="nav-link" href="#">Service</a> 30 </li> 31 <li class="nav-item"> 32 <a class="nav-link" href="#">Work</a> 33 </li> 34 <li class="nav-item"> 35 <a class="nav-link" href="#">Blog</a> 36 </li> 37 <li class="nav-item"> 38 <a class="nav-link" href="#">Contact</a> 39 </li> 40 </ul> 41 </div> 42 </div> 43 </nav> 44 </header> 45 46 <main> 47 <div class="container-fluid min-vh-100 hero d-flex justify-content-center align-items-center"> 48 <h1 class="intro-title">I am Morgan Freeman</h1> 49 </div> 50 </main> 51 52 <section id="about"> 53 <div class="container mt-5"> 54 <div class="row bg-white shadow py-4"> 55 <div class="col-md-6"> 56 <div class="row m-md-4"> 57 <div class="col-md-5"> 58 <img src="sozai_bootstrap_kadai/img/testimonial-2.jpg"> 59 </div> 60 <div class="col-md-7"> 61 <p><span class="title-s">Name:</span>Morgan Freeman</p> 62 <p><span class="title-s">Profile:</span>full stack developer</p> 63 <p><span class="title-s">Email:</span>contact@example.com</p> 64 <p><span class="title-s">Phone:</span>(617)557-0089</p> 65 </div> 66 </div> 67 <div class="m-md-4"> 68 <p class="title-s">Skill</p> 69 <span>HTML</span><span class="float-right">85%</span> 70 <div class="progress mb-3"> 71 <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div> 72 </div> 73 <span>CSS3</span><span class="float-right">75%</span> 74 <div class="progress mb-3"> 75 <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> 76 </div> 77 <span>PHP</span><span class="float-right">50%</span> 78 <div class="progress mb-3"> 79 <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> 80 </div> 81 <span>JAVASCRIPT</span><span class="float-right">90%</span> 82 <div class="progress mb-3"> 83 <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div> 84 </div> 85 </div> 86 </div> 87 <div class="col-md-6 pt-4"> 88 <h2>About me</h2> 89 <div class="line-left"></div> 90 <p class="lead mt-2"> 91 Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et,<br> 92 porttitor at sem. Praesent sapien massa, convallis a<br> 93 pellentesque nec, egestas non nisi. Nulla porttitor<br> 94 accumsan tincidunt. 95 </p> 96 <p class="lead"> 97 Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.<br> 98 Vivamus suscipit tortor eget felis porttitor volutpat.<br> 99 Vestibulum ac diam sit amet quam vehicula elementum<br> 100 sed sit amet dui. porttitor at sem. 101 </p> 102 <p class="lead"> 103 Nulla porttitor accumsan tincidunt. Quisque velit nisi,<br> 104 pretium ut lacinia in, elementum id enim. Nulla porttitor<br> 105 accumsan tincidunt. Mauris blandit aliquet elit, eget<br> 106 tincidunt nibh pulvinar a. 107 </p> 108 </div> 109 </div> 110 </div> 111 </section> 112 113 <section id="Service"> 114 <div class="container"> 115 <div class="text-center mt4rem mb-5 py-4"> 116 <h2 class="big-h2">Service</h2> 117 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> 118 <div class="line-mf"></div> 119 </div> 120 <div class="row"> 121 <div class="col-md-4"> 122 <div class="service-box bg-white"> 123 <span class="ico-circle mb-3"><i class="fas fa-tv fa-3x"></i></span> 124 <div class="text-center"> 125 <h3>WEB DESIGN</h3> 126 <p> 127 Lorem ipsum, dolor sit amet consectetur adipisicing elit.Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident. 128 </p> 129 </div> 130 </div> 131 </div> 132 <div class="col-md-4"> 133 <div class="service-box bg-white"> 134 <span class="ico-circle mb-3"><i class="fas fa-code fa-3x"></i></span> 135 <div class="text-center"> 136 <h3>WEB DEVELOPMENT</h3> 137 <p> 138 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident. 139 </p> 140 </div> 141 </div> 142 </div> 143 <div class="col-md-4"> 144 <div class="service-box bg-white"> 145 <span class="ico-circle mb-3"><i class="fas fa-camera fa-3x"></i></span> 146 <div class="text-center"> 147 <h3>PHOTOGRAPHY</h3> 148 <p> 149 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident. 150 </p> 151 </div> 152 </div> 153 </div> 154 <div class="col-md-4"> 155 <div class="service-box bg-white"> 156 <span class="ico-circle mb-3"><i class="fas fa-mobile-alt fa-3x"></i></span> 157 <div class="text-center"> 158 <h3>RESPONSIVE DESIGN</h3> 159 <p> 160 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident. 161 </p> 162 </div> 163 </div> 164 </div> 165 <div class="col-md-4"> 166 <div class="service-box bg-white"> 167 <span class="ico-circle mb-3"><i class="fas fa-pencil-alt fa-3x"></i></span> 168 <div class="text-center"> 169 <h3>Graphic Design</h3> 170 <p> 171 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident. 172 </p> 173 </div> 174 </div> 175 </div> 176 <div class="col-md-4"> 177 <div class="service-box bg-white"> 178 <span class="ico-circle mb-3"><i class="fas fa-chart-bar fa-3x"></i></span> 179 <div class="text-center"> 180 <h3>Marketing Services</h3> 181 <p> 182 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident. 183 </p> 184 </div> 185 </div> 186 </div> 187 188 </div> 189 </div> 190 </section> 191 192 193 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 194 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> 195</body> 196 197</html> 198
CSS
1@charset"utf-8" 2 3body { 4 background-color: #f5f5f5; 5 color: #4e4e4e; 6} 7 8a { 9 color: #4e4e4e; 10} 11 12.navbar { 13 background-color: rgba(0,0,0,.3); 14} 15 16.navbar-brand { 17 font-size: 1.6rem; 18 font-weight: bold; 19} 20 21.navbar-dark .navbar-nav .nav-link, 22.navbar-dark .navbar-nav .nav-link a, 23.navbar-dark .navbar-nav .nav-link:hover { 24 color: #fff; 25 font-size:1.05rem; 26 font-weight: 600; 27} 28 29.hero { 30 background-image: url(sozai_bootstrap_kadai/img/intro-bg.jpg); 31 background-size: cover; 32 background-attachment: fixed; 33} 34 35.intro-title { 36 color: #fff; 37 text-align: center; 38 font-size: 4.5rem; 39} 40 41.title-s { 42 font-size: 1.1rem; 43 font-weight: bold; 44} 45 46.line-left { 47 width: 80px; 48 height: 3px; 49 background-color: #0078ff; 50} 51 52.big-h2 { 53 font-weight: bold; 54 font-size: 3rem; 55} 56 57.line-mf { 58 width: 40px; 59 height: 5px; 60 background-color: #0078ff; 61 margin: 0 auto; 62} 63 64.service-box { 65 padding: 2.5rem 1.3rem; 66 border-radius: 1rem; 67 margin-bottom: 3rem; 68} 69 70.ico-circle{ 71 height: 100px; 72 width: 100px; 73 border-radius: 50%; 74 margin: 0 auto; 75 padding-top: 25px; 76 text-align: center; 77 box-shadow: 0 0 0 10px #0078ff; 78 display: block; 79} 80
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/26 04:21