Web開発の時短術 Bootstrapで叶える爆速デザイン
今日はBootstrapについて、ソフトウェアエンジニアの視点から、その魅力と使い方をたっぷりお伝えしますね。Web開発の世界では、これを知らないとちょっと乗り遅れちゃうかも？というくらい、とっても人気のあるフレームワークなんですよ。
一言で言うと、Webサイトの見た目を整えるための道具箱です。
Webサイトを作る時、デザインを一から考えるのは大変ですよね。色、配置、ボタンの形、文字の大きさ...。これらの見た目を、簡単に、しかもどんなデバイス（PC、スマホ、タブレット）で見てもキレイに表示されるようにするための、HTML、CSS、JavaScriptのセットがBootstrapなんです。
Web開発の現場では、Webサイトのデザインやレイアウトを効率的に作るためにBootstrapがよく使われています。
ソフトウェアエンジニアがBootstrapを導入すると、開発がグッと楽になります。
開発速度が爆速に！
ボタンやナビゲーションバー、フォームなど、よく使う部品（コンポーネント）があらかじめ用意されています。これらを組み合わせるだけで、デザインが整ったWebサイトがサクッと作れます。デザインの細かい調整に時間を取られず、機能開発に集中できます。
スマホ対応も完璧！
「レスポンシブデザイン」という機能が備わっています。これは、画面の幅に合わせて自動的にレイアウトが変わる仕組みのこと。Bootstrapを使えば、PC、スマホ、タブレット、どんな画面サイズでも見やすいWebサイトが簡単に実現できます。
チーム開発で大活躍！
同じフレームワークを使うことで、チームメンバー間でデザインの統一が図れます。各自が自由にCSSを書いてデザインがバラバラになるのを防ぐことができます。
それでは、実際にBootstrapを使ってみましょう。導入方法はとてもシンプルです。
最も簡単で手軽な方法です。HTMLファイルの<head>タグ内に、以下のコードを貼り付けるだけです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Bootstrap サンプル</title>
</head>
<body>
<h1>Bootstrapを使ったWebページ</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
linkタグでCSSを、scriptタグでJavaScriptを読み込んでいます。これだけで、すぐにBootstrapの機能が使えるようになります。
Node.jsを使った開発環境では、npmを使ってプロジェクトにBootstrapをインストールすることもできます。
npm install [email protected]
この方法だと、コンパイルやカスタマイズがしやすくなります。
では、実際にBootstrapのクラスを使って、ボタンやナビゲーションバーを作ってみましょう。
Bootstrapには様々なデザインのボタンクラスが用意されています。
<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>
btnという基本クラスに、btn-primary、btn-successなどのクラスを追加するだけで、色やデザインが変わります。
Webサイトには欠かせないナビゲーションバーも、簡単に作れます。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">サイトロゴ</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">サービス</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">お問い合わせ</a>
</li>
</ul>
</div>
</div>
</nav>
navbar、navbar-expand-lg、bg-lightといったクラスを組み合わせるだけで、見栄えの良いナビゲーションバーが完成します。
