【デイトラ】Web制作コース初級編③『Bootstrap学習編』の感想と学習記録

タキのデイトラ学習記録

こんにちは、アルパカ(@engineeraru)です。

デイトラのWeb制作コース初級編『Bootstrap学習編』を学習するときに役立つ情報をまとめました。

デイトラ Web制作コース初級編『Bootstrap学習編』の学習記録

【DAY10】Bootstrapの基本を学ぶ①

POINT
Bootstrapを理解する

今までは

  • 自作のHTMLファイル
  • 自作のCSSファイル

だけでコーディングしてきましたね。

 

しかし、他の人が作ったCSSファイル(デザイン)やHTMLのパーツも使えたら、便利じゃないでしょうか?

いちいち、細かいデザイン書くのも大変ですし、誰かが書いたものを使えたら楽ですよね。

そんな時に便利なのがBootstrapというCSSフレームワークです。

補足

Bootstrapとは、Twitter社の賢くてセンスあるエンジニア達が作った「超良くできたCSSファイル」が無料で一般公開されたもの…というイメージです。

要は「これ、使いやすいから、他の人も使いなよ!」って言って、使わせてもらえるようになったんですね(ありがたや)

Bootstrapはネット上に公開された「超良くできたCSSファイル」を読み込むだけで使えます。

その結果、

  • 自作のHTMLファイル
  • 超良くできたBootstrapのCSSファイル
  • 自作のCSSファイル ※書く量が少なくなる

でWebページが作れるようなイメージです。

 

Bootstrapを学びたい人はドットインストールのBootstrap教材(無料部分あり)も見てみると良いかも

復習時に読むべき記事

 

【DAY11】Bootstrapの基本を学ぶ②

POINT
Gridレイアウトを理解する!

Bootstrapの中で、いちばん重要なのが「Gridレイアウト」です。

こちらのGridレイアウトに関する記事が分かりやすいです。

サイトの横幅を均等に分けるガイドラインを「グリッド」と呼びます。Bootstrapでは12本のグリッドが存在します。

グリッドシステム

グリッドに沿って表示物を配置しておけば、パソコンやスマホなど画面幅が異なってもレイアウトを組み替えやすくなります。

このグリッドを活用してレイアウトできる仕組みを「グリッドシステム」というんですね。複雑なレイアウトでも簡単にレスポンシブにできます。こんなふうに。

レスポンシブの動きをgifアニメで表現

こんな風に、裏側で「12列」に区切ってレイアウトを用意してくれるんですね。

そんな前提があったうえで「この要素に何列分使うか」を指定する方法ということですね。

あと、下記の記事も読んでおくと理解がはかどりますよ

復習時に読むべき記事

 

【DAY12】Bootstrapの基本を学ぶ③

POINT
Bootstrapを実際に使う!

これはもう教材の動画がめちゃくちゃ素晴らしいので、動画を見ながら実際に手を動かすのがオススメです。

BootstrapはHTMLのパーツを使える

DAY10でも書いたとおり、Bootstrapを使うと

  • 自作のHTMLファイル
  • 超良くできたBootstrapのCSSファイル
  • 自作のCSSファイル ※書く量が少なくなる

という構成でウェブページを作れます。

実は更に便利なことに、Bootstrapの公式サイトに用意された「HTMLのパーツ」を使うことも出来ます!

自作のHTMLファイルを全て自分で書かなくて済むんですね(超便利)。

HTMLもCSSも自分で書く量が10%くらいになってスゴいです。

 

mbやpyが何かわからない

mbやpyが何かわかりましたか?

これはmarginやpaddingの指定方法です。

そもそもmarginやpaddingって何?という方は、CSSのmarginとは?paddingとは?余白の指定方法まとめを読んでおさらいしましょう。

あと、当たり前ですがbootstrapの「mb」は「margin bottom」の略ですので、理解しておきましょう😊

以下、簡単にまとめておきます

  • m-auto : (all) ※他の要素に合わせて自動で決まる
  • ml-auto : left
  • mr-auto : right
  • mt-auto : top
  • mb-auto : bottom
  • mx-auto : left + right
  • my-auto : top + bottom

 

勝手にタグが入力されるのは何故?

動画を見ていると、自分で全て打っていないのに勝手にタグが表示されますよね。

これは、過去にも学んだ「Emmet」の力です。

Emmetのルールに沿って書いたあとに、Tabキーを押すと、入力の手間が省けますね。

最低でも以下の3つのルールだけ覚えておくと良いですよ!

  1. タグ名.クラス名 → classが付く
  2. タグ名#id名 → idが付く
  3. タグ名{要素} → タグの中に要素が入る

Emmetのチートシートもダウンロード or 印刷しておくと良いですよ!

 

マルチカーソル

複数箇所をまとめて修正する方法もこのタイミングで覚えておきましょう!

マルチカーソルという機能を使います(矩形選択と言ったりもします)

VSCodeのマルチカーソル練習帳という記事が分かりやすいです

json2java.gif

他にもこのマルチカーソル記事も見てみると良いかもしれません。

 

【DAY13, DAY14】Bootstrap復習

POINT
Bootstrapを使いこなす!

Bootstrapの基本ですが

  • BootstrapのCSSを読み込む
  • Bootstrap公式サイトのHTMLパーツを検索して使う

ことができればとりあえずOKだと思います。

 

ちなみに英語ドキュメントを読むときにわからない単語が出てきたら、Google翻訳を使いましょう(常識ですが)。

あと、Google翻訳は、Chromeの拡張機能もあります。入れておくと、もっと楽に翻訳できるのでオススメですよ。

 

デイトラ Web制作コース初級編『Bootstrap学習編』まとめ

Bootstrap(ブートストラップ)とは何か簡単におさらい

  • フロントエンドWebアプリケーションフレームワーク(CSSフレームワークとも言う)
  • HTML,CSS,JavaScriptで構成される
  • 元々はTwitter社内で開発されて使われていた
  • ライセンスはMIT License(商用利用可能)
  • HTML5,CSS3ではサポートは不完全だが、主要なWebブラウザと互換性あり
  • とにかく有名!よく使われている!

 

Bootstrapの主なメリットは以下の3点ですね。

  • フレームワークなので「CSSを自分で書く手間が省ける」=既にあるものを使えば大体OK!
  • レスポンシブWebデザイン対応(自動でやってくれる)
  • Gridレイアウトが超便利

 

Bootstrapを学べる良い教材は、今回の記事で紹介した物以外はあまり無い気がします。

※ドットインストールなど有料のものも微妙かも?

デイトラのBootstrap講座と、Bootstrap公式HPを見て使えるようになるのが一番良いと思います😃

 

以上、アルパカ(@engineeraru)でした。

1 COMMENT

田淵 克尚

想定より時間が掛かってしまいましたが、CSSだけではなくBootstrapを使うことで
技術に幅が持てたと思う。
特に、レスポンシブを考えなくて良いのはとても楽。細かい調整をCSSで行えば
良いものができそう。

返信する

田淵 克尚 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です