合同会社アルティマシステム
Bootstrap3

第1回目 簡単にホームページが作れるBootstrap!

Bootstrapについて

Bootstrapとは、CSSフレームワークの1つです。Bootstrapを使用すれば難しいことを考えずに初心者でも簡単にホームページを作成できます!
スマートフォン・タブレットに対応のレスポンシブサイトもすぐに作成できます!
Webサイトのガタつき・ズレを一発解決!!!
こちらの記事は、初心者の方に向けての記事となっております。
第1回目は、Bootstrapのダウンロード方法・ダウンロード後のファイルについて紹介していきます。

Bootstrapをダウンロード

まずは、Bootstrapのサイトへアクセスしてみましょう!
Bootstrapトップページこちらからアクセスできます。
アクセス後、トップページに表示されているDownload Bootstrapをクリックしてください。

< 参考 ① >

Download Bootstrap
Download Bootstrapをクリック後、ダウンロードの画面が表示されます。

Download下の、Bootstrap・Source code・Sassの3種類の中からBootstrapのDownload BootstrapをクリックをするとBootstrapのダウンロードが開始されます。

< 参考 ② >

Bootstrap

Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
Download Bootstrap
ダウンロードしたBootstrapはzipファイルになっているので解凍してください。
解凍後、bootstrapフォルダが表示されます。

bootstrapフォルダの中を確認

bootstrapフォルダの中には、更にcss・fonts・jsの3つのフォルダが入っています。
  • css
  • fonts
  • js
cssとは、Webページに適用されるスタイル、デザインのコードが書かれています。
fontsとは、アイコンを使用する際に必要となります。
jsとは、Webページに適用されるスタイル、デザインに動きを付けるコードが書かれています。

cssフォルダの中を確認

cssフォルダの中を見てみましょう。
  • bootstrap-theme.css
  • bootstrap-theme.css.map
  • bootstrap-theme.min.css
  • bootstrap-theme.min.css.map
  • bootstrap.css
  • bootstrap.css.map
  • bootstrap.min.css
  • bootstrap.min.css.map
8つのファイルが入っています。
沢山あってよくわからないという方も安心してください。Bootstrapを使用する場合は、bootstrap.min.cssを読み込むだけでいいのです!
.minと付いているファイルは、同じ名前のファイルを圧縮したファイルです。

< 例 >

bootstrap.css圧縮されていない。

bootstrap.min.css圧縮されている。

コメント・改行などを取り除いているため、.minと付いているファイルの方が読み込み速度が早くなります。

fontsフォルダの中を確認

fontsフォルダの中を見てみましょう。
  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.svg
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff
  • glyphicons-halflings-regular.woff2
5つのファイルが入っています。
Bootstrapでは、Glyphiconsのアイコン(200個)を無料で使用できます。

< 例 >

お気に入り
お気に入り
同じお気に入りボタンでも、アイコンを付けるとわかりやすいですね!
文字・文章だけではなく、アイコンを取り入れることによってサイトが見やすくなります!!

jsフォルダの中を確認

jsフォルダの中を見てみましょう。
  • bootstrap.js
  • bootstrap.min.js
  • npm.js
3つのファイルが入っています。
こちらもcssと同様に.minと付いているファイル、bootstrap.min.jsを読み込むだけでいいのです!

まとめ・次回予告

第1回目は、Bootstrapのダウンロード方法・ダウンロード後のファイルについて紹介しました。
今回の記事で大切なのは、.minと付いているファイルは、読み込み速度が早い!ということです。
次回は、Bootstrapの読み込み方法について書いていきます!
実際に動かしてみましょう!!!

関連投稿

第6回目 Bootstrap headerを作成してみよう!

headerについて 第6回目からは、サイトのheaderを作成する方法についての紹介をしていきます。 サイトの1番上に表示されるheaderは、デザインも動きもしっかり作りこみたいですね! レスポンシブサイトのhea...

第5回目 Bootstrap .rowの入れ子!

前回の復習 前回は、offset push pullについての紹介をしました。 コンテンツの細かい配置に迷ったときにoffset push pullを使用すると全体のバランスがよくなります。 第5回目は、.rowの入れ子についての紹...

第8回目 Bootstrap footerを作成してみよう!

前回の復習 前回は、headerのレスポンシブ対応・固定する方法について紹介をしました。 第8回目は、footerを作成する方法について紹介をします。 こちらの記事は、初心者の方に向けての記事となっており...

第7回目 Bootstrap headerをレスポンシブ対応にしてみよう!

前回の復習 前回は、headerの基本となるサイト名とリンクを作成しました。 第7回目は、前回作成したheaderをレスポンシブ対応にする方法の紹介をします。 最後にheaderを固定する方法の紹介もします! こ...

第4回目 Bootstrap offset push pullを使ってみよう!

前回の復習 Bootstrapを使用してレスポンシブサイトを作成する場合は、第3回目で紹介したグリッドシステムの12と画面サイズのxs・sm・md・lgが重要になります。 第4回目は、.rowと.col-のoffset push pullに...