【告知】ノマドエンジニア養成ブートキャンプ

【DAY17.】30DAYSトライアル17日目をわかりやすく解説

チェックリストと男性

おはこんばにちは、ミヤビです。

 

さて今回は、HTML5/CSS3/Bootstrap4の復習になります。

 

 

✔︎本記事の内容

  • DAY17.『HTML5/CSS3/Bootstrap4の復習』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

 

HTML5/CSS3/Bootstrap4の復習

Bootstrapで学んだことをまとめます。

 

基本的には、下記を参考にすればオッケーです。

 

 

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は、下記の3つのクラスで構成されています。

 

  • 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.で解説しているので参考にしてください。

 

というわけで、今回はここまで。

 

次回からは、ポートフォリオの作成に入っていきます。

 

学んだことをどんどんアウトプットしていきましょう。