HTML、CSS、Sass、Bootstrapを用いてサイト模写の練習をする。
1: 必要ファイルの準備
sample.html、sample.css、sample.scss を作成
.htmlファイル内で、html:5と入力( VSCode の emmet を使用 ）。
sample.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>サンプル</title></head><body></body></html>2: SCSSの読み込み
sample.scssをsample.cssにコンパイルするために、
VSCodeの拡張機能「Live Sass Compile」を使用。
⬇︎
htmlのheadでsample.cssを読み込む
sample.html
<linkrel="stylesheet"href="sample.css">これでsample.scssの記述が反映される。
3: Bootstrapの読み込み
htmlのheadで読み込む
sample.html
<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">これでbootstrapの記述が反映される。