おさらい
前回まではpost内容をブラウザに表示させるところまでやりました。
Bootstrapを適用させ、ブラウザの画面サイズにページが付いてくる様にする
今のままだと画面サイズを変えた時に画像や本文が見えなくなってしまう可能性があります。
そこでBootstrapを適用したいと思います。リンクを踏んでいただくとDocumentationに飛ぶ様になっています。
ページ左端にメニューがあると思いますので、ここから随時必要なパーツがあるところにアクセスしていきます。
最初にBootstrapを適用させるコードを追加します。Getting startedからCSSの欄に書いてある以下のコードをindex.htmlに追加します。
<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">
次にContents→imagesと飛び、Responsive imagesを見ます。
ここでは画面に合わせて画像を変えていくためにはimgタグの中にclass="img-fluid"を追加しろと書かれていますのでそうしましょう。
<img src=.... class="img-fluid" />
ここまでできたらブラウザを更新して、ブラウザの画面サイズを変えてみましょう。
うまく画像が付いてきているはずです。
ここまでで簡単なアプリケーションができるまでを終わります。