Bootstrapを使う
少し前はHTMLの次に覚えるのはCSSでしたが、ホームページを作るのなら最近では先にBootstrapを覚えるのがいいんじゃないかと、個人的に思っています。
特に初心者がBootstrapを使ったほうがいい理由
自分でCSSを使って装飾しようと思うと、それなりにできるようになるまでには結構時間がかかります。 また見た目をきれいにしようと思うと、デザイン・レイアウトについても多少学ぶ必要があります。 しかしBootstrapは装飾をセットで提供してくれているので、短時間できれいに見えるようになります。
また最近はPCとスマートフォン等モバイルからの割合は半々ぐらいになってきており、モバイル対応は重要です。
しかし、自力でしようと思うと非常にめんどくさいため、Bootstrapのようなフレームワークを使うのが一般的です。
そもそもBootstrapとは
Twitterが公開しているCSS+JavaScriptのテンプレートです。
デザイン・レイアウトが苦手な人でも、すぐにそれらしくページを装飾することができます。
ライセンスは使いやすいMITライセンスです。
Bootstrapのデメリット
- 使っているサイトが多いので、カスタマイズをしないと似たり寄ったりな見た目になる
- 設定されている項目が多いので、何に適用されているか把握仕切れていないことがある
基本的な使い方
<head>内に下のコードを貼り付けます。
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Bootstrapが提供している機能に合わせて、<div class=' '>のようにクラス名をつけます。
グリッドレイアウトを使ってみる
Bootstrapのうち、特に重要な機能の一つがグリッドレイアウトです。
これは何かというと画面を縦に12分割してそれに合わせてレイアウトすることで、レイアウトしやすくさらに整って見えるようになります。またモバイル端末向けに画面の幅に合わせて簡単にレイアウトが変わるようにもできます。
レイアウトしてみる
まず画面を1/2、1/4、1/4に分けてレイアウトします。
分割したい部分は<div class='row'>で囲みます。
col-sm-の数字はX/12の幅という意味です。
smはモバイル端末ならレイアウトを変えるという指定です。
サンプルコード
<div class='row'>
<div class='col-sm-6'>
col-sm-6
</div>
<div class='col-sm-3'>
col-sm-3
</div>
<div class='col-sm-3 '>
col-sm-3
</div>
</div>
col-sm-6部分
col-sm-3部分
col-sm-3部分
他によく使うもの
<div class='container'> 左右に適当な余白ができる
<div class='text-center'> 中央寄せになる
<img class='responsive'> 画像のサイズが大きすぎる場合、自動で縮小してくれる
<img class='thumnail'> サムネイル風に表示される
