デザインに便利な「Twitter Bootstrap」というものを使ってみました。

Bootstrap

Bootstrap

最近知ったのですが、

Twitter Bootstrapという

CSSのフレームワークというものを使ってみました。

これは便利です。

スポンサードリンク

Twitter Bootstrapとは

Twitter Bootstrapは、そのままの通り、ツイッターを作っている米ツイッター社が

無償で提供しているCSSのフレームワークです。

見た目のデザインを簡単に調整してくれる

便利なツールです。

簡単に設置可能なツール

Twiiter Bootstrapは簡単に設置できます。

1.Bootstrapをダウンロード

まず、Twitter Bootstrapのサイトへ行きダウンロードします。

bootstrap_DL

bootstrap_DL

赤字の部分からダウンロードします。

圧縮ファイルを解凍すると「css」、「img」、「js」の3つのフォルダがあります。

「css」フォルダの中には

・bootstrap.css
・bootstrap.min.css
・bootstrap-responsive.css
・bootstrap-responsive.min.css

以上の4種類のファイルがあります。

このうち名前に「.min」が付いているものは

付いていないものの圧縮版です。

中身をしっかり見たいとか、付け加えたいという場合は

「.min」が付いていないものを使って下さい。

読み込みを早くしたいとかの場合は「.min」の付いているものを使って下さい。

また、「responsive」というのは

レスポンシブWebデザインとして使いたい場合に使用するものです。

「img」フォルダにはBootstrapで使うアイコンの画像があります。

「js」には

・bootstrap.js
・bootstrap.min.js

の2種類入っていますが、こちらもCSSのものと同じ

圧縮してあるものと、そうでないものです。

お好みでいいと思います。

僕はCSSもJSも圧縮しているものを使っています。

付け加えたかったっら、

別でファイル作ればいい話なので。

自分のWEBサイトに設置

設置の仕方は簡単です。

HTMLファイルのhead内に読み込むだけです。

そんだけ!

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

上記のように読み込ませます。

jsファイルをbodyタグを閉じる直前に書いてあるのは

外部JSファイルはbodyタグの閉じる直前に書いた方が

読み込みで早くなるという話です。

普通であればこれで問題ないのですが、

Ajax使うときはhead内に書いてあった方が便利なので

僕はhead内に書いています。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

以上のように書いています。

あとは、Twitter Bootstrapの公式サイトにあるように

クラス名を指定していったり、

マニュアルのようにタグを組んでいったりするだけです。

注意

CSSファイルやJSファイルは自分の環境に合わせれば問題ないと思いますが、

imgフォルダだけはcssフォルダと同じ階層に入れてください。

CSSで画像の指定がされているため

どうしても場所を変えるならば

CSSのパスを変更しないといけません。

使ってみた感想

今使っている感想としては、とても便利です。

タブの作成や、レイアウトの仕方、

何よりボタンの作成が簡単にできるのがとても重宝します。

aタグでのボタンとinputタグでのボタンのデザインを簡単に統一できるのが

僕にとってすごくありがたいことです。

調整とかにすごく時間をかけてしまうので

苦手なんですよね~。

Twitter Bootstrapを使うとデザインが

他のTwitter Bootstrapを使っているサイトと

かぶってしまうことがありますが、

そんなに気にすることでもないのでしょうか?

色とかならCSSで上書きして調整できるし、

何よりも開発でデザインの時間を大幅に減らせます。

僕はデザイナーでないので

どうしてもデザインに時間がかかってしまいますし

できたとしても、自分なりに満足できるものが

なかなかできないものでしたので

このTwitter Bootstrapはとてもありがたいものです。

これから、サイト作成などあったら

Twitter Bootstrapを利用しようと思います。

使い方などはこちらでも紹介されてますよ。
Twitter Bootstrapの使い方

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