HTML&CSS

【超初心者向け】Bootstrapを使ってみたい!環境設定は?

Bootstrapを使うとサイト制作を効率化できるって聞いたんだけど、どうやったら使えるようになるのかな?

この記事は、「細かいことはさておき、とりあえずBootstrapを使ってみたい」という方におすすめです。

この記事はBootstrapのver 4.3を基に記載しています。

Bootstrapを使う準備は5分で完了!

Bootstrapを使うためには何が必要?

Bootstrapを使うために、アプリケーションをダウンロードしたり、インストールしたり…という作業は必要ありません。

「あらかじめ用意されているデザインをHTMLで読み込む」ことで利用することができるようになります。

HTMLでデザインを読み込む方法は、
・インターネットから読み込む
・ファイルをダウンロードして読み込む
の2種類の方法がありますが、ここではより簡単に導入できる「インターネットから読み込む」方法で進めます。

この方法は「読み込み先のファイルが無くなった」など、自分でコントロールできない要因でデザインが崩れてしまう可能性があるので、Bootstrapに慣れるまでのテスト環境などの構築に適しています。本運用する場合は「ファイルをダウンロードして読み込む」方法を推奨します。

Bootstrap公式サイトからコードをコピペしよう!

Bootstrapは、HTMLでデザインを読み込んで利用するため、読み込むためのコードをHTMLに書く必要があります。

どんなコードを書くの?難しいのかな?

ご心配なく!

Bootstrapの公式サイトに掲載されている【Starter template】をコピペしてHTMLを新規作成すれば、必要なコードが記述されたHTMLファイルが秒で完成します。

【引用元:Bootstrap公式サイト

これで、Bootstrapを使えるようになりました!
超簡単!!

編集後記

「環境構築」というと、アプリケーションをダウンロードしてインストールするようなイメージだったので、「Bootstrapというアプリケーションがない」っていうのが最初は理解できなくて戸惑ったので、この記事を書きました。