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..などは埋め込む際こちらしか入れれないなどあるんでしょうか?
こんにちは!
コード拝見しました!
パスは間違いありませんか?
確認の為にフォルダ構成が知りたいです!
「アップロード出来ない」とのことですが、具体的にはどこまでは出来ているのかを教えていただけませんか?
jimbaranさん
MyBootstrap/img/boot.pngになります!
s8_chuさん
写真は埋まっていますが?マークとなっております。
できれば詳しく知りたいです!
htmlの場所はどちらですか?
MyBootstrap/index.html img
と言う場所です!
htmlとimgは同じ所に置いております
ありがとうございます!
ちなみに下記は反映されていますか?
<style>
.cover {
background: url(img/bg.png);
background-size: contain;
}
</style>
コードはマークダウンのcode機能を利用してご提示ください。
※わかりづらければファイル毎にコードを選択し<code>ボタンを押すだけでも良いです
念のため、画像のURLを直接ブラウザのアドレスバーに入れて表示確認をして、
参照しようとしているHTML、またはCSSからの相対位置を確認してください。
jimbaranさん
はい!反映しています。
backgroundで使用している写真であれば全ての位置で反映しますが、
別の写真になった際反映しません。
mts10806さん
かしこまりました!
ありがとうございます!
一応念のため。質問は編集できますので、適宜ご対応ください。
mts10806さん
変更させていただきました!
教えていただきありがとうございます。
回答1件
あなたの回答
tips
プレビュー