Bootstrapとは?初心者でも馴染みやすいフレームワーク 無料でできる勉強方法などを紹介

本ページはプロモーションが含まれています
みなさんはBootstrap(ブートストラップ)というものはご存知でしょうか。Bootstrapとは世界的にも非常に人気のあるフレームワークです。フレームワークって何と思うかもしれませんが、簡単にいうとテンプレートのようなものです。決まった型に当て込んでしまうことで、誰でも簡単にそれなりのWEBページを作れるようにしよう、というものです。今回はそんなBootstrapのざっくりとした概要と勉強方法を紹介したいと思います。


Bootstrapでどんなものが作れるのか

Bootstrapでどんなものが作れるのか、まず結論が知りたいという方が多いかと思いますので、先に紹介します。Bootstrapを利用して作成されたページのサンプルです。

Bootstrapのサンプルページ(公式ページ)


以下のようなページが、デザイン知識なしに作れてしまいます。あらかじめパーツとして用意されているので、パーツを入れたい箇所に記述を追加するだけで簡単に作れてしまいます。どこかで見たことがあるようなページばかりだと思います。




Bootstrapの特徴


Bootstrapの特徴に[グリッドシステム]という考え方があります。ざっくり簡単に説明してしまうと、サイトの横幅を「12」に分割してサイズを決める、という考え方です。

ブログで考えると例えば左側に「メインの記事」、右側に「サイドメニュー」とする方が多いかと思いますが、その場合左側のメインの領域のclass属性を「col-8」、右側のサイドメニューのclass属性を「col-4」と記述すると、2:1の比率でページが作成できてしまうイメージです。

こんなかんじ

普通にCSSを書く場合、class属性を指定して、横幅は何pxとか、何emとかしてあげないといけないのでちょっと面倒な部分がありますが、そこを省略して簡単に設定できるのがBootstrapのメリットです。

一方デメリットとして、型が決まっている関係で柔軟に書き換える、自由さが無いのがあります。その場合はBootstrapを利用せずに自分でCSSを書いたほうが早かったりするので一長一短があります。

ブログ初心者におすすめしたい理由としては型にハマったものを習得することで基本的な考え方を理解するのにちょうど良いためです。スポーツのフォームみたいなもので最初は型から入って、あとから応用効かせていくイメージです。自分自身はBootstrapから入ったクチです。

Bootstrapの勉強に役立つサイト(無料)

「なるほど!だいたいできることと考え方の雰囲気はわかったけどどうやって勉強すればいいの?」ということが気になると思います。今の世の中、非常にありがたいことに無料でBootstrapを学習できる環境が用意されています。これからBootstrapを勉強しようと考えている方は有料サービスも含めて検討しているかと思います。もし勉強していて途中で挫折したらどうしよう、と考える方も多いと思うので、途中で挫折しても安心な無料でできる学習プランを紹介します。(お金はかけなくても勉強できます)

Bootstrap 4入門:YouTube(おすすめ)



大変ありがたい動画をYouTubeに公開してくださっている方がいます。たにぐち まこと さんのチャンネルで、解説も非常にわかりやすく、もちろんYouTubeなので無料で公開されています。Bootstrapの学習はこちらの動画を強くおすすめします。

リンク:Bootstrap 4入門(YouTubeで動画が再生されます)

ドットインストール



レッスンのいくつかは無料で受講することができます。1つ1つの動画が短いのでサクサク学習することができます。以前、まるごと全部無料で視聴できたんですが、変わったんですかね。

リンク:ドットインストール

まとめ

今回はBootstrapの簡単な紹介と無料でできる勉強方法を紹介させていただきました。自分もBootstrapを勉強したことで、かなり役にたったのではじめにトライするものとしてはとても良いなと思いました。もしWEB制作の勉強をこれから始める方がいましたら、Bootstrapを試してみてくださいね。