おはこんばにちは、ミヤビです。
さて今回は、HTML5/CSS3/Bootstrap4の復習になります。
DAY17. 『HTML5/CSS3/Bootstrap4の復習』
DAY13〜16まで、Bootstrap4を使ったビジネスLP制作を進めてきました。
インプット多めだったので、本日はその復習に当てましょう👍
ついでに学んだことをツイートやブログでアウトプットしてみて下さい‼️#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/bB1lEFXrrr— ショーヘー@東京フリーランスCMO (@showheyohtaki) January 23, 2019
✔︎本記事の内容
- DAY17.『HTML5/CSS3/Bootstrap4の復習』の解説
✔︎30DAYSトライアル1stの最終目標
- 月5万を稼ぐスキルを目指す
- 未経験からWEB系エンジニアの転職を目指す
- 未経験からWEB系ノマドエンジニアを目指す
HTML5/CSS3/Bootstrap4の復習
Bootstrapで学んだことをまとめます。
基本的には、下記を参考にすればオッケーです。
- 【DAY13.】30DAYSトライアル13日目をわかりやすく解説
- 【DAY14.】30DAYSトライアル14日目をわかりやすく解説
- 【DAY15.】30DAYSトライアル15日目をわかりやすく解説
- 【DAY16.】30DAYSトライアル16日目をわかりやすく解説
Bootstrap4の基本テンプレート
下準備はこれでオッケーです。
<!doctype html>
<html lang="ja">
<head>
<title>Bootstrap基本テンプレート</title>
<!-- 必要なメタタグ -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<h1>こんにちは!</h1>
...
<!-- オプションのJavaScript -->
<!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
shrink-to-fit=”no”は、iOS9.0のsafariにおいて、initial-scale=1が適用されないのを回避するのに設定します。
グリッドシステムのおさらい
Bootstrapでは、目に見えない12本のグリッドライン（縦線）が存在します。
詳しくは、Bootstrapのグリッドシステムの使い方を初心者に向けておさらいするがわかりやすいです。
そしてBootstrapは、下記の３つのクラスで構成されています。
- container コンテナ
- row 行
- col 列（グリッド）
<div class="container-fluid"> //.rowと.colを格納する
<div class="row"> //行を与える
<div class="col-画面幅-グリッド数"></div> //画面幅に対し何グリッドで構成するか
</div>
<div>
だいたいのWEBサイトは、下記の構造になっているので、Bootstrapを使えば、それっぽいサイトはできます。
- ヘッダー(レスポンシブ対応)
- トップ画(カルーセル付きとか)
- ジャンボトロン(説明)
- セクション1
- セクション2
- セクション3
- フッター
全く何も見ずにコードを書いてくのはキツイので、Bootstrap4 チートシートを見れば、わりと楽チンに作れたりするかもです。
ローカル環境を構築しよう【おまけ】
ローカル環境を構築する方法と手順を再確認します。
- VSCodeをインストール【無料】
- プラグインをインストール
- Emmetの理解
好みなので、別にVSCodeじゃなくてよいかもですが、標準装備でEmmetが付いているので、VSCodeがオススメです。
DAY8.で解説しているので参考にしてください。
というわけで、今回はここまで。
次回からは、ポートフォリオの作成に入っていきます。
学んだことをどんどんアウトプットしていきましょう。
