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

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

Bootstrapに挑戦する画像

 

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

 

さて今回からは、 ドットインストールでBootstrapの基本を学んでいきましょう。

 

Progateと同様、ドットインストールも月額たったの1,080円なのでケチらず課金しましょう。

 

レッスンとしては、Bootstrap4入門(全22回)なので2日で終わるレベルです。

 

ぶっちゃけ1ヶ月で十分なので、Bootstrap4(全22回)が終わり次第、HTMLやCSS、JavaScript、jQueryの動画でも見ておきましょう。

 

コーディングスキルが手に入れば、余裕で回収できますので是非チャレンジしましょう。

 

 

✔︎本記事の内容

  • DAY11.『Bootstrapの基本を学ぼう』の解説

 

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

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

 

Bootstrapの基本を学ぼう【ドットインストール #01~#09】

Bootstrapのホームページ

ドットインストールでインプットしつつ、VSCodeでアウトプットしていきましょう。

Bootstrapとは何か

いわゆるCSSのフレームワークになります。

 

フレームワークというのは、ザックリとシステム開発を楽にしてくれる雛形みたいな感じです。

 

Bootstrapを用いれば、HTMLにCSSを簡単に組み入れることができます。

 

ProgateではCSSのスタイルにCSSを記述していましたが、Bootstrapを使えば、予め定義されているBootstrap用のスタイルでCSSを書くことができます。

 

Bootstrapを使うメリット

 

  • コーディング量が大幅に減る
  • レスポンシブデザインにも対応

 

Progateで学びましたが、スマホやタブレット、PCなどの個別のスタイルを用意する必要がありました。

 

しかし、Bootstrapを使えば、HTMLにclass名をつけるだけでCSSの役割を果たすことができてしまいます。

 

なので、工数が大幅に減ることでコーディングの効率化が高まります。

 

しかも、レスポンシブ対応。

 

画面の横幅をスクロールして縮小すると、横幅を100%サイズに合わせてくれます。

 

 Bootstrapを使うデメリット

 

  •  CSSを理解しないでもコーディングできる
  • Bootstrap特有の使い方を新たに覚える
  •  Webサイトが「Bootstrap臭」になりがち

 

コーディングを学ぶ手順としては、、、

 

HTML→CSS→(jQuery)→Bootstrapの順が良いと思います

 

なぜなら、BootstrapはHTML、CSS、JavaScriptで構成されているからです。

 

とはいえ、「Bootstrap臭」になりがちになってしまう点もありますが、気にせず学習しましょう。

 

グリッドシステムを理解しよう

グリッドシステムは奥が深いので、自分でググってみましょう。

 

そもそもプログラミングは、自分でググって課題解決を図ることが大切であるとも言われているので、自分で調べる力を身につける必要があります。

 

››参考 Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

 

Bootstrapを始めよう【準備は簡単】

下記をコピペで準備は完了です。

 

<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<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">

<title> Bootstrap4入門</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then 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>

 

あとは、bodyタグの中にコードを記述していくだけです。

 

VSCodeでEmmetやショートカットキーを活用しよう

VSCodeで環境開発を行う場合は、DAY8.とDAY9.で学んだEmmetショートカットキーを積極的に活用すべきですね。

 

  • 行の削除
  • 行のコピー
  • divのclass名

 

ドットインストールでも、さり気なく使われているので、積極的に活用しコーディングに慣れていきましょう。

 

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

 

次回で、ドットインストールのBootstrap学習を終わりにしましょう。

 

Bootstrap学習の画像 【DAY12.】30DAYSトライアル12日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】