未経験者からプログラマーZET

未経験でもプログラマーに絶対になる!プログラミング初心者のための情報サイト

bootstrap

プログラミングの勉強

【初心者向け】Bootstrapてなに?簡単な仕組みから使い方まで解説

2017/10/27

あなたはプログラミングとデザインのどちらが得意でしょうか?

サイトを作る際、プログラミングとデザインは分業してる会社も多いですし、プログラミングとデザインでは才能の方向性がちがうと感じます。

両方できればそれにこしたことはないのでしょうけどね。

今回はデザインが苦手なプログラマーでも、イケてるデザインのWEBサイトが作れるフレームワークについてご紹介します。

この記事の内容はHTML+CSSの書き方が理解できている人向けの記事となっております。
HTML+CSSで1ページでもサイトが作れるようになってから見るとわかりやすいですよ!

プログラマーも御用達、CSSフレームワーク「Bootstrap」

フレームワークというのは枠組みのことを言います。

例えば本の収納に使えるカラーボックス。三段ボックスとも言いますよね。
本の収納だけでなく雑貨や子供のおもちゃを収納するのにも最適です。ニトリのカラーボックスは連結できるタイプがあり、部屋にあった組み合わせが出来りするんですよ。超便利

これCSSびフレームワークと仕組みがよく似ているのです。
BootstrapはECサイトにするにしてもコーポレートサイトにするにしても、いろいろ組み合わせできれいなサイトが作れます。

これはCSSの枠組みを利用するからです。そのためCSSフレームワークと呼ばれています。

具体的なBootstrapの仕組み

BootstrapにはあらかじめCSSが用意されています。

例えば、パンくずリストをゼロから作ると面倒ですよね。
リストタグで作るにしてもcssでfloat:leftしたり高さを合わせたり余白を調整したり。深みにはまってくるとCSSを書くだけでも時間と労力を使います。

しかし、BootstrapにはあらかじめCSSが用意されているのでHTMLタグのクラス属性に該当のクラスを指定すればよいのです。

例えば下記のとおり

これはチートシートです。

チートシートとは、「あれなんだっけ?前使ったことあるんだけど・・・」とちょっと調べたい時に、わざわざWEB検索しなくても簡単に機能を書いた一覧表のようなもの。

PDFやサイトで1ページから数ページで書かれた簡単な辞書みたいなものですね。

上記のURLの場合は、クラスの属性値をクリックするとどのように使うか?どのような表示になるか?を実際に見て確認することができます。
とても分かりやすいですね!

Bootstrapの使用方法

 というサイトがあるのですが、簡単に言うと「CSSやJavascriptをサーバーに置いてあるから読み込んで使ってもいいよ」というサービスです。

Bootstrap CDN

Bootstrap CDNと書かれている項目のコードを見てもらうとわかると思いますが、linkタグ、scriptタグを使ってCSSやJSを読み込ませるのです。

HEADタグで囲まれた箇所へ記載して使うことができます。

ファイルをダウンロードして所定の場所へhtmlファイルを置いて。。。など環境を設定してつかえるようにしなくても簡単に使ってみることができます。

ぜひ試してみてください。

プログラマーに便利なフレームワーク

特にデザインが苦手なプログラマーは時間と労力をかけず手早く完成に近づくことができるので便利です。

それにチームで作業をしないといけない時はある程度のルールが必要になってきます。

今回のようにBootstrapをベースにデザイン・コーディングを進める場合は、Bootstrapのルールが根底にありますのでゴールまでのブレがある程度軽減されます。

スタンダードなデザインでもあるためデザインの方向性が著しく損なわれることも防ぐことが出来るでしょう。

就職の場合などでは、Bootstrapを使ったことがあることを前提に募集している場合もあります。必要な知識として触っておくと後々助かるかもしれません。

-プログラミングの勉強