Q&A
サンプルコードの出典を明示してください。
それに「質問を解決済み」とするには「ベストアンサー」を選ぶ必要があります。「いかのいずれかに」で1つずつそれぞれ回答がついたときにベストアンサーとなる基準は何になるのでしょう？またベストアンサーとなった回答は後から同じような問題を抱えたときに真っ先に参照されます。そのときに1つしか回答がなかった場合にどうなると思いますか？
「いずれかに」と曖昧に出すのではなく、「すべて」にするか、個々に質問をわけるか、どちらかにしてください。
●自分が書いたコード
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Nuno - Responsive Bootstrap Theme</title> 7 <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css"> 8 <link rel="stylesheet" href="style.css"> 9 <link rel="stylesheet" href="css/fixed.css"> 10</head> 11 12<body data-spy="scroll" data-target="#navbarResponsive"> 13 14<!--Start Home Section--> 15<div id="home"> 16 17<!--Start Navigation--> 18<nav class="navbar navbar-expand-md navbar-dark bg-white fixed-top"> 19 <a href="#" class="navbar-brand"><img src="img/nuno.png" alt=""></a> 20 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> 21 <span class="navbar-toggler-icon"></span> 22 </button> 23 24 <div class="collapse navbar-collapse" id="navbarResponsive"> 25 <ul class="navbar-nav ml-auto"> 26 <li class="nav-item"> 27 <a href="#home" class="nav-link">Home</a> 28 </li> 29 <li class="nav-item"> 30 <a href="#course" class="nav-link">Course</a> 31 </li> 32 <li class="nav-item"> 33 <a href="#features" class="nav-link">Features</a> 34 </li> 35 <li class="nav-item"> 36 <a href="#resources" class="nav-link">Resources</a> 37 </li> 38 <li class="nav-item"> 39 <a href="#clients" class="nav-link">Clinents</a> 40 </li> 41 <li class="nav-item"> 42 <a href="#contact" class="nav-link">Contact</a> 43 </li> 44 </ul> 45 </div> 46</nav> 47<!--End Navigation--> 48 49<!--Start Landing Page Section--> 50<div class="landing"> 51 <div class="home-wrap"> 52 <div class="home-inner"></div> 53 </div> 54</div> 55 56<div class="caption text-center"> 57 <h1>Welcome to Nuno</h1> 58 <h3>Udemy Bootstrap 4 Course</h3> 59 <a href="#course" class="btn btn-outline-light btn-lg">Get Started</a> 60</div> 61<!--End Landing Page Section--> 62</div> 63<!--End Home Section--> 64 65<!--Start Course Section--> 66<div id="course" class="offset"> 67 <div class="col-12 narrow text-center"> 68 <h1></h1> 69 <p class="lead"></p> 70 <a href="#" class="btn btn-secondary btn-md" target="_blank">Bootstrap Course</a> 71 </div> 72</div> 73<!--End Course Section--> 74 75<!--Start Feature Section--> 76<div id="features" class="offset"> 77 78<!--Start Jumbotron--> 79<div class="jumbotron"> 80 <div class="narrow text-center"> 81 <div class="col-12"> 82 <h3 class="heading">Features</h3> 83 <div class="heading-underline"></div> 84 </div> 85 86 <div class="row text-center"> 87 <div class="col-md-4"> 88 <div class="feature"> 89 <i class="fas fa-play-circle fa-4x" data-fa-transform="shrink-3 up-5"></i> 90 <h3>Content Slider</h3> 91 <p>・・・</p> 92 93 </div> 94 </div> 95 <div class="col-md-4"> 96 <div class="feature"> 97 <i class="fas fa-sliders-h fa-4x" data-fa-transform="shrink-4.5 up-4.5"></i> 98 <h3>Custom Animation</h3> 99 <p></p> 100 101 </div> 102 </div> 103 <div class="col-md-4"> 104 <div class="feature"> 105 <i class="fab fa-wpforms fa-4x" data-fa-transform="shrink-4 up-5"></i> 106 <h3>Contact Form</h3> 107 <p>・・・</p> 108 109 </div> 110 </div> 111 </div> 112 113 </div> 114</div> 115<!--End Jumbotron--> 116 117</div> 118<!--End Feature Section--> 119 120<!--Start Resources Section--> 121<div id="resources" class="offset"> 122 123 <div class="fixed-background"> 124 125 <div class="row dark text-center"> 126 127 <div class="col-12"> 128 <h3 class="heading">Built With Care</h3> 129 <div class="heading-underline"></div> 130 </div> 131 132 <div class="col-md-4"> 133 <h3>HTML 5</h3> 134 <div class="feature"> 135 <i class="fas fa-code fa-3x"></i> 136 </div> 137 <p class="lead">Built with the latest, HTML 5</p> 138 </div> 139 <div class="col-md-4"> 140 <h3>BOOTSTRAP 4</h3> 141 <div class="feature"> 142 <i class="fas fa-bold fa-3x"></i> 143 </div> 144 <p class="lead">Built with the latest, BOOTSTRAP 4</p> 145 </div> 146 <div class="col-md-4"> 147 <h3>CSS 3</h3> 148 <div class="feature"> 149 <i class="fab fa-css3 fa-3x"></i> 150 </div> 151 <p class="lead">Built with the latest, CSS 3</p> 152 </div> 153 154 <div class="fixed-wrap"> 155 <div class="fixed"></div> 156 </div> 157 158 </div> 159 </div> 160 161</div> 162<!--End Resources Section--> 163 164<!--Start Clinents Section--> 165<div id="clients" class="offset"> 166 <!--Start Jumbotron--> 167 <div class="jumbotron"> 168 169 <div class="col-12 text-center"> 170 <h3 class="heading">Clinents</h3> 171 <div class="heading-underline"></div> 172 </div> 173 174 <div class="row"> 175 176 <div class="col-md-6 clients"> 177 <div class="row"> 178 <div class="col-md-4"> 179 <img src="img/client1.png" alt=""> 180 </div> 181 <div class="col-md-8"> 182 <blockquote> 183 <i class="fas fa-quote-left"></i> 184 185 <hr class="clients-hr"> 186 <cite>— Eric, Small Business Owner</cite> 187 </blockquote> 188 </div> 189 </div> 190 </div> 191 192 <div class="col-md-6 clients"> 193 <div class="row"> 194 <div class="col-md-4"> 195 <img src="img/client2.png" alt=""> 196 </div> 197 <div class="col-md-8"> 198 <blockquote> 199 <i class="fas fa-quote-left"></i> 200 201 <hr class="clients-hr"> 202 <cite>— Rachel, Professional Photographer</cite> 203 </blockquote> 204 </div> 205 </div> 206 </div> 207 208 </div> 209 </div> 210 <!--End Jumbotron--> 211 212 <div class="col-12 narrow text-center"> 213 <p class="lead">・・・</p> 214 <a href="#" class="btn btn-secondary btn-md" target="_blank">Bootstrap Course</a> 215 </div> 216 217</div> 218<!--End Clinents Section--> 219 220<!--Start Contact Section--> 221<div id="contact" class="offset"> 222<footer> 223 <div class="row justify-content-center"> 224 <div class="col-md-5 text-center"> 225 <img src="img/nuno.png" alt=""> 226 <p>・・・</p> 227 <strong>Contact Into</strong> 228 <p>(888) 888-8888<br>email@nuno.com</p> 229 <a href="#" target="_blank"><i class="fab fa-facebook-square"></i></a> 230 <a href="#" target="_blank"><i class="fab fa-twitter-square"></i></a> 231 <a href="#" target="_blank"><i class="fab fa-instagram"></i></a> 232 </div> 233 234 <hr class="socket"> 235 ©Nuno Theme 236 </div> 237</footer> 238</div> 239<!--End Contact Section--> 240 241 242</body> 243</html> 244 245
css
1@import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 3body{ 4 overflow-x: hidden;/*横方向にはみ出た部分なくなる*/ 5 font-family: 'Lato', sans-serif; 6 color: #505962; 7} 8 9.offset::before{ 10 display: block; 11 content: ""; 12 height: 4rem; 13 margin-top: -4rem; 14} 15 16/*Navigation*/ 17.navbar{ 18 text-transform: uppercase;/*大文字*/ 19 font-weight: 700; 20 font-size: .9rem; 21 letter-spacing: .1rem; 22 background: rgba(0,0,0,0.7)!important; 23} 24.navbar-brand img{ 25 height: 2rem; 26} 27.navbar-nav li{ 28 padding-right: .7rem; 29} 30.navbar-dark .navbar-nav .nav-link{ 31 color: white; 32 padding-top: .8rem; 33} 34.navbar-dark .navbar-nav .nav-link.active, 35.navbar-dark .navbar-nav .nav-link:hover{ 36 color: #1ebba3; 37} 38 39
●自分で行ったこと
・ググったがいまいち感覚がつかめなかった。
調べたサイト→ https://wa3.i-3-i.info/word11923.html
●質問内容（以下の全てに答えてくれると幸いです。）
・cssのコードの上から9行目辺りからoffsetについて書いてありますが、これはいったいどんなデザインを指定しているのでしょうか。
・どんな時に使うスタイルでしょうか。
・自分が調べたサイト以外によいサイト、わかりやすいサイトがあれば教えてください。
質問タグにbootstrapを追加してください。
おそらく、bootstrapで用意しているクラスと思われますので。
と思ったら、bootstrapにはなさそうという・・・。
.offset-*** と、指定を後方につけるのは存在してますが。
サンプルコードの出典を明示してください。
自分で書いたコードです
ん？
質問されてることが分からずになぜ書けるんでしょ
回答1件
0
ベストアンサー
提示されているコードのoffsetはただのclass名であり、
参考にされたサイトのoffsetとは関係ありません。
・cssのコードの上から9行目辺りからoffsetについて書いてありますが、これはいったいどんなデザインを指定しているのでしょうか。
→ただのブロック要素です
投稿2020/03/26 02:37
総合スコア480
あなたの回答
tips
プレビュー
