Bootstrapとは？メリットとデメリットそれぞれ3つを解説
Bootstrapとは？
Bootstrapとは、ウェブサイトやwebアプリケーションを作成できるフリーソフトです。
これは、米Twitter社が開発したもので、テンプレートが多数あり素早く作業をすることに特化しています。
webサイトを構成するためのプログラムとして、html・css・フォント・javascriptを駆使して作業を行います。
Bootstrapの種類4つ
このBootstrapにはさまざまな種類があります。今回は、”angular directives for Bootstrap” ”twitter Bootstrap” ”Bootstrap themes” ”BootstrapWP”の４種類に着目して紹介します。
Bootstrapの種類1：Angular directives for Bootstrap
Angular directives for Bootstrapとは、AngularJSと連携することができるBootstrapです。
angularJSとは、アプリケーション開発に適したフレームワークを構築するためのツールセットであり、非常に表現力豊かで読みやすく迅速に開発できます。
このAngularJSは他のJavaScriptと一緒に使用する際に注意が必要なのですがBootstrapを使うことでその問題を解決できます。
Bootstrapの種類2：Twitter Bootstrap
Twitter BootstrapとはTwitter社が開発したBootstrapで、その社名を取って名前が付けられたものです。
2012年9月末にTwitter社から独立してオープンソースになったため以降名称がBootstrapになっています。
Twitter Bootstrapとは、ウェブサイトやwebアプリケーションを作成するフロントエンドwebアプリケーションフレームワークです。
Bootstrapの種類3：Bootstrap Themes
Bootstrap themesとは、美しいデザインのテンプレートが販売されている公式テーマです。
有料のものが多いですが、見た目や使いやすさが考慮されており、作業効率をあげることが出来ます。
Bootstrapの種類4：BootstrapWP
世界的に有名なブログ作成ツールであるwordpressがあります。集客力・収益力の高いブログを作成する場合このツールを使用すると良いと言われています。
BootstrapWPは、wordpressと併用して使用できるように作られました。
wordpressで簡単にデザイン性の高いwebサイトを作成したい人におすすめです。
Bootstrapを使うメリット3つ
Bootstrapを使用するメリットとして、レイアウトのデザインを柔軟に調整できること、表示が分かりやすいこと、モバイルに対応していることがあげられます。
以降にメリットの詳細について記載していきます。
Bootstrapを使うメリット1：レイアウトのデザインを柔軟に調整できる
レイアウトやコンポーネントのデザインを1から考えて制作することは、かなり難しい作業です。
Boostrapにはテンプレートやテーマが最初からあるため、使用するとおしゃれなwebサイトを制作できるでしょう。
さらに、色やデザインは”html”に書くクラス名を変更するだけで簡単に変えることが出来ます。
Bootstrapを使うメリット2：表示が分かりやすい
サイトを制作するにはそこそこ時間がかかります。
Boostrapは表示がわかりやすいため、作業の時間を短縮できます。テンプレートには、必要なコード、設定が書かれているため作業時間の短縮が可能です。
Bootstrapを使うメリット3：モバイルに対応している
近年は、スマートフォンやタブレットなどのデバイスが増えてきており、それらに適したwebページの需要が高まっています。
そこで、Boostrapにある「グリッドシステム」という機能を使用すると簡単に様々なデバイスに対応したページを制作できます。
Bootstrapを使うデメリット3つ
Bootstrapとは、webアプリケーションを簡単に作成できるソフトですが、使用するにあたりデメリットもあります。
デメリットとして、カスタマイズ知識がある人材が必要なこと、機能を詰め込んだ開発には向かないこと、日本語文章の表示の調整が必要なことがあげられます。
以降にそれぞれの詳細について記載していきます。
Bootstrapを使うデメリット1：カスタマイズ知識がある人材が必要
Bootstrapとは、テンプレートを使用すれば簡単にサイトを制作することが出来るソフトです。ですが、無個性なサイトに仕上がる恐れがあります。
近年Bootstrapを使用している人は多数いますので、自分なりにカスタマイズしないと、有益なものになりにくくなります。
カスタマイズするには、CSS や JavaScriptの知識が必要になるため、ある程度それらの知識がある人が必要となります。
Bootstrapを使うデメリット2：機能を詰め込んだ開発には向かない
Bootstrapとは、もともとwebサービスサイトの開発が目的ですので、それ以外の1画面に機能を詰め込んだ社内webアプリケーション開発には向いていないとされています。
Bootstrapに向いているものは、開発にかけられる時間が少ない案件、オリジナリティが求められる案件などです。
一方、向いてないものは、CSSフレームワークの範疇を超えた複雑なデザイン、ページのデザインに一貫性がないような案件などです。
Bootstrapを使用する際は、向いているものと向いていないものを見極める必要があるでしょう。
Bootstrapを使うデメリット3：日本語文章の表示の調整が必要
Bootstrapとは、Twitter社が開発したソフトですが、Twitter社はアメリカ合衆国の企業のため、英語圏へのアプローチがメインになっています。
そのため、日本語文書の表示だと見づらいことがあり、調整が必要になります。
Bootstrapとはどのように使うのか
Bootstrapとは、ウェブサイトやwebアプリケーションを作成するフロントエンドwebアプリケーションフレームワークをすることが出来るフリーソフトです。
まず、ファイルを読み込む必要がありますのでそのやり方は事項以降に記載しています。
次に、ファイルに入っているデータを自社サーバーに移動します。後は使用しながら学んでいきます。
具体例として実際にBootstrapの使用方法を1つ紹介します。
Bootstrapを使用すれば、美しいフォームを作成できます。foamタグに「class=”form-group”」と入力し、さらにinputタグに「class=”form-control”」と入力すると綺麗なフォームが出来ます。
Bootstrapの読み込み方法
Bootstrapの読み込み方として、CDN（コンテンツ・デリバリ・ネットワーク）を使用する方法があります。利点として、読み込みが早いことと、初心者でも簡単なことがあげられます。
CDNは、必要なファイルをダウンロードしなくても、必要なサーバーから提供してくれる仕組みです。
ファイルをインターネット経由で読み込む場合
HTMLでファイルを読み込む際、事前にcss・jQuery・javascriptのライブラリを準備する必要があります。
Bootstrapの公式ページにアクセスし、css・jQuery・javascriptのコードをコピーしHTMLに貼り付けます。
それぞれ、公式ページにテンプレートがありますので、それらを貼り付けて使用できます。
ソースをダウンロードして読み込む場合
公式サイトにアクセスし、ダウンロードして入手することもできます。
npm、コンポーザー、または流星経由でBootstrapのソースサスとJavaScriptファイルをインストールすることが出来ます。
他にも、jsDelivrの使用、ブートストラップアイコンの取得、公式テーマを参照できます。
Bootstrapで可能な便利機能の作成方法
Bootstrapとは、ベースナビ、ページネーション、ポップオーバーなどの機能を持つフリーソフトです。
Bootstrapには何が出来るのかをしっかり把握をして活用しましょう。一部の便利な機能について説明をします。
ページネーション
ページネーションとは、記事が複数ページあるときに記事の下のほうにページ番号をクリックして次のページ、前のページに飛べるリンクを付けることです。
まず、ページの枚数と表示の仕方を決めます。その時、数字を楕円で囲むようにするのか、テキストを決めたりすることが出来ます。
次に、1ページ前に戻るボタンと、1ページ次に進むボタンの仕様を決定します。仕様を決定した後は関数や式などを入力し、最後にテンプレートに上書きします。
使用するコードは以下の通りです。
angular.module(‘ui.bootstrap.demo’).controller(‘PaginationDemoCtrl’, function ($scope, $log) { $scope.totalItems = 64;
$scope.currentPage = 4;
$scope.setPage = function (pageNo) {$scope.currentPage = pageNo; };
$scope.pageChanged = function() { $log.log(‘Page changed to: ‘ + $scope.currentPage); };
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;});
ポップアップのヘルプ表示
これはポップオーバーという機能を使用して表示させることが出来ます。
ポップオーバーは、マウスをクリックする箇所に合わせたときにヘルプを吹き出し上で出すことが出来る機能です。
この吹き出しを出現させる手法をトリガーと呼びます。こちらのコードを張ることでトリガーを発動させます。
mouseenter:mouseleave
click:click
outsideClick:outsideClick
focus:blur
none
トリガーは、複数のボタンがあるときに各ボタンのヘルプをクリックすることで切り替えることができます。
例えば、ボタンにカーソルを合わせたときにヘルプが表示されボタンを押すことでカーソルが離れていても表示し続けますが、別のボタンを押したときに前に押したボタンのヘルプが消えてその時ボタンのヘルプが常に表示されるようになる機能です。
トリガー以外にも多数の型がありますので、それぞれ把握したほうが良いでしょう。
BootstrapとはWeb制作・開発ができるフレームワークである
Bootstrapとはウェブサイトやwebアプリケーションを作成・開発できるフレームワークです。
様々な機能を有しており、web制作を素早く正確に作成でき、幅広い分野で活躍しています。IT業界に興味のある方はBoostrapについて学んでおくと、将来仕事をするうえで強みになるでしょう。
今回の記事では、Bootstrapの種類と使用する際のメリットとデメリット、使用方法につい紹介しました。ほかにもBoostrapを使用するにあたり知っておきたい知識が多数あります。
まずは基礎的な使用法を理解し、少しずつ知識を深めていくとよいでしょう。
