2022/10/15
CSSで要素の余白を設定する
WEBページをデザインするとき、各要素のマージンと余白をどのように調整するかが重要ですよね。
この記事で要素の余白とマージンを指定する方法を記載しました。
余白にはmarginとpaddingがあります。
どちらも要素のまわり余白を指定するものですが、以下のような違いがあります。
- border:ボーダーのスタイル・太さ・色
- padding:要素の内側の余白
- margin:要素の外側の余白
.main {
/* 種類
none ： 枠線なし
solid ： 実線
double ： 二重線
dotted ： 点線
*/
border: solid;
/* 幅 | 種類 */
border: 2px dotted;
/* 種類 | 色 */
border: outset #f33;
/* 幅 | 種類 | 色 */
border: medium dashed green;
/* 四辺すべてに適用 */
padding: 10px;
/* 上下 | 左右 */
padding: 10px 10px;
/* 上 | 左右 | 下 */
padding: 10px 10px 10px;
/* 上 | 右 | 下 | 左 */
padding: 10px 10px 10px 10px;
/* 上 | 右 | 下 | 左 */
margin: 10px 10px 10px 10px;
}
バッググランド色、文字色、フォントサイズ
テキスト色、バッググランド色、フォントサイズを指定するときのCSSの記述です。
- color : テキスト色を指定
- background : バッググランド色を指定
- font-size : フォントサイズを指定
.main {
color: #494949;/*文字色*/
background: #d8ecf5; /*背景色 */
font-size: 2rem;
}
サイズの単位
CSSでサイズを指定するときの単位（記述）です。
- px : ピクセル(pixel)の略で絶対値のサイズを指定する。
- em : 親要素に対しての倍率でサイズを指定する。
- rem : ルートのサイズを1とした倍率でサイズを指定する。
- % : 親要素に対しての％で倍率でサイズを指定する。
- vh : ビューポートの高さを100として、1～100間で%でサイズを指定する。
- vw : ビューポートの幅を100として、1～100間で%でサイズを指定する。
:root {
font-size: 10px;
}
.text {
font-size: 1.5rem; /* 10 * 1.5 = 15 px */
}
