【HTML】Bootstrapの基本「マージン」と「パディング」

bootstrap-responsive-site-design

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

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

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

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

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

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

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

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

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

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

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

/* HTML記述例 */
<div class="mt-5">クラスを指定すると上のみにマージンがつきます</div>
<div class="pb-5">クラスを指定すると下のみにパディングがつきます</div>
<div class="ml-5">クラスを指定すると左のみにマージンがつきます</div>
<div class="pr-5">クラスを指定すると右のみにパディングがつきます</div>
<div class="mx-5">クラスを指定すると左右にマージンがつきます</div>
<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」単位で指定がされています。

/* HTML記述例 */
<div class="m-0">クラスを指定するとサイズ「0」のマージンがつきます</div>
<div class="p-1">クラスを指定するとサイズ「1」のパディングがつきます</div>
<div class="m-2">クラスを指定するとサイズ「2」のマージンがつきます</div>
<div class="p-3">クラスを指定するとサイズ「3」のパディングがつきます</div>
<div class="m-4">クラスを指定するとサイズ「4」のマージンがつきます</div>
<div class="p-5">クラスを指定するとサイズ「5」のパディングがつきます</div>
<div class="m-auto">クラスを指定すると「auto」のマージンがつきます</div>
サイズの指定 内容
0 「マージン」または「パディング」のサイズを0に指定します
1 「マージン」または「パディング」のサイズを「要素の基本サイズ*0.25」に指定します
2 「マージン」または「パディング」のサイズを「要素の基本サイズ*0.5」に指定します
3 「マージン」または「パディング」のサイズを「要素の基本サイズ*1」に指定します
4 「マージン」または「パディング」のサイズを「要素の基本サイズ*1.5」に指定します
5 「マージン」または「パディング」のサイズを「要素の基本サイズ*3」に指定します
auto 「マージン」の場合のみ、サイズを「auto」に指定します

関連記事

【WP】モバイル端末用にテーマを切り替えるプラグインのまとめ

先日のGoogleのウェブマスター向け公式ブログ「検索結果をもっとモバイルフレンドリーに」の記事にもあったように、モバイル端末によるウェブサイトの利用がシェアを伸ばしてきていることでウェブサイトのモバイル端末への最適化も重要な課題になってきていると思われます。 今回は、...続きを読む

2015.03.20WordPress

美容室グランディール様紹介カード制作

富士宮市にある『美容室グランディール』様の紹介カードを制作いたしました。お店を紹介するショップカードとしての機能と、お客様が親族・ご友人の方などに紹介いただける紹介カードの2つの機能があるカードです。光沢をつけて高級感のあるデザインにいたしました。 クライア...続きを読む

2015.02.18名刺・カード制作美容室

富士山本宮浅間大社「桜」フォトギャラリー

富士宮にある富士山本宮浅間大社で桜を見てきました。ちょうど天気もよく青空に映えるキレイな桜を写真に撮ることもできました。 富士山本宮浅間大社は、富士山の龍脈の気が留まる龍穴(大地の気がみなぎる場所)のパワースポットとして開運神社として知られています。 主祭神には、神界...続きを読む

2015.04.09フォトギャラリー

【お名前.com】ドメインの申請が完了できなくなってしまった-解決方法-

WEBサイト(ホームページ)を新しく公開するときは、URLとなるドメインが必要になります。ドメインを取得するために、「お名前.com」のサービスを利用することが多いのですが、申込中にエラーが発生しました。 「お名前.com」で新しいドメインを申込した際に、『カートの内容が変...続きを読む

2018.07.23WEBサイト制作お名前.comドメイン

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」のプログラムの案内人をしました。 お気に入りの着物を着て、春の蓮華寺池公園界隈を散策しながら、人物撮影のテクニックを学ぶことができる写真の講座と街歩きを合わせたプログラムを...続きを読む

2019.05.05フォトギャラリー藤枝