みなさんが普段目にするWebページは細部までデザインにこだわっていたり、ウィンドウの大きさに合わせてデザインが変わるようなレスポンシブデザインのものが多いと思います。
そのようなWebページをすべて0からCSSを書いて作るのは大変ですよね。
少ない手間で整ったデザインを行うには フレームワーク を利用することが効果的です。
ここでは、世界でも最も利用されているCSSフレームワーク Bootstrap を使ってみましょう。
みなさんの現在のWebページは、このように左右に余白がないレイアウトになっていると思います。
下のコードのように、 レスポンシブ対応
Bootstrap CSS
Bootstrap JS
の3行を追加すると、Bootstrapを導入することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- レスポンシブ対応 -->
<link href="style.css" rel="stylesheet">
<title>はじめてのWebページ</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <!-- Bootstrap CSS -->
</head>
<body>
<h1>はじめてのWebページ</h1>
<p>こんにちは,GDSC Kyutechです.</p>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script> <!-- Bootstrap JS -->
</body>
</html>
しかし、ただBootstrapを導入しただけではデザインは変わりません。
まずは、コンテナ を使ってみましょう。
下のコードのように、body
に <div class="container">
を追加し、その中に h1
と p
を入れます。
このときに、<div class="container">
を閉じるために </div>
を忘れないでください。
<body>
<div class="container"> <!-- Content Start -->
<h1>はじめてのWebページ</h1>
<p>こんにちは,GDSC Kyutechです.</p>
</div> <!-- Content End -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>
このように、余白のあるレイアウトに変更されました!
さらに、Bootstrapはレスポンシブデザインに対応しているため、ウィンドウサイズを変更すると…
そのウィンドウサイズに合わせて適切な余白に変更されます!
コンテナの大きさを変えることもできるので、 Bootstrap公式Docs(コンテナ) を参考に変更してみましょう!
Warning
うまく行かない場合は、以下のような原因が考えられます。
-
インターネットに接続されていない
BootstrapはCDNと呼ばれる仕組みを用いているため、通常オフラインでは使用できません。
-
再読み込みされていない
Webページを編集した際には再読み込みをしてください。
-
自分のCSSが邪魔をしている
自作CSSの内容によってはBootstrapと競合を起こすことがあります、一度自作CSSをコメントアウトしてみてください。
<head> ... <!-- <link href="style.css" rel="stylesheet"> --> ... </head>
うまく行かない場合や、わからないことがある場合は気軽にお近くのCore-teamメンバーに声をかけてください!
まずは、普通に画像を入れてみましょう。
<div class="container">
<h1>はじめてのWebページ</h1>
<p>こんにちは,GDSC Kyutechです.</p>
<img src="https://http.cat/200"></img> <!-- 画像の表示 -->
</div>
十分に大きなウィンドウサイズでは問題ありませんが、小さいウィンドウサイズでははみ出してしまいます。
レスポンシブデザインに対応していないWebページでは、このようにウィンドウサイズを考えないレイアウトになってしまいます。
ここでBootstrapの出番です。
イメージ - レスポンシブな画像 を参考に、img
タブをclass="img-fluid"
にしましょう。
<img src="https://http.cat/200" class="img-fluid"></img> <!-- 画像の表示 -->
そうすると、ウィンドウサイズに合わせて画像の大きさが変わるようになります!
サイズ指定や配置などを BootstrapDocs イメージ を参考に変更してみましょう!
Tip
今回使用した猫の画像は HTTP Cats と呼ばれる、HTTP ResponseStatusCode
を猫の画像に置き換えてくれる WebAPI
です。
HTTP ResponseStatusCodeについては、 MDN Web Docs - HTTP Status を読んでみましょう。
WebAPIについては、 MDN Web Docs - WebAPI を読んでみましょう。
ここまでの内容で、Bootstrapの使い方がわかってきたと思います。
それでは、ここからは出題形式です。
下の画像のような表を Bootstrap Tables を参考に自分で作ってみましょう!
ヒント - わからない方へ
以下のリンクから BootstrapDocs Tables を読んでみましょう!
https://getbootstrap.jp/docs/5.3/content/tables/#%e6%a6%82%e8%a6%81
概要 という名前の段落にサンプルコードがあるので、右上のコピーボタンからコピーすることができます!
表を作ることができたら、 Bootstrap Tables バリエーション を参考に色付けをしましょう!
ヒント - わからない方へ
- 表題
# First Last Handle
の行、つまり表題は青色ですね。
Bootstrapでは青色のデザインがprimary
と定義されています。 - セル
@twitter
のセルは赤色ですね。 Bootstrapでは赤色のデザインがdanger
と定義されています。
Bootstrap Tables には他にも色々なオプションがあるため、気に入ったものを試してみましょう!
最後のお題は少し難しめですが、下の画像のようなWebページをつくってみましょう。
まずは、BootstrapDocs から「カード」について説明されているページを探しましょう!
ヒント - わからない方へ
BootstrapDocs を開き、左側のバーから Components を探してみましょう。
Bootstrap Card を開き、右側のバーから カードグループ を探してみましょう。
Bootstrap Card を開き、右側のバーから 水平方向 を探してみましょう。
ボタンの実装は二通りのやり方があります。
- Bootstrap Card のいくつかのパーツはボタンを付随しているので、その部分を流用する。
- Bootstrap Buttons からボタンをつける方法を探す。
ボタンのカスタマイズがしたい場合などは 2 を参考にしましょう!
最後の課題は少し難しかったと思いますが、Bootstrapを使うだけでイケてるレスポンシブデザインを簡単に作れることがわかったと思います。
実際の開発では、このようなフレームワークやライブラリを使用し、自分たちだけで0から作らないことで開発効率を上げています。
Bootstrap以外にも、 Tailwind や MUI があります。
ぜひ、自分のやってみたいことに合わせて色々なオプションやフレームワークに触れてみてください!