【初心者向け】Bootstrapでまず覚えるべきことはこの2つ!

プログラミング

Bootstrapをこれから覚えたい!

と言う方に向けての記事です。

Bootstrapでは様々な事ができますが、最優先して覚えるべき2つの技術があります。それは、

  • グリッドシステム
  • 『マージン』と『パディング』

この2つです。この2つさえ覚えれば、デザインのテンプレートをかなり作れるようになりますね。

グリッドシステムについては以下の記事ですでに解説しています。

Bootstrap初心者がまず覚えるべきたった1つのこと。結論:グリッドシステム
前回記事でBootstrapの導入・使い方を説明しました。本記事では、Bootstrap学習でまず覚えるべき事レスポンシブデザイン画面確認この辺について触れていきます。Bootstrap学習...

グリッドシステムは、レスポンシブなWebデザインを作れる技術です。

今回は、『マージン』と『パディング』について触れていきます。

『マージン』と『パディング』とは

『マージン』と『パディング』ってなんだっけ、、?

2つとも『余白をつくる』ために使用します。
『間隔』と捉えてもいいですね!

2つは何が違うの??

マージンは外側の余白
パディングは内側の余白です。

良くわかんない!!目ん玉切り抜くよ??

怖い、、実例で見ていきましょう

Bootstrapで『マージン』と『パディング』を指定する

実際にBootstrapでマージン』と『パディング』を使っていきましょう

早く早くー!

まずは普通にHTMLとCSSを書きましょう。

<div style="background-color:black; height: 100px;">
        <div style="background-color:coral; height:50px; width: 50px;">人</div>
</div>

このソースはこんな感じで写ります。

ふむふむ、ここまでは普通のHTMLだね。

ここにまずは『パディング』を設定します!

<div class="pt-3" style="background-color:black; height: 100px;">
        <div  style="background-color:coral; height:50px; width: 50px;">人</div>
      </div>

外側のクラスに”pt-3″を指定しています。すると、

パディングは内側に余白を作ります。
上があきましたね。”pt-3″は。pがパディング、tがトップ、3がどのくらいあけるかを示しています。

『パディング』と『上下左右どこをあけるか』と『どのくらいあけるか』
この3つを指定しているんだね!

次にmarginを指定しましょう

<div class="pt-3 ml-5" style="background-color:black; height: 100px;">
        <div  style="background-color:coral; height:50px; width: 50px;">人</div>
      </div>

“ml-5″を追加指定しています。
先ほどの表を見ると、
『マージン』を左に5追加している事がわかります

こんな感じ!マージンは外側に余白ができます

グリッドシステムと余白を使いこなそう

今回は『マージン』と『パディング』の使い方を紹介してきました。

前回紹介したグリッドシステムと合わせると、

好きな場所に配置することが容易にできるのではないでしょうか?

次回は、さらにBootstrapを便利に使いこなす技をご紹介します。ではっ!

   

コメント