【Bootstrap入門】これであなたも脱初心者|ブートストラップ使い方

2020年1月18日

Bootstrap入門編

Web系言語を学習している方、【Bootstrap】をご存知ですか??


知らない方や使い方がよく分からないという方はぜひ一緒に操作できるようになりましょう。


Bootstrapが使えるようになると、とても速く、かっこいいサイトが作れるようになるので、この機会に一緒に作っていきましょうね。

こんな方におすすめ

  • HTML/CSSの学習をしている方
  • Bootstrapの使い方がイマイチよく分からない方
  • カッコいいホームページを作りたい方

Bootstrap とは


簡単に説明すると、【Bootstrap】とは超かっこいいサイトを作る時に使うフレームワークです。CSSやJavascriptを詳しく知らない方でも簡単にデザイン性溢れたホームページを作ることができます。


【Bootstrap】はTwitter社が開発しているもので、超有名な会社も使うほど人気を誇るものです。


Boorstrapを使えるようになると【簡単】に【超かっこいい】サイトが作れるようになります。


例えば、どんなものがあるでしょうか。

Bootstrap 例1

Bootstrapの紹介例1

Shopper – Multipurpose E-Commerce Template より

Bootstrap 例2

Bootstrapの紹介例2

Landkit – Multipurpose Template + UI Kit より



いかがですか。とてもおしゃれなサイトですよね。


では、スマホ版はいかがでしょうか。各例の参考タイトルから確認してみましょう。


見ていただいた通り、スマホでもしっかり対応できています。(レスポンシブにもしっかり対応)


こんなサイトが作れるようになりたいですよね。安心してください、【Bootstrap】が使えるようになれば作れるようになりますよ。


では、次に、Bootstrapにはどんな機能があるのか紹介します。

Bootstrap でできること

Bootstrapには大きく2つの特徴があります。

Bootstrapの特徴

  • グリッドシステム
  • 豊富な種類のコンポーネント

グリッドシステム

グリッドシステムはBootstrapの代名詞と言っても良いほど、便利な機能となっています。このグリッドシステムがあるからこそ、レスポンシブに対応するサイトを作ることができるのです。


これまではレスポンシブ化する際に、CSSでいろいろといじっていたかと思いますが、Bootstrapを導入すればHTMLのclass名に特定のワードを加えるだけでレスポンシブ化することができます。


具体的な使い方に関しては以下のサイトの方が直感的に理解できるのでそちらを参考にしてください。

豊富な種類のコンポーネント

コンポーネントとは、ホームページでよく見るボタンやフォーム、ドロップダウンなどいわゆるパーツにあたるものです。


具体的にどんなコンポーネントがあるでしょうか。

ナビゲーションバー
Bootstrapのコンポーネントの例(ナビゲーションバー)
スライドショー
Bootstrapのコンポーネントの例(スライドショー)
バッジ
Bootstrapのコンポーネントの例(バッジ)
カード
Bootstrapのコンポーネントの例(カード)

いかがでしょうか。どれもサイトでよく見かけるものですね。これらを組み合わせて使えば、かっこいいホームページができそうですよね。


では、具体的にどうやって実装していくのでしょうか。


一つ一つ丁寧にやっていくので、エディタを準備して一緒にやっていきましょう。

Bootstrap の使い方


では、今からBootstrapの実装方法について詳しく説明していきます。

Bootstrap 実装方法

  • Bootstrapを使う準備
    > head要素にコードを追加
    >footer要素にコードを追加
  • Bootstrapのメニューから【Components】を見る
  • 使いたい【Component】を実装する

Bootstrapを使う準備

Bootstrapを使うためには、自分のエディターに特定のコードを追加しなければいけません。


では、エディターを準備して一緒にやっていきましょう。

BootstrapのHPへ


まずはBootstrap公式のHPを開き、【はじめる】をクリックしてください。

Bootstrapの使い方①

head要素とfooter要素に特定のコードを追加


上のように【はじめる】をクリックすると下の画像が出てきます。その中で赤色で囲んだ部分をコピーして、自分のエディターに追加していきましょう。

Bootstrapの使い方②

追加前

追加後


見てわかる通り、9行目に【CSS】を追加、18、19、20行目に【JS】を追加しました。


ちなみに僕の使っているエディターはVSCodeなので、5、6行目に初心者の方にとっては見慣れないものがあるかもしれません。もし、よく分からないと言う方は、変更後のものをそのまま自分のエディタにコピペしたらいいですよ。


ここまでできたら、Bootstrapの下準備は完了です。

Bootstrapのメニューから【Components】を見る

下準備が終わったところで、次は使用したいComponentを探しましょう。先ほどの【はじめに】ページの左に、Getting StartedやLayoutなどメニューがありますね。


その列から【Components】をクリックしてください。下の画像では赤線のところです。

Bootstrapの使い方③


【Components】をクリックすると、下の画像のように出てきます。

Bootstrapの使い方④



画像の赤線で囲われている所を見ると、【Alerts】【Badge】【Breadcrumb】など多くのコンポーネントが(部品)があります。


その中から、自分の使いたいコンポーネントを探しましょう。

使いたい【Component】を実装する

使いたいコンポーネントが見つかったら、自分のエディターに実装していきましょう。


ここでは、カード【Card】を実装してみます。


まずは、【Components】一覧の【Card】をクリックします。

Bootstrapの使い方⑤


すると上の画像の画面がでてきたでしょうか。


少し下にスクロールすると【Example】が出てくるかと思います。今回はそのExampleのカードを実装していきますね。

Bootstrapの使い方⑥


Exampleのカードの下に8行程度のコード(赤線で囲っている所)がありますか?


このコードをコピーしてbody要素内にペーストするだけです。

コード追加前

コード追加後



見てわかる通り、19行目から26行目にコードを追加しました。

では、実際にGoogleChromeではどのように表示されるでしょうか。

Bootstrapの使い方⑦



以上のようになっていれば成功ですね。


画像は自分で指定してみてくださいね。


Bootstrapの使い方⑧
カードを横3つに表示させたい場合


さきほどの【Card】ページからもっと下にスクロールすると、【Card decks】が出てくると思います。


その下のコードをコピーして【body要素】内にペーストしましょう。

コード追加前

コード追加後


いかがでしょうか。


できているか確認してみましょう。


では、実際に表示してみます。

Bootstrapの使い方⑨

いかがでしょうか。


このようになったでしょうか。


この例ではコードの22行目、31行目、40行目に写真を加えてみました。


もちろん、青色のボタンやカードの大きさ、カードの枚数など簡単に変更することができるので、みなさんも自分に合ったサイト作りに活かしてみてくださいね。

Bootstrap まとめ

みなさん、いかがでしたでしょうか。


あまり難しい操作はなかったかなと思います。


このBootstrapの使い方が分かればとってもデザイン性あふれるカッコいいサイトが作れます。


実際にどんなコンポーネントがあるか自分で確認してみてくださいね。


最後まで、ありがとうございました。

-プログラミング学習
-,

Copyright© ととろぐライブラリー , 2021 All Rights Reserved.