Bootstrap余白を作ろう

Published on: 2022年10月31日
Category: Bootstrap
Tags: css,margin,padding,レスポンシブ,余白
Author: SAKUWEB by Liruu Design

書籍でもチラシでも同じですが、要素が詰め詰めだと読みにくいですよね。

ユーザにとってのストレス。

なので、可読性をあげるために適度に余白を設ける必要があります。

この余白の指定もBootstrap側で用意されているので、学んでいきましょう！

*-*-* Chapter07 *-*-*

要素に余白を作ろう

Youtubeで動画解説しています。

このブログをベースに、解説動画を作りましたので、併せてご覧ください。

チャンネル登録、宜しくお願いします。

Youtubeチャンネル → @sakuweb

【初心者入門】Bootstrapを使ってサイト作り　余白の作り方編

余白の指定には、2種類ある

要素に余白を設けるには、「padding(パディング)」か「margin(マージン)」か、その両方を利用します。

この2つは、HTMLタグではなく、CSSプロパティです。

この2つの役割を簡単に言うと、

paddingは、要素の内側に余白を設ける

marginは、要素の外側に余白を設ける

以下、コードで見ていきましょう。

Execute codeボタン(Playマークのボタン)を押すと、簡易的な結果が表示されます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
  <div class="container">
    <div class="row">
      
<!-- 1番目の要素 -->      
      <div class="col">
        <h2 class="p-5 bg-success">パディング：内側に余白</h2>       
      </div>
      
<!-- 2番目の要素 -->       
      <div class="col">
        <h2 class="m-5 bg-warning">マージン：外側に余白</h2>
      </div>
      
    </div>
  </div>
</body>

1番目のh2タグにはpaddingを、

2番目のh2タグにはmarginを入れています。

分かりやすいように背景に色を入れました。

同じ余白でも、要素内か要素外かで全く違う結果になりましたね。

余白を設置しよう

indexファイルを開いて、クラス名「col-sm」の箇所に、「p-4」を追加しましょう。

追加する際に注意して欲しいのが、「col-sm」と「p-4」の間に「半角スペース」を入れること。

クラス名は複数設置が可能ですが、設定する際は、必ず半角スペースを入れます。

半角スペースを入れないと、「col-smp-4」これがひとつのクラス名と判断されてしまい、動きません。

以下のように、「col-sm p-4」としてくださいね。

			<div class="col-sm p-4">
                  <img src="img/catbed.png" class="w-100" alt="ねこのベッド">
                  <h2>ふかふか！ねこのベッド</h2>
                  <p>抗菌作用のある生地で、ふかふかのベッドを作りました！洗濯もできるので、いつでも清潔です！</p>
              </div>
              <div class="col-sm p-4">
                  <img src="img/cattoy.png" class="w-100" alt="ねこのおもちゃ">
                  <h2>ストレス解消！ねこのおもちゃ</h2>
                  <p>またたびを練り込んだおもちゃで、ネコちゃんのストレスを解消できます！夜の運動会対策にも効果的です！</p>
              </div>
              <div class="col-sm p-4">
                  <img src="img/cattower.png" class="w-100" alt="キャットタワー">
                  <h2>安心できる場所！キャットタワー</h2>
                  <p>高いところが好きなねこちゃんのため、高さや位置を調節できるタワーを作りました！</p>
              </div>

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

指定した要素の内側（padding）に、余白はいりましたね。

では、新たに追加したクラス名「p-4」。

どんな仕組みなのか、見ていきましょう。