WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

Bootstrap

Bootstrapとは

CSSフレームワーク
あらかじめある程度CSSが定義されていて、用意されているクラス名を付けるとスタイルが適用される。
h1やh2、blockquote、preなどの要素にもスタイルが指定されているので
クラス名を指定しなくてもスタイルが変わる事がある。
レスポンシブデザインやグリッドシステムに対応している。

デモはこちら

http://efu.sakura.ne.jp/web/bootstrap/


サイトからファイルをダウンロードする。
getbootstrap.com
CDNもある。

ファイルの中に新規htmlファイルを作成し、bootstrap.min.cssとbootstrap.min.jsを読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[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>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

独自のスタイルは元のファイルを書き換えるのではなく新しくスタイルを設定して上書きする。
(読み込んだスタイルより下に書く)

画像を円形にする

f:id:mmmmofu:20160822012918p:plain

<body>
  <header class="jumbotron text-center">
    <h1>img要素にimg-circleのクラス名を指定</h1>
    <p><img src="img/image.png" height="400" class="img-circle" width="400"></p>
  </header>
</body>

BootstrapのCSSで下記のように定義してある。

jumbotron・・・枠を作る

.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}

text-center・・・中央寄せ

>lcss|
.text-center {
text-align: center;
}
|

img-circle・・・角丸になる

.img-circle {
  border-radius: 50%;
}

グリッドシステム

f:id:mmmmofu:20160822013002p:plain
ページ全体を12分割で構成するグリッドシステムが用意されている。

クラス「col-xs-1」と設定すると1/12カラムになる

.col-xs-1 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1 {
  width: 8.33333333%;
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <!--[if t 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>
  <div class="container-fluid">
    <h1>Grid system(列幅の指定)</h1>
    <div class="row">
      <div class="col-xs-1" style="background:#CCC;height:250px">カラムA</div>
      <div class="col-xs-1" style="background:#999;height:250px">カラムB</div>
      <div class="col-xs-1" style="background:#CCC;height:250px">カラムC</div>
      <div class="col-xs-1" style="background:#999;height:250px">カラムD</div>
      <div class="col-xs-1" style="background:#CCC;height:250px">カラムE</div>
      <div class="col-xs-1" style="background:#999;height:250px">カラムF</div>
      <div class="col-xs-1" style="background:#CCC;height:250px">カラムG</div>
      <div class="col-xs-1" style="background:#999;height:250px">カラムH</div>
      <div class="col-xs-1" style="background:#CCC;height:250px">カラムI</div>
      <div class="col-xs-1" style="background:#999;height:250px">カラムJ</div>
      <div class="col-xs-1" style="background:#CCC;height:250px">カラムC</div>
      <div class="col-xs-1" style="background:#999;height:250px">カラムL</div>
    </div>
    <h1>Grid system(列幅の指定)</h1>
    <div class="row">
      <div class="col-xs-2" style="background:#CCC;height:250px">カラムA</div>
      <div class="col-xs-6" style="background:#999;height:250px">カラムB</div>
      <div class="col-xs-4" style="background:#CCC;height:250px">カラムC</div>
    </div>
    <div class="row">
      <h1>Grid system(列幅の指定)</h1>
      <div class="col-xs-3" style="background:#CCC;height:250px">カラムA</div>
      <div class="col-xs-3" style="background:#999;height:250px">カラムB</div>
      <div class="col-xs-3" style="background:#CCC;height:250px">カラムC</div>
      <div class="col-xs-3" style="background:#999;height:250px">カラムD</div>
    </div>
    <div class="row">
      <h1>Grid system(12列以下の設定)</h1>
      <div class="col-xs-5" style="background:#CCC;height:250px">カラムA</div>
      <div class="col-xs-4" style="background:#999;height:250px">カラムB</div>
    </div>
    <div class="row">
      <h1>Grid system(12列以上の設定)</h1>
      <div class="col-xs-6" style="background:#CCC;height:250px">カラムA</div>
      <div class="col-xs-4" style="background:#999;height:250px">カラムB</div>
      <div class="col-xs-5" style="background:#CCC;height:250px">カラムC</div>
      <div class="col-xs-3" style="background:#999;height:250px">カラムD</div>
    </div>
  </div>
</body>
</html>

12列以下だと右側があく。
12列以上だとカラム落ちする。

1行だけでもdivで囲む

<div class="row"></div>

クラス「row」は下記のように定義してある

.row {
  margin-right: -15px;
  margin-left: -15px;
}

ブラウザ全体から左右に15pxはみ出る

divクラス「container」または「container-fluid」で囲む
下記のように定義してある

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

左右に15px余白ができる

rowと一緒に使うとmarginが相殺され余白が無くなる。(スクロールバーが出ない)