質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

210閲覧

2枚目のbackground-imageを入れたら1枚目も2枚目の画像になってします。

taktak0201

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/12/14 23:52

前提・実現したいこと

デイトラの課題でBootstorap編の動画②をしています。
background-imageの設定をページの上下にしなくてはいけないのですが、
1枚目は出来たのですが2枚目を設定すると1枚目も2枚目と同じ画像に変わってしまいます。
どなかご教授ください。

発生している問題

background-imageの1枚目が2枚目と同じになってしまう

### 該当のソースコード <!---Start Landing Page section--> <div class="landing"> <div clss="home-wrap"> <div class="home-inner"> </div> </div> </div> <div class="caption text-center"> <h1>Welcome to Nuno</h1> <h3>Udemy Bootstrap 4 Course</h3> <a class="btn btn-outline-light btn-lg" href="#course">Get Started</a> </div> <!---End Start Landing Page section--> </div> <!----End Home Section--> <!---Start Course Section--> <div id="course" class="offset"> <div class="col-12 narrow text-center bg-white"> <h1>Nuno theme Advanced Bootstrap Course</h1> <p class="lead">Learn Bootstrap by creating an advanced Bootstrap 4 Responsive Website Template from scratch, with no steps skipped!</p> <a class="btn btn-secondary btn-md" href="#" target="_blank">Bootstrap Course</a> </div> </div> <!----End Course Section--> <!---Start Features Section--> <div id="features" class="offset"> <!---start jumbotron--> <div class="jumbotron"> <div class="narrow text-center"> <div class="col-12"> <h3 class="heading">FEATURES</h3> <div class="heading-underline"></div> </div> <div class="row text-center"> <div class="col-md-4"> <div class="feature"> <i class="fas fa-play-circle fa-4x" data-fa-transform="shrink-3 up-5"></i> </div> <h3>Custom Animation</h3> <p>Animation css and Waypoints.js allow for smooth Animations scrolling down the site.</p> </div> <div class="col-md-4"> <div class="feature"> <i class="fas fa-sliders-h fa-4x" data-fa-transform="shrink-4.5 up-4.5"></i> <h3>Contens Slider</h3> <p>Owl.carousel.js makes navigating contens sliders seamless with it's content carousel Navigation </p> </div> </div> <div class="col-md-4"> <div class="feature"> <i class="fab fa-wpforms fa-4x" data-fa-transform="shrink-4 up-5"></i> <h3>Contact Form</h3> <p>The Bootstrap HTML form will send directly to your email address using PHPMailer.php </p> </div> </div> </div><!--End row--> </div><!---End Narrow--> </div><!---End jumbotron--> </div> <!----End Features Section--> <!---Start Resources Section--> <div id="resources" class="offset"> <div class="fixed-background"> <div class="row dark text-center"> <div class="col-12"> <h3 class="heading">Built with Care</h3> <div class="heading-underline"></div> </div> <div class="col-md-4"> <h3>HTML 5</h3> <div class="feature"> <i class="fas fa-code fa-3x"></i> </div> <p class="lead">Built with the latest,HTML 5.</p> </div> <div class="col-md-4"> <h3>Bootstrap 4</h3> <div class="feature"> <i class="fas fa-bold fa-3x"></i> </div> <p class="lead">Built with the latest,Bootstrap 4.</p> </div> <div class="col-md-4"> <h3>CSS 3</h3> <div class="feature"> <i class="fab fa-css3 fa-3x"></i> </div> <p class="lead">Built with the latest,CSS 3.</p> </div> </div> <!--End row dark--> </div> <!--End fixed background--> <div clss="fixed-wrap"> <div class="fixed"> </div> </div> </div> <!----End Resources Section--> <!---Start Clients Section--> <div id="clients" class="offset"> <!---Start Jumbotron--> <div class="jumbotron"> <div class="col-12 text-center"> <h3 class="heading">Clients</h3> <div class="heading-underline"></div> </div> <div class="row"> <div class="col-md-6 clients"> <dic class="row"> <div class="col-md-4"> <img src="img/client1.png"> </div> <div class="col-md-8"> <blockquote> <i class="fas fa-quote-left"></i> I see Nuno support as more of a partner to my company than a resource. I can pick up the phone and talk to anyone at any time and the way that they interact with us as a business makes it really simple. <hr class="clients-hr"> <cite>&#8212; Eric,small Business owner</cite> </blockquote> </div> </dic> </div> <div class="col-md-6 clients"> <dic class="row"> <div class="col-md-4"> <img src="img/client2.png"> </div> <div class="col-md-8"> <blockquote> <i class="fas fa-quote-left"></i> I see Nuno support as more of a partner to my company than a resource. I can pick up the phone and talk to anyone at any time and the way that they interact with us as a business makes it really simple. <hr class="clients-hr"> <cite>&#8212; Rachel,Professional Photographer</cite> </blockquote> </div> </dic> </div> </div><!--End row--> </div><!--End jumbotron--> <div class="col-12 narrow text-center"> <p class="lead">Want to learn more about developing Bootstrap Themes?</p> <a class="btn btn-secondary btn-md" href="#" target="_blank">Bootstrap Course</a> </div> </div> <!----End Clients Section--> <!---Start Contact Section--> <div id="contact" class="offset"> <footer> <div class="row justify-content-center"> <div class="col-md-5 text-center"> <img src="img/nuno.png"> <p>At our core is collection of design and development solutions that represent everything your business needs to compete in the modern marketplace.</p> <strong>Contact Info</strong> <p>(888)888-8888<br>email@nuno.com</p> <a href="#" target="_blank"><i class="fab fa-facebook-square"></i></a> <a href="#" target="_blank"><i class="fab fa-twitter-square"></i></a> <a href="#" target="_blank"><i class="fab fa-instagram"></i></a> </div> <hr class="socket"> &copy; Nuno Theme. </div> </footer> </div> <!----End Contact Section--> <!--- Script Source Files --> <script src="js/jquery-3.3.1.min.js"></script> <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script> <!--- End of Script Source Files --> </body> </html> CSS @import url('https://fonts.googleapis.com/css?family=Lato:400,700'); body{ overflow-x: hidden; font-family:'Lato', sans-serif; color: #505962; } .offset::before{ display: block; content: ""; height: 4rem; margin-top: -4rem; } /*---Navigation---*/ .navbar{ text-transform: uppercase; font-weight: 700; font-size: .9rem; letter-spacing: .1rem; background: rgba(0,0,0,0.6)!important; } .navbar-brand img{ height: 2rem; } .navbar-nav li{ padding-right: .7rem; } .navbar-dark .navbar-nav .nav-link{ color: white; padding-top: .8rem; } .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link:hover{ color: #1ebba3; } /*--- Landing page----*/ .home-inner{ background-image: url(img/computers.png); } .caption{ width: 100%; max-width: 100%; position: absolute; top: 38%; z-index: 1; color: white; text-transform: uppercase; } .caption h1{ font-size: 3.8rem; font-weight: 700; letter-spacing: .3rem; text-shadow: .1rem .1rem .8rem black; padding-bottom: 1rem; } .caption h3{ font-size: 2rem; text-shadow: .1rem 1rem .5rem black; padding-bottom: 1.6rem; } btn-lg{ border-width: medium; border-radius: 0; padding: .6rem 1.3rem; font-size: 1.1rem; } /*---Course Section --*/ .narrow{ width: 100%; margin: 0rem auto; padding-top: 2rem; } .narrow h1{ font-size: 2.4rem; } .btn-secondary{ border-width: medium; border-radius: 0; text-transform: uppercase; font-size: 1.2rem; padding: .6rem 1.2rem; margin: 1rem; color: white; background-color: #1ebba3; border-color: #1ebba3; } .btn-secondary:hover{ background-color: #189582; border-color: #189582; } /*---feature section---*/ .jumbotron{ margin-bottom: 0; padding: 2rem 0 3.5rem; border-radius: 0; } h3.heading{ font-size: 1.9rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1.9rem; } .heading-underline{ width: 3rem; height: .2rem; background-color: #1ebba3; margin: 0 auto 2rem; } .feature svg.svg-inline--fa{ color: #1ebba3; } .feature h3{ font-size: 1.3rem; text-transform: uppercase; padding-bottom: .4rem; } .feature p{ font-size: 1.1rem; } /*---Resources Section --*/ .fixed{ background-image: url(img/apple.png); z-index: -1; } .dark{ background-color: rgba(0,0,0,0.7); color: white; padding: 7rem 2rem; } .fixed-background h3{ } .fixed-background p{ } /*============ BOOTSTRAP BREAK POINTS: Extra small (xs) devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap Small (sm) devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } Medium (md) devices (tablets, 768px and up) @media (min-width: 768px) { ... } Large (lg) devices (desktops, 992px and up) @media (min-width: 992px) { ... } Extra (xl) large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } =============*/ ```ここに言語名を入力 HTML CSS Bootstrap ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/12/15 00:21 編集

