Bootstrapで簡単にオシャレなサイトを作るには?導入〜使い方まで

Webサイト制作
サイト制作
2021.03.31


自身のポートフォリオサイトやWebページやを作りたいけど、デザインやコーディングでつまずいてなかなか進まないという方もいらっしゃるのではないでしょうか?

そこで「Bootstrap」を使ってHTML/CSSといったWebデザインの知識が乏しい人でも簡単にWebページを作成する方法をご紹介いたします。
テンプレートを利用したりサンプルコードを貼り付けるだけで簡単におしゃれなページが完成するのでぜひチャレンジしてみてください!

Bootstrap って何? 特徴やメリットは?

BootstrapとはTwitter社が開発した、HTMLやCSSの知識が少々あれば、デザインの知識がなくてもお洒落でレスポンシブに対応した、レベルの高いWebサイトが作れる「Webフレームワーク」です。
Webフレームワークとは、Webサイトなどで頻繁に使用されるメニューやボタンなどの機能があらかじめ用意されたものを指します。
Webフレームワークを使用すると

  1. Webサイト制作にかかる時間を短縮できる
    − デザインやレイアウトが用意されている
    − コーディングの短縮
  2. レスポンシブ対応
    − レイアウトの特徴:グリッドシステム
  3. フレームワーク独自のルールがあり、ルールに沿って利用するだけで整ったデザインのページを作成でき、共同開発にも適している

といったメリットがあります。

Webサイト制作にかかる時間を短縮できる

デザインやレイアウトが用意されている

通常Webページの配色やレイアウトを考えるのはデザインの知識がなければ大変な作業ですが、Bootstrapには既に整ったデザインの構成部品のコードが用意されており、それらのコードを貼り付けるだけで知識が無くても簡単におしゃれなWebページを完成させる事ができます。

コーディングの短縮

また、Bootstrapにはサンプルコードが用意されており、それらを貼り付けるだけで簡単にWebサイトの構成部品が完成するため、一からコーディングをおこなってWebページを作成するより作業時間が短縮できます。
できる限りコスト削減時間削減を実現したい場合などにもBootstrapが使われることが多いのです。

レスポンシブ対応

さらに、通常レスポンシブに対応したサイトを作成するのにスマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。
BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。

レイアウトの特徴:グリッドシステム


画像引用元:CSS · Bootstrap
Bootstrapのレイアウトには、グリッドシステムというものが使われています。
Bootstrapでは横の幅を12分割し、そのうち何個の枠を使うのかで幅を指定します。
グリッドに沿って表示物を配置しておけば、パソコンやスマホなど画面幅が異なってもレイアウトを組み替えやすくなります。
このグリッドを活用してレイアウトすれば簡単にレスポンシブにできます
※実際の使い方は下記をご覧ください。

フレームワーク独自のルール

コードの書き方や名称の付け方などはプログラマーによって様々です。
共同開発する際にそれぞれが自分にだけわかる独自の名称や関数を使ってコーディングしていくと、他の人が理解できない可能性が出てきます。
しかしBootstrapを利用すれば命名ルールなど細かい規則があるため、それに従えば誰でもコードの内容を理解できます
また、ライセンスはMIT Licenseのオープンソースなので商用利用することも可能です!

以上のようにBootstrapには多くのメリットがあるため現在も多くのユーザーや開発現場で支持されています。

便利さと表裏一体なデメリット

  1. デザインが画一的になりがち
  2. 細かい調整は自分でCSSを入力する必要がある
  3. 機能を詰め込んだ開発には向かない

デザインが画一的になりがち

Bootstrapはテンプレートを使用すれば簡単にサイトを制作することが出来ますが、多少なりともカスタマイズしないと画一的なサイトに仕上がる恐れがあります。
そのまま用いる場合滲み出るBootstrap感はどうしても拭えないでしょう。Web制作に携わる人であれば「あ、これはBootstrapを使ってるかも」と気づかれる事もあるかもしれません。

細かい調整は自分でCSSを入力する必要がある

