「Bootstrapを始めてみたけど使えない。本当に使えるの？他の人は使えているの？」
上記のような悩みを抱えている方がいます。
今回は上記のようなお悩みを解決するための、お手伝いをします。
✔本記事の内容
・Bootstrapの活用方法
・Bootstrapの導入実績
・Bootstrapの口コミ・評判
✔本テーマを読むメリット
・Bootstrapをうまく使う方法が分かる
・Bootstrapの導入実績が分かる
・Bootstrapを使用している方の評判が分かる
この記事を書いている私は、2021年8月から副業を始めました。現在は本業と両立し、web制作者として活動しています。
初めてプログラミングに取り組んだとき、私は「プロゲート」や「ドットインストール」を活用し、自己学習を始めました。しかし、道場コースに挑戦した際、手がとまってしまい、「自分には才能がない、センスがない」と感じることもありました。
現在のweb制作業界では、プログラミング言語を知らなくても、web制作が可能なものがあります。そのため、web制作に関して初心者であっても、安心してweb制作を始められるでしょう。中でもBootstrapと呼ばれるものがあり、初めから多くのテンプレートが入っているありがたいものがあります。
当記事では、Bootstrapを初めて学ぶ方について、シェアしていきます。参考にしていただけると幸いです。
✔結論
Bootstrapはユーザーの理解度によって使いやすさが異なる！！
上記のとおりです。
過去の僕と同じ悩みを抱える方へ、心を込めて深堀します。
Bootstrapの活用方法
「Bootstrapを組み込みましたがうまく使えませんなんでだろう？」
こちらのテーマ、ではこのような疑問を解消するため、深堀解説していきます。
✔本テーマの内容
・tableを作成してみる
・iconを作成してみる
・buttonを作成してみる
・marginを設定してみる
・Bootstrap modalを利用してみる
✔本テーマを読むメリットは下記です
・Bootstrapでさまざまなことができるようになる
こちらのテーマでは、Bootstrapの活用方法についてご紹介します。Bootstrapでtableを作成する方法や、iconを作成する方法などについて解説するので、参考にしてみてください。当テーマをご覧になれば、Bootstrapをうまく使えなくて悩んでいる方でも、安心して学べるはずです。
tableを作成してみる
こちらのパートでは、tableの作成方法についてご紹介します。bootstrapを使用すれば、簡単にtableを作成できるのでぜひ確認してみましょう。Bootstrapを具体的に何に使用すれば良いのか、参考になるはずです。
✔Bootstrapで、紹介されているtableのコードを活用すれば、カレンダーを作成できる。また、色を変更できるので自分好みのデザインが可能。
マウスでクリックした時の動きを追加できる。
Bootstrapで用意されているコードを使用すれば、次のような表が作成できます。
<table class=”table”>
<thead>
<tr>
<th scope=”col”>#</th>
<th scope=”col”>First</th>
<th scope=”col”>Last</th>
<th scope=”col”>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=”row”>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope=”row”>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope=”row”>3</th>
<td colspan=”2″>Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
また、次の画像のように行、列、セルに色を付けることも可能です。（実際の配色は異なります）
コードは下記のようになっています。
<!– On tables –>
<table class=”table-primary”>…</table>
<table class=”table-secondary”>…</table>
<table class=”table-success”>…</table>
<table class=”table-danger”>…</table>
<table class=”table-warning”>…</table>
<table class=”table-info”>…</table>
<table class=”table-light”>…</table>
<table class=”table-dark”>…</table>
<!– On rows –>
<tr class=”table-primary”>…</tr>
<tr class=”table-secondary”>…</tr>
<tr class=”table-success”>…</tr>
<tr class=”table-danger”>…</tr>
<tr class=”table-warning”>…</tr>
<tr class=”table-info”>…</tr>
<tr class=”table-light”>…</tr>
<tr class=”table-dark”>…</tr>
<!– On cells (`td` or `th`) –>
<tr>
<td class=”table-primary”>…</td>
<td class=”table-secondary”>…</td>
<td class=”table-success”>…</td>
<td class=”table-danger”>…</td>
<td class=”table-warning”>…</td>
<td class=”table-info”>…</td>
<td class=”table-light”>…</td>
<td class=”table-dark”>…</td>
</tr>
前述ではテーブルを使用することで、カレンダーを作成できることを述べました。しかし、webサイトでは主にお問い合わせフォームに、テーブルを使用することがほとんどです。そのため、自分の制作したwebサイトで、フォームを作成する時に前述したコードを試してみると良いでしょう。
詳細は下記のサイトを参考にしてください。
iconを作成してみる
こちらのパートでは、iconの作成方法についてご紹介します。Bootstrapには、簡単にiconも作成できる専用のサイトがあるため、webサイトのデザインをアップできるでしょう。。専用サイトではどのようなiconが作成できるのか、参考になるはずです。
✔iconとは何か
iconはある物事を簡単な絵柄を利用して、記号化して表すものです。例えば、会社のホームページであれば、製品やニュースなどの箇所に絵柄があります。文字で記載されているため、何のページへ行けるのかは分かります。しかし、絵柄があることによってすぐに探し出せるので、訪問者のストレスを軽減できるでしょう。iconがあることによって、より良いホームページができあがるのです。
✔Bootstrap Iconsというサイトがある
Bootstrapには、Bootstrap Iconsと呼ばれる、icon専用のサイトがあります。Bootstrap Iconsには、1,800種類以上のiconがありダウンロードすることで、利用可能です。無料で利用できるため、安心して使用できるでしょう。iconを画像として使用できるだけでなく、htmlコードで埋め込んで使用できるため、さまざまな用途で使用できます。また、編集ができるので自分好みに、カスタマイズできるでしょう。
iconはwebサイトに必要なもので、Bootstrap Iconsを利用することで、より良いwebサイトが制作できます。無料で利用できる上に、1,800種類以上のiconがあるため、積極的に利用してみましょう。
buttonを作成してみる
こちらのパートでは、buttonの作成方法についてご紹介します。Bootstrapには、簡単にbuttonも作成できる専用のサイトがあるため、webサイトのデザインをアップできるでしょう。当パートをご覧になれば、専用サイトではどのようなbuttonが作成できるのか、参考になるはずです。
✔buttonとは何か
buttonは押すと、何かしら動作するものです。例えば、ホームページで何かしらの突起物をクリックすると、次のページへ移動することがありますよね。前述した突起物がbuttonです。buttonがあることによって、訪問者を次のページへと誘導できます。また、buttonはiconと同様に、すぐに探し出せるものなので、訪問者のストレスを軽減できるでしょう。
✔Bootstrap
Bootstrapのbuttonsと呼ばれるサイトでは、buttonを簡単に制作可能なコードを記載しており、次の画像のようなものを制作できます。
buttonを制作可能なコードは下記のようになっています。
<button type=”button” class=”btn btn-primary”>Primary</button>
<button type=”button” class=”btn btn-secondary”>Secondary</button>
<button type=”button” class=”btn btn-success”>Success</button>
<button type=”button” class=”btn btn-danger”>Danger</button>
<button type=”button” class=”btn btn-warning”>Warning</button>
<button type=”button” class=”btn btn-info”>Info</button>
<button type=”button” class=”btn btn-light”>Light</button>
<button type=”button” class=”btn btn-dark”>Dark</button>
<button type=”button” class=”btn btn-link”>Link</button>
buttonは訪問者にアクセスを促すものであり、seoを考えたwebサイトに必要なものです。積極的にBootstrapのbuttonを用いましょう。
詳細は下記のサイトを参考にしてください。
marginを設定してみる
こちらのパートでは、Bootstrapでmarginを使用する方法について、ご紹介します。Bootstrapを使用すれば、簡単にmarginの設定ができるため、webサイトのデザインをアップできるでしょう。当パートをご覧になれば、具体的にどのようなメリットがあるのか、参考になるはずです。
✔marginとは
そもそもmarginとは何か、分からない方もいるはずです。marginとはwebサイトの余白をつくるために、用いられるhtmlです。例えば、画像と画像の間に余白を設けたいのであれば、margin:数値;と入力します。数値の部分に入力した値によって、余白の大きさを設定可能です。
Bootstrapには、Bootstrap Spacingと呼ばれるものがあり、簡単にmarginの設定ができます。簡単にmarginの設定ができれば、webのカスタマイズが楽になるでしょう。
Bootstrapで簡単に設定可能なコードは、下記のようになっています。
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
詳細は下記のサイトを参考にしてください。
Bootstrap modalを利用してみる
当パートでは、Bootstrap modalについてご紹介します。Bootstrapには簡単にライトボックスや、通知などを作成できるものがあります。当パートをご覧になれば、具体的にどのようなメリットがあるのか、参考になるはずです。
✔ライトボックス
そもそもライトボックスとは何なのか、分からない方もいるはずです。ライトボックスはサムネイル画像をクリックした時に、画像が拡大されて見やすくなる表示機能を指します。
✔Bootstrap modal
前述したとおりBootstrapには、Bootstrap modalと呼ばれるものがあり、ライトボックスや通知を作成可能です。そのため、webサイト機能をさらに高められます。
Bootstrap modalではさまざまなコードがあるため、当記事ではBootstrap modalにある、次の画像のようなものについてご紹介しましょう。
コードは下記のようになっています。
コードは下記のようになります。
<div class=”modal” tabindex=”-1″>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<h5 class=”modal-title”>Modal title</h5>
<button type=”button” class=”btn-close” data-bs-dismiss=”modal” aria-label=”Close”></button>
</div>
<div class=”modal-body”>
<p>Modal body text goes here.</p>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-bs-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary”>Save changes</button>
</div>
</div>
</div>
</div>
Bootstrapの導入実績
「Bootstrapは何に使われているんだろう？」
当テーマでは上記のような悩みを解消するため、深堀解説していきます。
✔本テーマの内容
・Apple Maps Connectで使用されている
・SUPER MARIO ODYSSEYで使用されている
✔本テーマを読むメリットは下記です
・BootstrapがAppleで使用されていることが分かる
・BootstrapがNintendoで使用されていることが分かる
こちらのテーマではBootstrapが何に使用されているのか、気になっている方にBootstrapの導入事例について、ご紹介しましょう。
「Bootstrapは何に利用されているの？」
上記のような悩みを抱えているのであれば、ぜひ当テーマを参考にしてみましょう。
Apple Maps Connectで使用されている
Bootstrapは、Apple Maps Connectと呼ばれるものに、使用されています。Apple Maps ConnectはAppleで開発されており、店舗や施設の情報をApple Maps上に無料で登録可能なサービスです。Apple Maps Connectを利用すれば、ビジネスがもっと便利になるでしょう。
Super Mario Odysseyで使用されている
Bootstrapは、Super Mario Odysseyと呼ばれるものに、使用されています。Super Mario Odysseyは任天堂で開発されており、マリオが主人公のアクションゲームです。マリオが主人公のゲームは、多くの方が知っていることでしょう。
Bootstrapを使用しているものでも、有名なものを2つご紹介しましたが、外国のwebサイトであれば、多くのものに使用されています。Bootstrapは基本的にはweb制作に役立ちますが、応用できるようになればさまざまなものに活かせるでしょう。ただし、応用できるようになるためには、htmlやcssの知識を習得する必要があります。独学でhtmlやcssを習得できますが、アプリ開発するまでには物足りません。そのため、web制作だけでなくアプリ開発もしたいのであれば、プログラミングスクールに通うことをおすすめします。
プログラミングスクールの記事についてはコチラを参考にしてください
Bootstrapの口コミ・評判
こちらのパートでは、Bootstrapの口コミ・評判について、解説していきます。
Bootstrapの口コミ・評判については、下記の2つです。
・Bootstrapの良い口コミ・評判
・Bootstrapの悪い口コミ・評判
前述した2つについて、詳しく解説しましょう。
Bootstrapの良い口コミ・評判
こちらのパートでは、Bootstrapの良い口コミ・評判について、解説していきます。
Bootstrapの良い口コミ・評判では、次のようなものがありました。
Bootstrapの良い口コミでは、「かなり便利」、「レスポンシブ対応に使いやすい」、「margin、paddingがイマイチ分からなくても、触ってみると良い」、「コーディングの量を減らせるなど」、多くの良い評判がありました。Bootstrapのテンプレをコピペするだけで、色を変更できるので便利ですよね。また、当記事では解説していませんでしたが、Bootstrapではスマホやタブレットにも対応もしているので、レスポンシブ対応も可能です。
良い口コミから分かるように、Bootstrapを使用すればwebサイトに必要な要素が、追加できることが分かります。Bootstrapを使用したことのない方でも、慣れると良いとの口コミがあったので、慣れるまである程度の期間使い続けてみましょう。
Bootstrapの悪い口コミ・評判
当パートでは、Bootstrapの悪い口コミ・評判について、解説していきます。
Bootstrapの悪い口コミ・評判では、次のようなものがありました。
Bootstrapの悪い口コミでは、「便利なようで便利じゃない」、「使い方が悪くてキレそう」、「気持ち悪い」とありました。悪い口コミでは、Bootstrap自体に完全に問題がある訳ではなく、ユーザーの理解力が不足していて不満があるようです。Bootstrapのコードをコピペするだけで、要素を制作できますが何が何だか全く理解していないと、不具合や違和感が生じてしまう可能性があります。そのため、本当にゼロでできる訳ではないと言うことを、念頭に置いておきましょう。
悪い口コミから分かるように、ユーザーがhtmlやcssに関しての知識が、本当にゼロであるとBootstrapを使っていて、不満を感じてしまいます。そのため、使用する際にはあまり楽観的に、ならないようにしましょう。
まとめ
こちらの記事では、【Bootstrapで何ができるの？】導入実績と合わせて解説を、下記の3つのテーマにまとめて解説しました。
・Bootstrapの活用方法
・Bootstrapの導入実績
・Bootstrapの口コミ・評判
という内容でお届けしました。
最後まで当記事をご覧になっていただき、ありがとうございました。Bootstrapを使用する際に、ぜひ当記事を参考にしてください
コメント