テキストと見出しの書式
テキストや見出しの書式は決められたクラス名で設定します。この辺のクラス名はBootstrapのページなどでクラス名と書式を確認しておくとよいでしょう。
bodyの設定
Bootstrapの基本設定は、フォントサイズが14px、テキストカラーは黒に近いグレー、行の高さは1.42857143倍です。
bodyのBootstrapのCSS設定
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
見出しの設定
| h1 | font-size: 36px |
|---|---|
| h2 | font-size: 30px |
| h3 | font-size: 24px |
| h4 | font-size: 18px |
| h5 | font-size: 14px |
| h6 | font-size: 12px |
見出しにはh1〜h6までそれぞれの要素にそれぞれスタイルが設定されています。そしてまた次の「見出し要素のBootstrapのCSS設定」のように、見出しの要素名と同じクラス名（.h1など）も用意されています。ある要素をh1〜h6に設定したデザインと同じにしたい場合にこのクラス名を使用します。
つまり、h1のフォントサイズをh3と同等のサイズにしたい場合はh1タグにclass=”h3″としてクラス属性を記述して思いどおりのサイズにします。
またセカンダリーテキストのスタイルがあります。見出しにsmall要素を使用するとセカンダリテキストとしてデザインされたスタイルになります。
見出し要素のBootstrapのCSS設定
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small {
font-weight: normal;
line-height: 1;
color: #777;
}
h1,.h1,h2,.h2,h3,.h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small {
font-size: 65%;
}
h4,.h4,h5,.h5,h6,.h6 {
margin-top: 10px;
margin-bottom: 10px;
}
h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small {
font-size: 75%;
}
h1,.h1 {
font-size: 36px;
}
h2,.h2 {
font-size: 30px;
}
h3,.h3 {
font-size: 24px;
}
h4,.h4 {
font-size: 18px;
}
h5,.h5 {
font-size: 14px;
}
h6,.h6 {
font-size: 12px;
}
セカンダリテキストの例
<h1>ブートストラップの例<small>セカンダリテキスト</small></h1>
行そろえ
- 左揃え text-left
- 中央揃え text-center
- 右揃え text-right
- 両端揃え text-justify
- 改行しないで配置 text-nowrap
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
文字色
文字色とクラス名は次のとおりです。
- .text-muted
- .text-primary
- a.text-primary:hover
- .text-success
- a.text-success:hover
- .text-info
- a.text-info:hover
- .text-warning
- a.text-warning:hover
- .text-danger
- a.text-danger:hover
.text-muted {
color: #777;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}
ジャンボトロン
ジャンボトロンは、Webサイトのタイトルなどに活用できる見出しです。
これはいわゆるビルボード的なものとして捉えたらよさそうです。
ジャンボトロンサンプル
ジャンボトロン領域はdivなどでマークアップしてクラス名をjumbotronとします。
<div class="jumbotron"> <h1>Sample</h1> <p>Bootstrapのsampleを紹介しています。</p> </div>
ジャンボトロンをdiv class=”container”で囲むとdiv class=”container”の幅内で角丸の四角形でグレーの背景色になります。
もし、div class=”container”で囲まないか、またはジャンボトロンでdiv class=”container”を囲むと画面幅いっぱいに広がります。
この使い分けでビルボード部分を画面横幅いっぱいに広げるか、あるいは全体のコンテンツ幅内に収めるか選択することができます。
ジャンボトロンには背景画像を設置することも可能です。
ジャンボトロンに背景画像を設定したサンプル
ページ専用のcssに追記
.jumbotron{
background:url(images/green.jpg);
background-size:cover;
}
ページヘッダ
h1やh2などにクラス名page-headerを適用すると見出しの下に薄いグレーの枠線が表示されます。
