【入門】Bootstrapの書き方　〜背景色・スタイリング・サイズ変更〜

2019.11.12
2022.05.03
Bootstrap

みなさんこんにちはさくちゃんです。

本日は、前回の続きから行なっていきます。
今回学ぶ内容は、以下の３つです。

背景色の設定
文字のスタイリング
width、heightのサイズ指定

では、早速やっていきましょう。

1. 背景色の設定
2. 文字のスタイリング
- 2.1. 文字の配置
- 2.2. スタイルの変更
3. width、heightのサイズ指定
- 3.1. width
- 3.2. height

背景色の設定

背景色を変える時は「 class = “bg-primary” 」と指定してあげると変更できます。
「primary」は青色を指定するときに使用します。

その他の色を指定する際は、公式サイトを参照してください。

では実際にやっていきましょう。

前回使用した「Hello,world!」の背景色を変更してみます。
上の図のコードを指定すると、色が変更できるので、好きな色で試してみてください。

この時、別のコードも一緒に指定する時は、同じ「 ” ” 」の中に書いていきます。

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>


    <h1 class="text-primary bg-warning">Hello, world!</h1>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

下のように書いてしますと、反映されないので、注意してください。

<h1 class="text-primary" "bg-warning">Hello, world!</h1>

ではブラウザで確認してみましょう。

うまく反映されましたね。
では次に進みましょう！

文字のスタイリング

文字の配置

文字の配置は、

中央揃え　→　「text-center」
左揃え　→　「text-left」
右揃え　→　「text-right」

と書いていきます。
では実際に書いていきましょう。

「Hello,world!」は一旦削除して、<div>タグを3つ作成します。
作成した<div>タグそれぞれに、「text-center」「text-left」「text-right」と書いていきます。
わかりやすいように、先ほど勉強した背景色も指定してあげましょう。

<body>

<div class="text-center bg-primary">box1</div>

<div class="text-left bg-warning">box2</div>

<div class="text-right bg-info">box3</div>

</body>

うまく反映されましたね。
このように文字の配置を指定できます。

スタイルの変更

Bootstrapでは、文字のスタイルも変更できます。

公式サイトの「Documentation」→「Utilities」→「Text」を選択すると
下記のようないくつかのスタイルが出てきますので、こちらを参照して見てください。

width、heightのサイズ指定

width

要素のサイズの幅を変更するには「width」を使います。
書き方は「w-25」 と書いていきます。25はサイズを表しています。

　サイズは

「25％」　→　「w-25」
「50％」　→　「w-50」
「75％」　→　「w-75」
「100％」　→　「w-100」

と書いていきます。

height

要素のサイズの高さを変更するには「height」を使います。
書き方は「h-25」 と書いていきます。25は「width」と同じでサイズを表しています。

では、本日は以上になります。
また次回続きをしていきます。

オススメの教材

前の記事
【入門】Bootstrapの書き方　〜Bootstrapとは〜 2019.11.11
次の記事
【入門】Bootstrapの書き方　〜 padding・margin 〜 2019.11.15