Kyomachi-blog

record of fighting:PHP/Laravel , HTML/CSS , Javascript etc

BootStrapってどんなことができるの!?

Bootstrap とは

BootstrapとはCSSフレームワークと呼ばれるものです。

まず、フレームワークという言葉を先に整理しておきましょう。フレームワークとは「枠組み」「骨組み」などと日本語にされますが、「ひな形」と理解してもらうのが一番簡単ではと思います。

次にCSSですが、CSSはカスケーディングスタイルシートの略で、ウェブページ装飾(文字の大きさや色など)を指定するための言語です。

BootstrapはCSSフレームワークと位置づけられるものになりますので、「ウェブページ装飾のひな形」ということになります。

仕事などで「書類のひな形あります?」といった会話で使う、あのひな形と同じ意味です。それが「ウェブページのひな形ありますか?」に変わっただけですね。

真っ白な状態から作っていくのではなく、Bootstrap というものが、あらかじめある程度作ってくれているんものなんだなぁと理解していただければと思います。

f:id:kyomachiya:20181215172552p:plain

Bootstrap を使うメリット

なんといっても、レスポンシブウェブデザインに対応しているところでしょう。 Bootstrapの見た目のデザインがあまり好きではないという方でも、レスポンシブ ウェブ デザインに関わるところだけは使いたいというご意見を聞くこともあります。

現在、Bootstrap のバージョンは最新が 4 から始まる 4系と呼ばれるものになります。

以前の 3系までは、グリッドシステムという仕組みでデバイス(PCやスマートフォン)に応じてウェブページの構造を変化させ、レスポンシブ ウェブ デザインでレイアウトを作成することができました。

最新の 4系でも、もちろんレスポンシブ ウェブ デザインでレイアウトを作成することができます。

ただ、仕組みがFlexBoxというものになっていて、3系とは違う仕組みで動作させる違いがあるんだなという点をまずは知っておいていただければと思います。

BootStrap テーマ

Bootstrap のトップページから Themes というナビゲーションから、Bootstrap Themes を見ることができます。

こちらは、デザイナなどの方々が、Bootstrap を活用して作られたテンプレートを見ることのできるページですね。Bootstrap を利用することで、とてもクオリティの高いデザインが表現できることがお分かりいただけるかと思います。

こちらのものは有料のものになりますが、「Bootstrap 無料」などで検索をしてもらうと、数多くの情報に触れることができますので、一度調べてみてはいかがでしょうか。

あまりのクオリティの高さに見入ってしまって、すごい時間が経ってしまったことがあったので、皆さまもお気をつけください。

f:id:kyomachiya:20181215172546p:plain

まとめ

Bootstrap を活用して、自分で一からウェブページを作るのも、テーマを入手してウェブページを作るのも、どちらも学習としては、どちらも効果が高いです。

これから始められる方は、最新の4系から始めるのが良いと思います。Bootstrap をきっかけに、他の CSS フレームワークを調べてみるのも楽しいですよ。

CSS フレームワークを使うときには、HTML/CSSの知識があった方がより理解しやすいですので、無料で学習できるサイトなどを活用して(ドットインストールなど)で先に学習しておくとなお良いでしょう。

クオリティの高いデザインに圧倒されることもあるかもしれませんが、1つずつコードを積み上げていきましょう。