合同会社アルティマシステム
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の読み込み方法について書いていきます!
実際に動かしてみましょう!!!

関連投稿

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

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

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

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

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

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

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

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

第3回目 Bootstrap グリッドシステム!

Bootstrapのコンポーネント 第3回目は、.container(.container-fluid) .row .col-について紹介をしていきます。 Bootstrapを使用する場合は、最初に.container .row .col-の仕組みを理解しておきましょう!...