Bootstrap使って楽にレスポンシブしていこう

a0002_011891_m
一応コーディングもしてる人なんで、そういう関係の記事でアピールした方がいいかなって思ったんで書きます。
この記事ではBootstrapの導入方法を記述していきます。
Bootstrap、知らない人は大きく損してます。あなたも今日からレッツレスポンシブ!

レスポンシブって何?

Bootstrapを説明する前に。
PC・スマートフォン・タブレットといった、いろんなデバイスで見ても崩れないようにすること。基本的に、レスポンシブっていうのは2つの方法で対応することができます。

  • スマートフォン用サイト、PC用サイトといったように、それぞれに対応したサイトを別々に作っていき、Javascriptでユーザーのデバイスを判定し、対応したサイトにユーザーを移動させる方法。
  • HTMLは1つだけど、メディアクエリ使ったり、Bootstrapを導入することで崩れなくさせる方法。

手間暇考えないなら1番目の方が間違いなくいいです。はい。
しかし、実際別々のサイトを作るというのはコストがかかります。このご時世、コストはかけたくないですよね。だから多くのサイトがBootstrapなどを使っているわけです。

じゃあ、Bootstrapって何?

CSSのフレームワークです。すごくざっくり書くと、bootstrap.css(あとbootstrap-min.js)をダウンロードし、headタグに導入、特定のタグ(divとかtableとか)に特定のクラス(col-xs-12とかtable-responsiveとか)を書くと、レスポンシブデザインになったり、見た目がきれいになったりするというもの。実際便利。

導入まで

Bootstrapのサイトに行く

スクリーンショット-(37)http://getbootstrap.com/
まずBootstrapのサイトに行きます。download bootstrapのボタンを押してください。

Bootstrapをダウンロードする

Downloadの項目の一番左にある「download bootstrap」を押してください。
(押してすぐ閉じないでください。まだそのページを使います)
ダウンロードしたファイルの構造は、同ページを下にスクロールしたところにある「Precompiled Bootstrap」の項目に書いてあります。

index.htmlを作る

ダウンロードしたBootstrapのファイルを開くと、「cssファイル」「jsファイル」「fontファイル」があると思いますが、その階層でindex.htmlを作成してください。
index.htmlに書く内容は、先程ダウンロードする時に開いたページの「Basic template」にあるものをコピペしてください。
これで導入は完了です。bootstrapフォルダの名前を任意のものにして大丈夫です(中のcss、js、fontファイルの名前は変えないでください)
index.htmlを開くと「Hello, world!」とだけ書かれたページが表示されると思います。

最後に、ちょっとだけBootstrapを使ってみる

「Hello, world!」のh1タグの下にこれを書いてみてください。

 
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button> 
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

正しく実装されていれば、以下のようになります。
hello,button!
とくに自分からCSSを書いたりしていないのに、綺麗なボタンが表示されました。これがフレームワークです。もうbootstrap.cssの中に.btnにこういうスタイルを、btn-defaultにはこういうスタイルをっていうのが記述されているんです。
もちろんこういったボタンを無理に使わず、自分で作っても問題ありません。

Bootstrapには非常に便利な機能として、グリッドシステムがあるんですけど(というか、私がBootstrapを導入する理由の大半がこれとアイコン)、今回は導入までということで、また気が向いたら続き書きますね。
では。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。