Bootstrapで用意されていない要素を指定したい場合は、自分でcssやJavascriptのコーディングをする必要があります。
例えば、Bootstrapでは line-heigt(行送り) letter-spacing(字間) カラーコード(#fff等)を使用した各パーツの色などを指定するクラスが用意されていません。
これらを指定したい場合は、通常のコーディングと同じように独自のclass(又はid)を作成する必要があります。

テンプレートを使用すれば、おおまかな形は用意されているデザインの通りに作成することができます。しかし、テンプレートをカスタマイズする際にはBootstrapの習得が必要になります。
簡単なカスタマイズであれば問題ありませんが、Bootstrapの構文も多様なのでカスタマイズしたい内容によっては、実現するのに時間が掛かってしまうケースもあるでしょう。

機能を詰め込んだ開発には向かない

Bootstrapは元々webサービスサイトの開発が目的ですので、それ以外の1画面に機能を詰め込んだ社内webアプリケーション開発には向いていないとされています。
Bootstrapに向いているものは、開発にかけられる時間が少ない案件、オリジナリティが求められる案件などです。
一方、向いてないものは、CSSフレームワークの範疇を超えた複雑なデザイン、ページのデザインに一貫性がないような案件などです。
Bootstrapを使用する際は、向いているものと向いていないものを見極める必要があるでしょう。

 

Bootstrapで作成されたサイト実例

実際にBootstrapを利用している例を見てみましょう。
※独自のカスタマイズをされたサイトも含みます。

ランディングページ・CPサイト

アズサイエンス株式会社


出典:https://azscience.jp/
 

長山皮膚科医院 | 茨城県日立市の一般皮膚科


出典:http://nagayama-hifuka.com/
 

東京の映像・企画・イベント制作会社|株式会社真面目


出典:https://majime.jp/
 

ブログサイト

ミーティア(MEETIA) | Music、CultureのWebマガジン


出典:https://meetia.net/
 

ECサイト

伝統工芸品・日本製品の通販【BECOS(べコス)】


出典:https://www.thebecos.com/
 
この様な洗練されたお洒落なサイトが、自ら0から作るよりも素早く綺麗に仕上がることでしょう!
 

基本的な使い方

Bootstrapを利用するには、BootstrapとjQuery(JavaScriptのライブラリ)を読み込む必要があります。読み込みの方法は「すでにホストされているファイルをインターネット経由で読み込む(CDN)」か、「ソースをダウンロードし、ローカルに配置して読み込む」かの2パターンとなります。
今回はダウンロードして利用する方法をご紹介します。

必要なフォルダ&ファイルを作る

Webサイトを作成していく前に前準備をしましょう。

  1. まずはPC上に任意の名前のフォルダを作成します。
  2. Bootstrapを開き、「Download Bootstrap」をクリックして必要なファイルをダウンロードします。
  3. 「css」・「js」のフォルダで構成されたファイルがダウンロードされますが、この状態ではHTMLファイルがないので「Starter template」のcopyボタンからサンプルのテンプレートをコピーし、「index.html」というファイル名で保存します。
  4. 先ほどダウンロードしたcssと同じ場所にindex.htmlファイルを配置し、開いて「Hello,world!」が表示されればサイトの土台が完成です。

index.htmlにテンプレートコードを貼り付ける

次に、index.htmlをテキストエディタ等で開きます。
Bootstrapにはすぐに始められるように多種多様なテンプレートコードが用意されています。このコードを貼り付けるだけでBootstrapを使い始められるので非常に便利です。
Bootstrapを使ったHTMLの書き方は、基本的に各要素にBootstrapで定義されているclassを付与していくだけです!
※Bootstrapで定義されているclassは下記サイトなどが実際のデザイン見本と共に一覧となっておりますのでご参照ください。
 
パーツのサンプルとコード (Bootstrap本サイト内)
https://bootstrap-guide.com/example
Bootstrap 4 Cheat Sheet
 

グリッドシステムを利用する

このグリッドシステムを使う際には、「col-〇〇」というclassを付与します。「col-12」なら12/12で1カラム、「col-6」が2つ並んでいたら6/12、すなわち1/2で2カラムというイメージです。
その際必ず先祖要素に「container」、親要素に「row」というclassを付ける必要があります。
例:

<div class="container"> <!-- ←先祖要素 -->
  <div class="row"> <!-- ←親要素 -->
    <div class="col-1">○○○○</div>
    <div class="col-2">○○○○</div>
    <div class="col-3">○○○○</div>
    <div class="col-4">○○○○</div>
    <div class="col-2">○○○○</div> <!-- ←ここまでで1列分 -->

    <div class="col-5">○○○○</div>
    <div class="col-6">○○○○</div>
    <div class="col-1">○○○○</div> <!-- ←ここまでで2列分 -->
  </div>
</div>

また、classを付ける際数字の前に「sm」などのサイズ指定を入れてあげることで、サイズごとにレイアウトを切り替えることが可能です。

最小サイズが540px .col-sm-〇〇
最小サイズが720px .col-md-〇〇
最小サイズが960px .col-lg-〇〇
最小サイズが1140px .col-xl-〇〇

例:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">画面幅によって可変</div>
<!-- 上記の場合ブラウザ幅が720pxの時は半分のサイズ、540pxの時は幅いっぱいとなります -->
  </div>
</div>

テンプレートを利用する

BootstrapのテンプレートはWebサイト上に公開されており、必要なファイルをダウンロードするだけでOKです。
これを使うことで、HTMLのコーディングすら不要となります!
自由なレイアウトにするためには多少調整は必要になると思いますが、配布されているものだけでも十分活用できます。

おすすめテンプレートサイト


Bootstrap公式テンプレート

 

ブログやランディングページなど種類が豊富なテンプレート


Start Bootstrap

 

HTML5のシンプルなデザイン


Agency

 

日本語を美しく表示することにこだわったテンプレート


Honoka

などなどBootstrapで無料利用できるテンプレートを公開しているサイトは多々存在しますので、お気に入りのデザインを探してみてください!

まとめ

Bootstrapを使えば簡単にオシャレなレスポンシブWebサイトを作ることができるので、一からコードを書くよりも圧倒的に早く完成させる事ができます。
ぜひテンプレートやサンプルコードを積極的に利用してデザインやコーディングにかける時間を省略していきましょう。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)