Bootstrap 備忘録 | 夫の家計管理術

今回の記事はBootstrapの使い方を忘れた。。。みたいなときに参考にするページ程度でまとめていこうと思います。

■Bootstrapってなに
■まずどうすればいいのか
■で、何ができるのか

■Bootstrapってなに

パワフルで拡張性の高い、機能満載のフロントエンドツールキットです。Sassでビルドしてカスタマイズし、あらかじめ用意されたグリッドシステムとコンポーネントを利用し、強力なJavaScriptプラグインでプロジェクトに命を吹き込むことができま...

↑です。

私が、使用した用途としては、Webサイトのデザインを汎用的なものとするために使用。

多くの人が目にしたことがあるようなデザインであったり、テンプレになるデザイン、webページ上にあるコンポーネンツでこれどうやってんのだろう？と思うもの、例えばカルーセル。純粋に持っている知識のみで実装が困難なものを、中級者に足を突っ込みかけの知識で実装するために利用しました。

とはいえ、このブログは別の枠組みでやっています。ここで紹介されている内容が実際にこのページで使用されているわけではありません。

もう少し概要に触れますが、これ自体はもともとはTwitterが開発したもので、GitHubにソースコードがあります。ざっくり言うと、それなりに有名どころが手掛けたもので、みんなで改良していってるフロントエンドのフレームワークです。

フロントエンドってことで、htmlやCSS、JavaScriptといった実装に役に立ちます。

端的に言うとwebサービス作るのにUI部分を自分でカスタムしたいなら使えるものってだけです。

こういったフレームワークはある程度有名どころを使った方が良いんです。

理由は、ロード時間が短くなるから、後は、皆が見慣れているデザインって安心しませんか？そういった心理的なハードルを下げてくれる効果があります。

余談で、わかっている人もいると思いますが、このブログはCocoonというテーマを概観に当てはめていて、これも個人ブログ界隈ではよく見かけるものなので、少し前から変更しています。

ロード時間が短くなるといったのは、Bootstrapは世界各地にに必要となるデータが置かれているサーバがいくつもあるためです。

■まずどうすればいいのか

はじめに

↑です。

はじめにの項目で書かれていることをただやっていくだけ、呪文だと思ってください。（大体意味は分かると思いますが

サンプルコードとかは上記のリンク先にあるし、私の説明よりわかりやすいと思うのでそちらを参照してください。

理解のためにざっくりCSSを例に言うと、CSSでスタイルシートを定義して見栄えを来ますが、Bootstrapで提供されるスタイルシートをどこぞのサーバから提供してもらうためのリンクが書かれています。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

それで、独自でwebページを作る場合は完全にBootstrapが提供するもののみで構成することは困難ですので、上書きする形で、もう一つ自分がカスタムする用のスタイルシートを定義しておく。

以下のように

<head>

　・・省略・・
  <!-- Bootstrap Scripts -->
　
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


  <!-- CSS StyleSheet　カスタムする用 -->
  <link rel="stylesheet" href="css/styles.css">
</head>