はじめに
簡単なアプリやHP作成はできるようになったけれど、なかなかHTMLやCSSが思ったようにいかないというのが課題でした。ChatGPTにどうしたら上手くできるか聞いたところ、CSSフレームワークとしてBootstrapというフレームワークがあると知り、学習したため記録を残します。
Bootstrapについて
Bootstrapは、Twitter社が開発したオープンソースのフロントエンドフレームワークで、ウェブ開発者が迅速にレスポンシブでスタイリッシュなウェブサイトやウェブアプリケーションを構築するのに役立ちます。Bootstrapを使用することで、CSSとJavaScriptの基本的な部分を簡単に取り入れることができます。
主な特徴
1. レスポンシブデザイン
Bootstrapはモバイルファーストのデザインを採用しており、デフォルトでレスポンシブレイアウトを提供します。これにより、異なるデバイスや画面サイズに応じてウェブサイトのレイアウトが自動的に調整されます。
2. 豊富なコンポーネント
ボタン、ナビゲーションバー、モーダル、カードなど、様々な再利用可能なコンポーネントが用意されています。これらのコンポーネントは簡単にカスタマイズでき、ウェブサイトの構築を迅速に行えます。
3. グリッドシステム
Bootstrapのグリッドシステムは、ページレイアウトを効率的に構築するための12カラムのレスポンシブグリッドです。グリッドシステムを使うことで、レイアウトの配置や調整が容易になります。
4. カスタマイズ可能
Sass（Syntactically Awesome Stylesheets）を使用して、Bootstrapのスタイルをカスタマイズすることができます。必要なコンポーネントだけをインポートすることも可能で、プロジェクトに必要な部分だけを効率的に使用できます。
5. プラグインと拡張
Bootstrapは多くのJavaScriptプラグインを含んでおり、モーダルウィンドウやツールチップ、ポップオーバーなどのインタラクティブな要素を簡単に追加することができます。
使い方
使い方としては、サイトからダウンロードする方法、CDNを使用する方法などがあります。
今回はサイトからダウンロードして使用してみました。
1. ダウンロードページからコンパイルされたCSSとJSをダウンロードする
https://getbootstrap.jp/docs/5.3/getting-started/download/
2. ダウンロードしたフォルダを解凍し、CSSとJSのフォルダをVScodeの適当なフォルダにコピーする。今回はVScodeにbootostrrap_practiceというフォルダを作成しその中にCSSとJSフォルダをコピーしました。
3. ２で作成したフォルダ内にHTMLファイルを作成し、以下を記述します。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link rel="stylesheet" href="bootstrap-5.3.0-dist/css/bootstrap.min.css">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
あとは、classを記入しbootostrapで設定されているCSSの情報を記入すると使うことができます。
使ってみた感想
簡単にデザインを編集することができるのですごく便利！！
次はアプリに導入して整ったサイトを作っていきたいと思います。