ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【入門 Bootstrap 使い方】初心者でも爆速でカッコいいサイトを作れる

CSS
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

プログラミング初心者の方は簡単なwebページを作る際に「HTMLでサイトの枠組みを作り→CSSで配置や見た目を綺麗に整える」かと思いますが、なかなか思う様なカッコいいサイトができなかったり、もっとコーディングを早くしたいと思いませんか?

ネコ君
ネコ君

僕も0からコーディングしてみたけど、カッコいいサイトが作れず3日もかかっちゃったよ〜!

Hiko
Hiko

そんな時はBootstrapを使って爆速でカッコいいサイトを作りましょう!

ネコ君
ネコ君

Bootstrapって何!?早く教えて!!

今回ご紹介するBootstrapというCSSのフレームワークを使うと、早くコーディングができて、カッコいいサイトが直ぐにできる、さらにレスポンシブデザインも一気にできてしまうという、プログラミングには欠かせないものです!

こんな方にオススメ
  • Bootstrapとは何か知らない方
  • Bootstrapの使い方を知りたい方
  • 効率よく、カッコいい、レスポンシブなサイトを作りたい方
  • HTML,CSSの学習をある程度している方

Bootstrapとはそもそも何なのか、初心者でも分かるようにダウンロードから使い方、よく使う便利なテンプレートまで、この記事でBootstrapの基礎が分かる様になります!

(※HTML,CSSの基礎学習を終えた人向けの内容となっています)

スポンサーリンク

そもそもBootstrapとは?

Bootstrap(読み方:ブートストラップ)はTwitter社が開発したCSSのフレームワークです。フレームワークとは簡単にいうとその言語をより使いやすく便利にしたものです。

フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。

ferret(https://ferret-plus.com/996)
ネコ君
ネコ君

Bootstrapを使うと効率よくCSSがコーディングできるってことだね!

Bootstrapを使って作られた有名なサイトを一つあげるとAirbnbがあげられます。

Bootstrapを使うメリット・デメリット

  • HTMLタグにBootstrap(CSS)を書くことができる
  • 効率よくコーディングができる
  • 簡単にカッコいいページができる
  • レスポンシブデザインに対応している
  • ネット上にテンプレートが沢山ある(コピペでOK)

メリットをざっくりと上げるとこんな感じです、HTML,CSSでサイトを作る際は良いことしかないので、ぜひマスターして使いこなせる様になることをオススメします!

良いことしかありませんが、一つデメリットを上げるとすると、便利すぎてBootstrapを使っているユーザーがかなり多いのでデザインが被ってしまい独自性の高いサイトは作りにくいと言った点です。

このことを業界では「Bootstrap臭のするサイト」と言います。

Bootstrapの使い方【準備編】

ネコ君
ネコ君

フレームワークって使うのなんだかファイルインストールしたりなんだか難しそう。。。

Hiko
Hiko

以下のコードを自分のエディタにコピーするだけで直ぐに使えます!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

このコードを<head>ここにコピペ</head>の中にコピペして下さい。

たったのこれだけで Bootstrapが使える様になります!

スポンサーリンク

Bootstrap公式サイトの使い方

もう少し使い方の手順を詳しく知りたい方のために、公式サイトの使い方を解説します。

Bootstrap公式サイトにアクセスします。

公式サイトにアクセスするとこの画面になるので、Get startedを選択。

するとこの画面に飛ぶので、CSSのコードとJSのコードをコピーして、自分のエディタの<head>タグの間に貼り付けます。

下にスクロールすると、Starter templateがあるのでこれを丸々エディタにコピーすると、<head>や<body>タグを書く手間が省けます。

Bootstrapの書き方

Bootstrapの書き方はとてもシンプルで、

<a class="btn btn-primary" href="https://www.hikopro.com">HOME</a>

この様にclassの中に基本的に書きます。すると、、、

HOME

この様にカッコいいボタンが直ぐにできてしまいます!

このclassの中に書いてあるbtn btn-primaryなどがBootstrap独自のコードとなります。

他にも沢山テンプレートコードがあり全てBootstrap公式サイトから見ることができます。

左のナビゲーションバーにComponentsという項目があるのでクリックします。

すると下にAlert,Badge,Buttons,Navbar…など様々な項目があるので、実装したい機能をクリックします。

すると完成形とそのソースコードがあるので、そのままコピーすればそのまま使えます!

CSSで書くとかなり手間のかかるCard型や、Jsの知識がないと実装できないToastsやドロップダウンメニューもコピペで簡単に実装できちゃいます!

ネコ君
ネコ君

こんな簡単に複雑な機能が実装できちゃうんだ!もっと早く知りたかった。。

Bootstrapで作られたサイト例

沢山あるBootstrapのコードをうまく組み合わせるとCSSを使わずとも簡単にこんなカッコいいお問い合わせフォームが作れてしまいます!

ネコ君
ネコ君

このページCSS使うと結構大変だよ〜!

Hiko
Hiko

Bootstrapを使うとたったのこれだけで実装できます!

<body class="text-center">
    <form class="form-signin">
  <img class="mb-4" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
  <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> Remember me
    </label>
  </div>
  <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  <p class="mt-5 mb-3 text-muted">© 2017-2019</p>
</form>
</body>

入門 Bootstrap 使い方まとめ

いかがでしたでしょうか!

Bootstrapを使えば早くコーディングできるだけでなく、シンプルでカッコいいサイトも簡単に作れてしまいます!

初めの内は公式サイトや紹介ブログを見ながら実装していますが、慣れてくると覚えてきて直感的にコーディングできる様になるのでさらに効率よくサイトを作ることができます!

ぜひこの記事を参考に脱Bootstrap初心者になってください!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
CSS
HikoPro Blog

コメント

タイトルとURLをコピーしました