とっても簡単!レスポンシブウェブデザインとBootstrap3導入

img_bootstrap

レスポンシブウェブデザインという言葉を聞いたことがあるかと思います。レスポンシブウェブデザインとはざっくりいうと
「CSSで調整してPCでもスマホでも同じhtmlで表示させちゃいましょう。」
という仕組みです。つまり一般的にはPC用とスマホ用を別htmlとして作ってしまうケースもあるのですが、レスポンシブウェブデザインは同じhtmlを使用してページの遷移やリダイレクトをせずにPCにもスマホにも最適なページを表示させようというものです。
このページもレスポンシブウェブデザインなので、試しにブラウザのサイズを変えてみてください。デザインの配置が変わりましたか?
次にBootstrap3についてですが、そもそもBootstrapとは元はTwitterが開発したCSSフレームワーク(機能群のようなもの)です。それが現在進化してBootStrap3となっているのです。
このBootstrap3を使用すると非常に!簡単に!レスポンシブウェブデザインを実現することが可能なのです。非常に!簡単です!!
私がBootstrap3を導入しようと思って色々調べてみた時に、どこのサイトも非常に難しくかかれていたので、今回は誰でも簡単に導入する方法を書いていきたいと思います。
ではさっそくBootstrap3を導入してみましょう。

スポンサーリンク

だれでも簡単にBootstrap3を導入

導入は本当に簡単、3ステップです。

1.Bootstrap3をダウンロード

下記URLにてBootstrap3(2015/8/18現在 bootstrap-3.3.5-dist.zip)がダウンロードできます。
http://getbootstrap.com/

img_bootstrap_01

2.ダウンロードしたzipファイルを解凍、ファイル設置

下記の必要なファイルのみを抜き出して設置します。
cssフォルダ>bootstrap.min.css
jsフォルダ>bootstrap.min.js
fontsフォルダ>フォルダごと全部

3.使用側のhtmlのベースを作る

まずは練習として下記ソースをそのままコピーでOKです。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

たったこれだけで使えちゃいます。当初Bootstrapを導入しようとした時には非常にややこしく見えたのですが、こうやってみるととっても簡単!という事でまずは一度使ってみてください。

まとめ

Bootstrapを調べ始めた時にLessやらコンパイルやらエンジニア臭い単語がたくさん出てきて面倒になって一旦逃げたのですが、よくよく調べてみるとBootstrap自体をカスタマイズしたい時にはLessファイルからのコンパイルが必要になりますが、普通に使用する分にはそんなのは必要ないとの事でした。なので小難しい事がわからない人でも安心して使えるようになっています。htmlとcssの知識があれば、処理速度的にはすこしよくないのかもしれませんがcssを上書きして色々なデザインにカスタマイズすることも可能です、私もそうしてます。なのでまずは触ってみましょう!

最近肩こりが非常に辛いので良いアイテムがないかと探していたらこんなのを発見!
スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>