デザインの知識不要！！Bootstrapの使い方徹底解説！

2019.12.01
2022.05.04
Bootstrap

HTMLやCSSでコードを書いてもデザインの知識がないため、うまくサイトができない。。デザインの知識がないとWebサイトを作るのは無理なんでしょうか？

こういった疑問に答えます。
本記事では、デザインの知識がなくても、プログラミング言語だけで簡単にカッコイイWebサイトが作れる方法を紹介していきます。

✅ 本記事の内容

今回紹介する内容は以下の通りです。

Bootstrapの使い方
Webデザインの知識を補う方法

プログラミングの勉強をスタートしたときに、最初に学ぶ言語として「HTML」「CSS」から始める方がほとんどだと思います。ただ学んだ後に、実際にWebサイトを作成してみると、デザインがいまいちだったり、自分が思い描いている完成図と遠く離れていたりしませんか？

デザインの問題は、初めてWebサイトを作成する方にとって最初の壁でもあります。僕自身も始めはそうでした。

そんなデザインの問題を解決してくれるプログラミング言語、知識を補う方法があります！！
それでは解説していきます！

1. 1.　Bootstrapの使い方
- 1.1. Bootstrapとは？
- 1.2. Bootstrapの使い方
2. 2.　Webデザインの知識を補う方法
- 2.1. 他のWebサイトのマネをする
- 2.2. おすすめのデザインサイト

1.　Bootstrapの使い方

Bootstrapとは？

まずはBootstrapについて解説していきます。
Wiki先生では、Bootstrapはこのように説明されています。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。
https://ja.wikipedia.org/wiki/Bootstrap

本来、HTMLやCSS、JavaScriptを使って作成するフォームやナビゲーション（Menu）などが、
HTMLコードを書いただけで、簡単に作成できるというわけなんです。
あらかじめBootstrap側でデザインテンプレートが用意されており、決められたコードを入力すると、そのデザインテンプレートを読み込むことができます。

また、レスポンシブデザインにも簡単に対応することができます。
これがBootstrapです。

Bootstrapの使い方

では実際にBootstrapの使い方をいくつか紹介していきます。

✅ グリッドシステム

グリッドシステムは、作成したWebサイトをスマートフォン、タブレット、PCで反映させるときに、自動でサイズ幅を調整してくれる機能のことを言います。
下の図をご覧ください。

PCで見たときは、三色で表された１〜３の数字が均等に、PCのサイズに合わせて表示されているかと思います。
これをスマートフォンで見てみるとどうなるのか、確認して見ましょう。

PCではPCのサイズ幅で表示されましたが、スマートフォンではスマートフォンのサイズ幅で表示されています。

これがグリッドシステムです。
自動で端末のサイズ幅に合わせてくれるわけなんです。

書き方は下のように書きます。

<div class="container">
<div class="row">
　　<div class="col">1</div>
　　<div class="col">2</div>
　　<div class="col">3</div>
</div>
</div>

詳しくはこちらをご覧ください。

https://sakuchan.org/bootstrap4/

✅ メニューバー

メニューバーは、一番よく使うものではないでしょうか。
実際コードを書くとなると、細かい調整などが必要になります。
しかし、Bootstrapの「Navbar」を使えば簡単に下の図のようなメニューバーが作成できます！

書き方は下のように書いていきます。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

少し長いコードになりますが、ドロップダウンや検索機能を使わなければ、下のようなシンプルなコードになります。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
     <li class="nav-item active">
       <a class="nav-link" href="#">Home</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
     </li>
    </ul>
  </div>
</nav>

また、レスポンシブデザインにも対応しており、スマートフォンのサイズになると自動でメニューアイコンに切り替わるようになっています。

✅ Jumbotron

そもそも「Jumbotron」とは何か？というと、サイトに主要なマーケティングメッセージを表示できるものです。簡単にいうと下のような図です。

よくTOPページで見ることが多いのではないでしょうか？
こういったものをBootstrapでは作成することができます。

書き方は下のように書いていきます。

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, ・・・</p>
  <hr class="my-4">
  <p>It uses utility classes for typography ・・・</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

ぶっちゃけ親要素の<div>タグに「jumbotron」とクラス名で指定するだけで書けます。
また自分のお好みで「ボタン」をつけたり、背景には色、写真を指定することできます。

2.　Webデザインの知識を補う方法

Bootstrapを使う方法以外にも、Webデザインの知識を補う方法があります。
ここでは、その方法について紹介していきます。

他のWebサイトのマネをする

他のWebサイトをマネすると聞くと、少し抵抗があるかと思いますが、マネすることが一番早く身につきます。
マネをすると言っても、コードを丸々マネするわけではありません。そうしてしまうと著作権違反になるので、絶対にダメです。あくまでデザインをマネするだけです。

ではどういったところをマネしたらいいのかと言うと、色の使い方や配置などです。
色の使い方や配置などにも、それを使う理由が必ずあります。サイト構成を決める時にどう言ったサイトにするのか？ターゲットは？業種は？などなど、あらかじめ構成を決めたうえでコードを書いていき、デザインを決めていきます。こう言った意味がサイトには含まれています。

ただいきなり全てをやるのは難しいので、まずは色の使い方や配置をマネしてみるところから始めるといいです。
何も考えずにただマネしていくのではなく、マネしていきながらなぜその色を使うのか、なぜその配置なのか分析していくことが大切です。