Bootstrapとは何かを実際にヘッダーを作って学べる記事!

web開発

2017/04/12

web開発

CSSのフレームワークの1つであるBootstrapについて、Web開発経験のある筆者が初心者向けに解説します。

Bootstrapは以前は「Twitter Bootstrap」とも言われており、あの有名なTwitter社が提供していました。

Bootstrapでは、あらかじめCSSが用意されているため、開発者はサービスを作るために必要なデザインにかける時間を削減することができます。

本記事では、初心者向けにBootstrapとは何か、特徴だけでなく、実際にBootstrapを使ってサイトのヘッダーを作ってみたいと思います。

実際に制作を通じてBootstrapとは何かについて学習できる充実の内容です。

 

Bootstrapとは?

まずはBootstrapとはどんなフレームワークかについて解説していきます。

BootstrapではあらかじめCSSが用意されているので、開発者はHTMLに、CSSに対応するidやclassを追加するだけでサイトのデザインを作ることができます。

つまり、自分でCSSを書くことなくサイトのデザインができるというわけです。

Bootstrapを使って制作されたサイトとしては、アクセサリーブランド「AGATHA」のサイトや、スマホでクレジット決済を行うサービス「Coiney」のサイトなどが挙げられます。

 

Bootstrapの特徴とは?

Bootstrapには幾つかの特徴があります。本記事では、初心者が特に知っておくべきBootstrapの特徴を2つ紹介しておきます。

特徴その1:自動でレスポンシブ対応してくれる

Bootstrapを使えば、簡単にPC・モバイル・タブレットでの表示変化に対応できます。(自動でレスポンシブ対応をしてくれます)

これはBootstrapの一番の特徴と言ってもいいでしょう。

 

特徴その2:グリッドシステム

Bootstrapでは、横幅を12分割し、横幅の合計が12になるようにスタイルを指定していくやり方です。

このグリッドシステムというを採用することによって、レスポンシブ対応ができるようになります。

 

Bootstrapを実際に使ってみよう!

では、実際にBootstrapを使ってみてその便利さを体験してみましょう!

まず、Bootstrapのページにいきます。そして、「Download Bootstrap」というボタンをクリックします。

「Download Bootstrap」というボタンをクリック

そして、左側にある「Download Bootstrap」をクリックしてファイルをダウンロードし、zipファイルを解凍します。

「Download Bootstrap」をクリック

ここで、新たにHTMLファイルを作成し、先ほどダウンロードした「bootstrap-3.x.x-dist」というフォルダに入れてください。

※HTMLファイルのファイル名は何でも大丈夫です。

HTMLファイル

※HTMLファイルの作成方法についてはHTMLについて解説した記事をご覧ください。

新たなHTMLファイルには、BootstrapのBasic templateというページにあるHTMLをコピーしてください。

HTMLをコピー

次に、BootstrapのComponentsというページに行き、右側より「navbar」をクリックしてください。

「navbar」をクリック

そして、少し下にスクロールしたところにある「EXAMPLE」というHTMLをコピーして、先ほど作成したHTMLファイルの<body>〜</body>の間に貼り付けてください。

「EXAMPLE」というHTML

そして、結果を確認してみましょう。

Bootstrapの結果

一回もCSSを記述することなく上記のようなヘッダーデザインができました。

Bootstrapの便利さがお分かりいただけたかと思います。

 

いかがでしたか?

Bootstrapはとても便利なCSSフレームワークの1つです。ぜひ使ってみてはいかがでしょうか?

udemyでは、HTMLを学習し始めた人や、HTML初心者にも丁寧でやさしい講座を開設しています。

ぜひ受講して、HTMLをマスターしてみてはいかがでしょうか?

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事