【初心者向け】Bootstrapのメリットやできる事を紹介。

プログラミング

Bootstrapを使うメリットってどんなのがあるの??

Bootstrapっていうのを知ったんだけ、どんな事ができるの??

こんな方に向けての記事です。

HTML・CSSの勉強をしていると、Bootstrapという名前を目にした事がある方も多いのではないでしょうか??

そこで今回はBootstrapの凄さに触れて行こうと思います。

今まで、普通にCSSを書いていた方にはびっくりな技術です。

Bootstrapとは

公式サイト: http://getbootstrap.com/

Web制作者の作業を楽にする目的で作られた、Webサイト構築用のCSSひな形セット

ひな形ってことはすでにcssを書いてくれているってこと?

その通りです!Bootstrap側で良い感じのcssを用意してくれているのです。

Bootstrapはオープンソースで開発され、誰でも無償で使えます

Bootstrapの導入方法

これは以下の記事で解説しています。

【初心者向け】cssの効率良い勉強方法は?cssは書かなくても良いです
cssは覚えたけど、面倒くさい、、もっと楽にWebデザインをしたい、、こんな方に向けての記事です。前回の記事で、クラスにcssを適用する方法をご紹介しましたこれでWebサイトの好きな場所にcssを適...

簡単に言うと、

<meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

これをHTMLのheadタグに埋め込むだけで使えます。これだけです。

ソースを埋めたら、あとは既定のクラスを指定するだけです。

例えば、

<p class="bg-success">イージー人生</p>
     <p class="bg-info">イージー人生</p>
     <p class="bg-warning">イージー人生</p>
     <p class="bg-danger">イージー人生</p>

pタグにこれらのクラスを指定すると、

こんな感じで、cssが適用されます。

えっすごい!クラスを指定しただけなのに

Bootstrap側でcssを用意してくれているからね。
クラスを指定するだけで、素敵なデザインが作れちゃいます!

どんなクラス名をつければどんなデザインが適用されるかは、以下のチートシートを参考にしてみてください。

Bootstrapのメリット・できる事

簡単にレスポンシブなデザインが可能

レスポンシブなデザインってなに?

スマホやタブレットなど、端末に合わせて最適な表示をすることです。

例えば、class=”hidden-tablet” とすればタブレットで表示した時にはその要素が非表示になります。

こんな感じで、クラスを指定するだけで、レスポンシブなデザインを適用できます。

また、PCの画面では、↓のように見えて、

スマホでは、

こんな感じで、表示を切り替えるのも、クラス指定1つでできます。

普通にcssを書くと結構めんどくさいんですけどね。

開発スピードが超絶アップ

先ほどから言っているように、クラスを指定するだけでデザインが整います。

ですので、普通にcssを書くよりも遥かに効率が良いです。

特にプログラミング学習をしたい方にとっては、『デザイン』にあまり時間をかけたくない人も多いと思います。

Bootstrapで素早く綺麗にデザインを仕上げて、JavascriptやPHPの学習につなべるといったこともできます。

僕自身、プログラマーなので、デザイン面を素早くできるのが最も大きなメリットであると感じています!

デザインに疎くても、最近のデザインを取り入れられる

Bootstrapにはモダンなデザインが揃っています。

例えば、デフォルトで以下のようなボタンをクラス指定だけで作れちゃいます。

デザイン面に自信がない方にとっては強い味方にはなるでしょう。

Bootstrapのデメリット

メリットばかり上げてもあれなので、デメリットもあげておきましょう。

  • cssの書き方を忘れる
  • デザインに自信がある方にはカスタマイズしにくいかも

この辺かなと、共通して言えることは、デザイン重視で勉強したい方にとっては、Bootstrapだけでは物足りないということです。

Bootstrapは良い感じのcssを予め用意してくれています。逆に言うと、Bootstrap以上に綺麗なデザインを組める自信がある方にとっては、邪魔になりえるということです。

まぁその場合も、cssを少し修正すればいいのですが、『それなら最初からcssをじぶんで書くほうが早い』ということにもなります。

また、Bootstrapばかりやっているとcssの書き方を忘れます笑

デザイナーでcssを頻繁に扱う方は、Bootstrapだけやっているのも怖いところですね。

結論、メリットの方が大きい

デザイナーの方には、頼りすぎは良くないという話をしました。

しかし、プログラマーメインの方には、ほぼメリットしかないでしょう

Bootstrapはノンデザイナーの強い味方です。アンパンマンより心強いです。

  • 短い時間でカッコいいデザインができる
  • cssを覚える必要がなく、他の言語の勉強に当てれる

ただし、デザイナーはbootstrapもできるし、cssも描けるように。

プログラマーはbootstrap +java script 

こんな感じでいきましょう!

コメント