「増補改訂版Bootstrap4入門」スペーシング【Udemyで学習】
このレクチャーではBootstrap4の「スペーシング・ユーティリティ」について説明します。
Bootstrap4には、文字やブロック、ボタンなどのコンポーネントに対し、外側の余白であるマージンや、内側の余白であるパディングを指定する「スペーシング・ユーティリティ」が準備されています。
「スペーシング・ユーティリティ」のクラスは {property}{sides}-{size} という形式になっています。propertyには、m マージン（外余白）あるいは p パディング（内余白）が入ります。sidesにはマージンまたはパディングを設定する方向を指定します。なしだったら「4辺すべて」、tは「上辺（top）」bは「下辺（bottom）」lは「左辺（left）」rは「右辺（right）」xは「左辺と右辺」yは「上辺と下辺」です。size（サイズ）には0から5の数字が入ります。ルート要素（html要素）のフォントサイズの何倍かという、大きさの単位であるremで考えます。0は0rem、1は0.25rem、2は0.5rem、3は1rem、4は1.5rem、5は3remです。
具体的な設定例を紹介します。まずはml-数字です。mはマージン（外余白）、lは左left方向に余白の意味です。数字が大きくなるにしたがって左の外余白が大きくなっているのが、ご確認いただけると思います。次はp-数字です。pはパディング（内余白）どの方向の余白かのsidesの指定が無く、ハイフンと数字が指定しているので4辺に内余白が設定されます。数字が大きくなるにしたがって内余白が4辺とも大きくなっているのが、ご確認いただけると思います。
では、デモをご覧いただきます。
まずは、外余白です。数字による外余白の大きさの変化がブラウザで確認できます。わかりやすいようにh3タグにtext-lightとbg-primaryで文字色と背景色を設定しています。
次に、内余白です。数字による内余白の大きさの変化がブラウザで確認できます。
以上で「スペーシング・ユーティリティ」の説明を終わります。次のレクチャーでは、Bootstrap4の「タイポグラフィ」について説明します。
★★★ 続きはUdemyで ★★★
https://www.udemy.com/bootstrap4_for_developer_2
★★★ コース内でお逢いできることを楽しみにしています。 ★★★
