HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約9分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

プログラミング初心者の方は簡単な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初心者になってください!

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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)