🔰はじめての方へ

Bootstrapの簡単な説明

Bootstrap
記事内に広告が含まれています。
スポンサーリンク

Bootstrapとは

ブートストラップとは、とても簡単に無料でCSSを使うことができるものです。

スマホ、タブレットといった、パソコンとは画面の大きさが違うものに対応するページを作るレスポンシブデザインに対応しているフレームワーク1になっております。

BootstrapにあるCSSを呼び出せるキーワードを入力するだけで、簡単にページを作成することができます。

簡単に誰でも使用することができるため、履歴書に書けるようなスキルではないことがデメリットとしてあります。

フレームワークとは

  1. フレームワークとは ↩︎

作業を効率化するための枠組みのこと

Webアプリケーションを開発するための必要な機能をあらかじめ備えているものです。

Bootstrapに向いてるものと向いてないもの

向いてるもの

  • 早急に作業せねばならないとき
  • 見た目のオリジナリティを求めないとき
  • デザイナーがいないとき

向いてないもの

  • 複雑なデザインを作成するとき
  • スマホ、タブレット、デスクトップでデザインが異なるものを作成するとき

Bootstrapを使う2つの方法

CDNを使用

CDNとはオンラインで外部のサービスを利用できるシステムのことで、ダウンロードせずに使用することができます。

CSSとJavaScript用のURLがあるので、こちらを張り付けて、HTMLファイルでCDNを読み込みます。

●CSSを読み込むときは、HTMLファイルの<head>タグ内の最後
 ※ ほかのスタイルシートよりもにコピペ

●JavaScriptを読み込むときは、HTMLファイルの <body>タグ内の最後、</body>の直前に記述します。

フォルダをダウンロードして使用

ダウンロードしてもHTMLファイルは存在しないため、HTMLファイルを作成して、テンプレートをコピーして使用します。

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

Bootstrap v5 チートシート

チートシート~Bootstrap5設置ガイド
Bootstrap 5 CheatSheet 🚀 By ThemeSelection | Classes
An interactive list of Bootstrap 5 classes, variables, and mixins. 🎁 The only Bootstrap 5 CheatSheet you will ever need....

コメント