- システム開発
- 2017/04/12
Bootstrapとは何かを実際にヘッダーを作って学べる記事！
CSSのフレームワークの１つである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の特徴を２つ紹介しておきます。
特徴その１：自動でレスポンシブ対応してくれる
Bootstrapを使えば、簡単にPC・モバイル・タブレットでの表示変化に対応できます。（自動でレスポンシブ対応をしてくれます）
これはBootstrapの一番の特徴と言ってもいいでしょう。
特徴その２：グリッドシステム
Bootstrapでは、横幅を12分割し、横幅の合計が12になるようにスタイルを指定していくやり方です。
このグリッドシステムというを採用することによって、レスポンシブ対応ができるようになります。
Bootstrapを実際に使ってみよう！
では、実際にBootstrapを使ってみてその便利さを体験してみましょう！
まず、Bootstrapのページにいきます。そして、「Download Bootstrap」というボタンをクリックします。
そして、左側にある「Download Bootstrap」をクリックしてファイルをダウンロードし、zipファイルを解凍します。
ここで、新たにHTMLファイルを作成し、先ほどダウンロードした「bootstrap-3.x.x-dist」というフォルダに入れてください。
※HTMLファイルのファイル名は何でも大丈夫です。
※HTMLファイルの作成方法についてはHTMLについて解説した記事をご覧ください。
新たなHTMLファイルには、BootstrapのBasic templateというページにあるHTMLをコピーしてください。
次に、BootstrapのComponentsというページに行き、右側より「navbar」をクリックしてください。
そして、少し下にスクロールしたところにある「EXAMPLE」というHTMLをコピーして、先ほど作成したHTMLファイルの<body>〜</body>の間に貼り付けてください。
そして、結果を確認してみましょう。
一回もCSSを記述することなく上記のようなヘッダーデザインができました。
Bootstrapの便利さがお分かりいただけたかと思います。
いかがでしたか？
Bootstrapはとても便利なCSSフレームワークの１つです。ぜひ使ってみてはいかがでしょうか？
エンジニアに役立つ目的別講座
Pythonの基本～応用をマスター
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
現役シリコンバレーエンジニアが教えるPython入門講座。Python3の基本を取得できます。
Webサイトのコーディングができるように
ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！
HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。
AWSを基礎から学ぶ
これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座（SAA-C02試験対応版）
AWSの基本資格「AWS 認定ソリューションアーキテクト – アソシエイト試験」を合格を目指し、そのための知識や経験を獲得できるように！
ITプロジェクトの資料作成はお任せ！
手を動かして学ぶITプロジェクトの資料作成！システム開発のドキュメンテーション技術と成果物テンプレート
ITプロジェクトの資料作成を学べる人気講座。フェーズ毎に、どんな資料を作ればいいのか悩んでいる人におすすめ。
関連記事
【動画解説付！】はじめてのウェブページを２０分で作成してみよう！
現在ビジネスを行う上でウェブを使用したプロモーションやマー…
Bootstrapの使い方！Web開発初心者にもわかりやすく解説
一昔前までは、ホームページやWebシステムを作成するとしたら…
RailsでBootstrapを使うには？実際にボタンを作って学べる！
プログラミング言語RubyのフレームワークであるRuby on Railsで…
Tailwind CSSとは？ユーティリティファーストの意味や使うメリットをくわしく解説！
『Tailwind CSS』とは、Utility Firstを掲げて設計されたCSSフ…
RANKING
RECOMMEND
最新情報・キャンペーン情報発信中