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

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

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

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

Q&A

解決済

1回答

968閲覧

Bootstrapの写真がエラーになる

shinpachi

総合スコア44

Bootstrap

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

0グッド

1クリップ

投稿2019/06/12 11:20

編集2019/06/13 05:38

Bootstrap

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <title>始めてのBootstrap</title> 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 9 <!-- Bootstrap CSS --> 10 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 11 12 13 <style> 14 .cover { 15 background: url(img/bg.png); 16 background-size: contain; 17 } 18 </style> 19 </head> 20 <body> 21 <header> 22 <div class="cover text-block text-center py-5"> 23 <h1 class="display-4 mb-4">プログラミング学習</h1> 24 <a href="" class="btn btn-primary btn-lg"> Get It Now!</a> 25 </div> 26 </header> 27 <section class="py-5"> 28 <h2 "text-center mb-5">Bootstrapとは</h2> 29 <div class="container"> 30 <div> 31 <h3>Awesome</h3> 32 <p>BootstrapはHTML/CSS/JavaScriptから構成される最も有名なWEBフレームワークです。 33 WEBページでよく使われるフォーム、ボタン、メニューなどの部品がテンプレートとして用意されています。 34 また、デザイン性も確保されているため、WEBページのスタイルも最低限の調整で済んでしまいます。</p> 35 <!--謎↓--> 36 <img src="img/boot.png" class="w-100"> 37 </div> 38 </div> 39 </section> 40 <main> 41 </main> 42 <footer> 43 </footer> 44 45 46 <!-- Optional JavaScript --> 47 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 48 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 49 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 50 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 51 </body> 52</html>

質問させていただくのがまだあまりなくどのようにお聞きすればよろしいかわからないので
多めにみていただけるとありがたいです。

そして質問なんですが上記の(謎)と書いているところに写真を埋めたいのですが、
写真がアップロードできず困っております。

写真の名前は(boot.png)になっており、もし解決方法あれば教えていただきたいと思います

もう一つ質問として、写真のjpg png..などは埋め込む際こちらしか入れれないなどあるんでしょうか?

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/06/12 11:26

こんにちは! コード拝見しました! パスは間違いありませんか? 確認の為にフォルダ構成が知りたいです!
s8_chu

2019/06/12 11:29

「アップロード出来ない」とのことですが、具体的にはどこまでは出来ているのかを教えていただけませんか?
shinpachi

2019/06/12 11:34

jimbaranさん MyBootstrap/img/boot.pngになります! s8_chuさん 写真は埋まっていますが?マークとなっております。
退会済みユーザー

退会済みユーザー

2019/06/12 11:37

できれば詳しく知りたいです! htmlの場所はどちらですか?
shinpachi

2019/06/12 11:42

MyBootstrap/index.html img と言う場所です! htmlとimgは同じ所に置いております
退会済みユーザー

退会済みユーザー

2019/06/12 12:37

ありがとうございます! ちなみに下記は反映されていますか? <style> .cover { background: url(img/bg.png); background-size: contain; } </style>
m.ts10806

2019/06/12 13:05

コードはマークダウンのcode機能を利用してご提示ください。 ※わかりづらければファイル毎にコードを選択し<code>ボタンを押すだけでも良いです
m.ts10806

2019/06/12 13:07

念のため、画像のURLを直接ブラウザのアドレスバーに入れて表示確認をして、 参照しようとしているHTML、またはCSSからの相対位置を確認してください。
shinpachi

2019/06/13 04:39

jimbaranさん はい!反映しています。 backgroundで使用している写真であれば全ての位置で反映しますが、 別の写真になった際反映しません。 mts10806さん かしこまりました! ありがとうございます!
m.ts10806

2019/06/13 04:46

一応念のため。質問は編集できますので、適宜ご対応ください。
shinpachi

2019/06/13 05:41

mts10806さん 変更させていただきました! 教えていただきありがとうございます。
guest

回答1

0

自己解決

何度も写真を入れ直していたら治りました。
あまり解決方法はわかりませんでしたが解決できて良かったです^ ^

投稿2019/06/25 17:09

shinpachi

総合スコア44

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問