Bootstrap ~基礎編~

前回は、学習に必要な環境を準備しました。

今回は、Bootstrapの基礎を勉強しましょう。

Bootstrapとは

KOUKI
KOUKI

Bootstrapを学びましょう!

Bootstrapってそもそも何?使えて何が嬉しいの?

A子
A子

まずは、Bootstrapについて、簡単に説明します。

Bootstrapは、「CSSのフレームワーク」です。

従来、私たちがWebデザインを行う時、CSSによるフルスクラッチで実装してきましたが、Bootstrapは特殊なタグを使うことによって、デザインにおける実装を大幅に簡便化させたものになります。

説明は、以上です。

? 何言っているの??

A子
A子
KOUKI
KOUKI

説明がざっくりしすぎてますよね。しかし、「習うより慣れろ」です。手を動かして学んでいきましょう!

事前準備

テキストとカラー

KOUKI
KOUKI

最初は、テキストとカラーをみていきましょう!

Bootstrapを使うと、テキストとカラーがびっくりするほど簡単にデザインできます。

color
text

<出力結果>

Learning Bootstrap

Lorem ipsum, dolor sit amet.

Lorem ipsum, dolor sit amet.

Lorem ipsum, dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem a perferendis quis, aliquam enim at perspiciatis odio rem numquam nemo adipisci harum dolore magnam tempore? Qui blanditiis aut tenetur accusantium.

classに付いている「text-left text-uppercase font-weight-bold」などが、Bootstrapの特殊タグです。

続いて、文字列に色をつけてみます。

<出力結果>

Learning Bootstrap

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

text-〇〇と指定すると色のデザインができます。便利ですね^^

画面幅の切り替え(ブレイクポイント)

KOUKI
KOUKI

続いては、ブレイクポイントを学びます。

Bootstrapを導入するメリットは、レスポンシブル対応が、驚くほど簡単にできることです。

次に示すのは、画面幅の”単位“です。

単位:ピクセル
xs < 576 <= sm < 768 <= md < 992 <= lg < 1200 <= xl

このxsやxlは、ブラウザの画面幅を表していて、画面幅の拡大・縮小に伴った切り替え(ブレークポイント)を設置できます。

何言ってるのかわからないよ〜

A子
A子
KOUKI
KOUKI

そうですよね。具体例をお見せしましょう。

「text-sm-center」をh1タグに適用しました。画面を表示させてみましょう。

横幅が「740ピクセル」であるため、「sm」のブレークポイントの範囲内です。そのため「SAMPLE TEXT」の文字列が真ん中に表示されています。

この740ピクセルの横幅を縮小してみましょう。

560ピクセルにしたところ、SAMPLE TEXTが左寄せになりましたね。

これがブレークポイントです。

このブレークポイントは、複数指定も可能です。

ブレークポイントは、レスポンシブルデザインに必須な要素なので、覚えておきましょう^^

スペースとサイジング

KOUKI
KOUKI

次は、margin、padding、サイジングについて学びましょう!

ブロックレベルの要素には、margin, paddingの設定ができます。以下の図は、Chromeのデベロッパーツールから切り出してきたものです。

marginは、要素の外側の幅、paddingは要素の内側の幅を設定できます。

Bootstrapには、これらの要素を簡単に扱える機能も存在します。

Spacing

Where property is one of:
m – for classes that set margin
p – for classes that set padding
Where sides is one of:
t – for classes that set margin-top or padding-top
b – for classes that set margin-bottom or padding-bottom
l – for classes that set margin-left or padding-left
r – for classes that set margin-right or padding-right
x – for classes that set both *-left and *-right
y – for classes that set both *-top and *-bottom
blank – for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
0 – for classes that eliminate the margin or padding by setting it to 0
1 – (by default) for classes that set the margin or padding to $spacer * .25
2 – (by default) for classes that set the margin or padding to $spacer * .5
3 – (by default) for classes that set the margin or padding to $spacer
4 – (by default) for classes that set the margin or padding to $spacer * 1.5
5 – (by default) for classes that set the margin or padding to $spacer * 3
auto – for classes that set the margin to auto

Bootstrap公式サイトより

$spacer は、Bootstrapがデフォルトで用意している変数名です。通常は1rem(デフォルトは16ピクセル)です。

「1」 を指定すると 16 * 0.25 = 4ピクセルになります。

Learning Bootstrap

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

意味がわかると全然難しくないですね。

FloatとPosition

Bootstrapは、FloatとPositionのユーティリティも備えています。

Float
Position

まず、Floatですが、画面の要素の位置を制御できるものです。

Learning Bootstrap

FIRST

SECOND

この例では、親要素上に、FIRSTとSECONDの要素を左右に移動させました。

BootstrapにはCSSのclearと似た機能もありまして、親要素に「clearfix」をつけます。

Learning Bootstrap

FIRST

SECOND

このプロパティは、先に出てきたsm等のブレークポイントとも組み合わせることができるので、覚えておきましょう。

.float-left
.float-right
.float-none
.float-sm-left
.float-sm-right
.float-sm-none
.float-md-left
.float-md-right
.float-md-none
.float-lg-left
.float-lg-right
.float-lg-none
.float-xl-left
.float-xl-right
.float-xl-none

Bootstrap公式サイトより

positionも若干面白いです。

<div class="position-static">...</div>

<div class="position-relative">...</div>

<div class="position-absolute">...</div>

<div class="position-fixed">...</div>

<div class="position-sticky">...</div>

Bootstra公式サイトより

画面で確認してみると、先ほどのFIRST、SECONDがヘッダーみたいに画面上に固定化されています。

引用にも書きましたが、色々と種類があるので、試してみてください。

次回

次回は、レイアウト(CSS FlexboxとBootstrap Grid)を学びましょう。

コメントを残す