(質問は編集できます) ファイルが違うのでしたらコードブロックはわけてください。 あと、コードが非常に長くて問題切り分けが難しくなっていると思います。 もっと最小構成のコードで試してみてください。
taktak0201

2019/12/16 01:34

考察、ありがとうございました。 最小構成コードすら分からない勉強中の身ですので、 そのまま張り付けておりましたが、無事解決までいけました。
m.ts10806

2019/12/16 01:51

>最小構成コードすら 「問題が再現する」が前提の、本当に必要なところだけ切り出したコードです。 ここまでhtmlもcssがなくてもやりたいことに関係ある部分で事足りるわけですから、改めてそこだけ切り出して作ると良いです。 一部分にフォーカスすることになるので構文やタイプミスにも気づきやすくなります
m.ts10806

2019/12/16 01:52

あと、最所に書いたように「質問は編集できます」ので、せめて別ファイルは別コードブロックにするように調整いただけませんか?
guest

回答1

0

ベストアンサー

###回答
タイプミスをいくつか発見しました。

1つ目:<div clss="home-wrap"> ➡class

2つ目:<div clss="fixed-wrap"> ➡class

3つ目:<dic class="row"> ➡div ※4箇所

以上

投稿2019/12/15 05:56

KazuSaka

総合スコア640

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taktak0201

2019/12/16 01:32

ありがとうございます! 無事、解決致しました! 全然自分では気が付きませんでした・・
KazuSaka

2019/12/16 02:02

入力補完してくれるEmmetを使えばタグのタイプミスはなくなると思います。 使われていないのであれば、使った方がいいと思います。勉強段階から慣れるためにも!頑張ってください!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問