(cache)【HTML】Bootstrapの基本「マージン」と「パディング」 | 静岡県藤枝市のデザインスタジオ・エフ

bootstrap-responsive-site-design

『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサイト制作が可能です。

『Bootstrap』では、レイアウト、タイポグラフィ、フォーム、ボタン、ナビゲーションなどの基本デザインが揃っており、WEBサイト（ホームページ）を制作するための時間短縮にもつながります。

今回は『Bootstrap』の現行最新版（Bootstrap v4）で用意されている「マージン」と「パディング」についてご紹介します。

「マージン」と「パディング」の基本的な使い方

HTMLにて各要素のクラスに「m」や「p」と数字を組み合わせて指定することで、「マージン」と「パディング」を加えることができます。

『Bootstrap』では{property（プロパティ）}{sides（上下左右）}-{size（サイズ）}の組み合わせて記述することができます。

「マージン」か「パディング」かを設定するプロパティ

1/* HTML記述例 */
2<div class="m-5">クラスを指定するとマージンがつきます</div>
3<div class="p-5">クラスを指定するとパディングがつきます</div>

※{sides}を指定しない場合は「上下左右」に「マージン」と「パディング」が設定されます。

プロパティ	内容
m	margin（マージン）をセットします
p	padding（パディング）をセットします

「マージン」、「パディング」の「上下左右」を設定する

1/* HTML記述例 */
2<div class="mt-5">クラスを指定すると上のみにマージンがつきます</div>
3<div class="pb-5">クラスを指定すると下のみにパディングがつきます</div>
4<div class="ml-5">クラスを指定すると左のみにマージンがつきます</div>
5<div class="pr-5">クラスを指定すると右のみにパディングがつきます</div>
6<div class="mx-5">クラスを指定すると左右にマージンがつきます</div>
7<div class="py-5">クラスを指定すると上下にパディングがつきます</div>

上下左右の指定	内容
t	margin-top または padding-top をセットします
b	margin-bottom または padding-bottom をセットします
l	margin-left または padding-left をセットします
r	margin-right または padding-right をセットします
x	margin-left、margin-right または padding-left、padding-right をセットします
y	margin-top 、margin-bottom または padding-top 、padding-bottom をセットします

「マージン」、「パディング」の「サイズ」を設定する

『Bootstrap』の現行最新版（Bootstrap v4）では「マージン」、「パディング」のサイズは「rem」単位で指定がされています。

1/* HTML記述例 */
2<div class="m-0">クラスを指定するとサイズ「0」のマージンがつきます</div>
3<div class="p-1">クラスを指定するとサイズ「1」のパディングがつきます</div>
4<div class="m-2">クラスを指定するとサイズ「2」のマージンがつきます</div>
5<div class="p-3">クラスを指定するとサイズ「3」のパディングがつきます</div>
6<div class="m-4">クラスを指定するとサイズ「4」のマージンがつきます</div>
7<div class="p-5">クラスを指定するとサイズ「5」のパディングがつきます</div>
8<div class="m-auto">クラスを指定すると「auto」のマージンがつきます</div>

サイズの指定	内容
0	「マージン」または「パディング」のサイズを0に指定します
1	「マージン」または「パディング」のサイズを「要素の基本サイズ*0.25」に指定します
2	「マージン」または「パディング」のサイズを「要素の基本サイズ*0.5」に指定します
3	「マージン」または「パディング」のサイズを「要素の基本サイズ*1」に指定します
4	「マージン」または「パディング」のサイズを「要素の基本サイズ*1.5」に指定します
5	「マージン」または「パディング」のサイズを「要素の基本サイズ*3」に指定します
auto	「マージン」の場合のみ、サイズを「auto」に指定します