photo
photo
  1. トップ
  2. システム開発
  3. Bootstrapとは何かを実際にヘッダーを作って学べる記事!

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

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つです。ぜひ使ってみてはいかがでしょうか?

 

エンジニアに役立つ目的別講座

Pythonの基本~応用をマスター

現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル

現役シリコンバレーエンジニアが教えるPython入門講座。Python3の基本を取得できます。

Webサイトのコーディングができるように

ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!

HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。

AWSを基礎から学ぶ

これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)
これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)

AWSの基本資格「AWS 認定ソリューションアーキテクト – アソシエイト試験」を合格を目指し、そのための知識や経験を獲得できるように!

オリジナルのウェブサイトを作ろう

WordPress開発マスター講座
WordPress開発マスター講座

WordPressのカスタマイズ手法を身につけ、自身のサイト構築や開発案件の受託などを目指しましょう。