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 */
}

プロフィール

管理者 HONDA

福島県出身

ITで商売を効率化したいが、ITが苦手、分からない方是非ご相談ください。50過ぎの「おっさん」です。そのほうが話しやすい方はお勧めします。

カテゴリ

美容

ファッション

お酒


西暦和暦干支年齢対応表


設定

時計表示

都道府県

ブックマーク1

ブックマーク2

ブックマーク3

プライバシーポリシー

はじめに

HONDA WORK SHOPでは、ご利用のユーザ様個人情報の取り扱いに細心の注意を払っております。

また当サイトではアフィリエイトプログラムを利用しております。

第三者配信事業者(Amazonアソシエイト、楽天アフィリエイト、A8.net)がCookie を使用して、サイト利用者が当サイトや他のサイトに過去にアクセスした際の情報に基づいて広告を配信します。

Google が広告 Cookie を使用することにより、サイト利用者が当サイトや他のサイトにアクセスした際の情報に基づいて、Google やそのパートナーは適切な広告をサイト利用者に対して表示します。

広告設定でパーソナライズ広告を無効にすることができます。

Cookieの利用について

Cookieは、当サイトや他サイトへのアクセスに関する情報が含まれており、多くのサイトで利用者に有益な機能を提供する目的で使用されています。

Cookieには、サイト利用者の個人情報(氏名、住所、メールアドレス、電話番号)は一切含まれません。

アクセス解析ツールについて

当サイトでは、アクセス解析ツール「Google Analytics」を利用しています。

「Google Analytics」はトラフィックデータの収集のためにCookieを使用しています。

このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することができますので、ご利用のブラウザ設定をご確認のうえ、拒否設定を行ってください。

本ポリシーの変更

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。