30DAYSトライアル

【30DAYSトライアル】に挑戦 DAY11 Bootstrap入門

こんにちは、ポンコツエンジニアのはやです。今回は、30DAYSトライアルのDAY11を進めていきました。今回の内容は、Bootstrap4、です。

注意

Bootstrapについてネットで調べると、現在主要なバージョン4とバージョン3の記事が入り混じっています。自分がどのバージョンのBootstrapを利用しているのかに気をつけて記事を参考にしましょう。

 

仕事でも実際に使いてWEBページを作成しているので、学べばWEB制作にまた一歩近づくこと間違いなしです。Bootstrap4とは、Twitter社が開発しているCSSフレームワークのことで、CSSを先に命名しておき、要素にクラス名を当てるだけでスタイルを当ててくれるすぐれものです。

->詳細の課題内容

今回の課題は以下のふたつです。

ドットインストールのBootstrap4入門コースのレッスン1〜9

・グリッドシステムについて調べる

ドットインストール Bootstrap4入門

Bootstrapは本当に便利なのですが、初めての場合触ってみなければ全くもってそのよさがわかりません。なので、とにかくやってみましょう。Progateでやってきたことを活かせば何を行なっているかはわかると思います。

Progateとの違いは、CSSを自身で書くわけでなく、使いたいCSSのコードが書かれているクラス名をHTMLの要素に当てるのがメインであるということです。

BootStrapで大まかなページを作成し、細かな作業は自分でCSSを当てるというのがBootstrapを用いる主なページ作成です。(他にも、グリッドシステムという機能を用いて枠だけBootstrapで当てて、他のデザインは自分で当てたりすることもあります。)

Bootstrapを使う上で大事なのは二点だけです。

・グリッドシステムを覚える

・ドキュメントを嫌がらずに読めるようになる

この二つができれば、Bootstrapマスターと言っても過言ではありません。

Bootstrapでは、Javascriptも使われているので、モーダルやアコーディオン、ハンバーガーメニューなどの動きのあるWEBサイトを作ることができます。JavaScriptがわからなくても作れてしまうのですから、本当にすごいと思います。(知っている方が、使い方がわかりやすいですが。)

Bootstrapで何ができるかがわからない、といのが一番の問題です。知っていれば、コードをコピペすれば使えます。知らなければ、使えません。

知っているか、知らないか、それだけですが大きな差があります。

グリッドシステムとは?

グリッドシステムについての説明は、以下のサイトなどが非常にわかりやすいです。

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【入門編】
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
Bootstrapのグリッドシステムについてまとめてみた

グリッドシステムは、Bootstrapだけの概念ではありません。bootstrapを使わない場合にもグリッドという考え方は非常に有効です。余裕があれば、gridプロパティについても調べてみるとよいでしょう。

Bootstrapのグリッドシステムで重要な点だけ列挙してみます。

・container, row, colの関係

・colのサイズ指定(ブレークポイント)

発展

・ブレークポイントによって表示、非表示を切り替える

・グリッド数12を別の数値に変えられる

などがあります。発展は、僕が知らなかったものを並べただけなので、何も発展ではないです。笑

 

まとめ

今回は、Bootstrapについて、学びました。Bootstrapが使えるようになれば、コードの速度がアップします。細かいデザインなどが出てくると、くろうすることもあるのですが、どこまでをBootstrapで記述し、どこからを自分でCSSを当てていくかは慣れてくると少しずつわかってくるので、気にせずどんどんコードを書いていきましょう。