Google検索エンジン

トップページ » スタイルシート入門講座 » CSSでパディング（padding）を指定する方法

CSSでパディング（padding）を指定する方法

  • ■パディング（padding）とは

    パディング（padding）とマージン（margin）は、セットで覚えるのがよいでしょう。 パディングは領域内のスペースで、マージンは領域間のスペースです。

    下の例だと「対象のブロック」という文字列から赤い枠線までの幅がパディング（padding）です。 赤い線から「Webページの表示」枠までの幅がマージン（margin）です。

    CSSファイル記述例 
    div#test-padding-margin{
	padding:20px;
	margin:10px;
	border:solid 2px red;
	background-color:yellow;
}
    HTMLファイル記述例
    <div id="test-padding-margin">対象のブロック</div>
    Webページの表示
    対象のブロック

    ■パディング（padding）に関するCSSプロパティ

    CSSプロパティ 意味
    padding：下記参照 パディングに関する全てを指定
    padding-top：n 上パディングを指定
    padding-right：n 右パディングを指定
    padding-bottom：n 下パディングを指定
    padding-left：n 左パディングを指定

    ■パディングに関する全てを指定

    paddingプロパティは、上下左右のパディングをまとめて指定する際に使用します。 上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。 なお、パディングに負の値を指定することはできません。

    値を1つ指定した場合： 指定した値が[上下左右]のパディングになります。
    値を2つ指定した場合： 記述した順に[上下][左右]のパディングになります。
    値を3つ指定した場合： 記述した順に[上][左右][下]のパディングになります。
    値を4つ指定した場合： 記述した順に[上][右][下][左]のパディングになります。

    paddingプロパティの指定値
    数値で指定 数値にpxをつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。
    CSSファイル記述例 
    div#test-padding{
	padding:20px 10px 40px 80px;
	border:solid 2px red;
	background-color:yellow;
}
    HTMLファイル記述例
    <div id="test-padding">パディングに関する全てを指定</div>
    Webページの表示
    パディングに関する全てを指定
スタイルシート入門講座
書籍の紹介
  • フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)
    フェイスブック 若き天才の野望
    発売：2011/01/13
    定価：1,890円
    著者：デビッド・カークパトリック
    出版：日経BP社
    内容：ユーザー数が5億人を超え、会社の時価総額が2兆円を超え、グーグルを驚かす存在となった、フェイスブック。同社を率いるマスコミ嫌いのCEO、マーク・ザッカーバーグからの信頼を勝ち得たベテラン記者が、徹底取材からフェイスブックの真実を初めて明かします。
  • Twitter×アメブロでビジネスを加速する方法
    Twitter×アメブロでビジネスを加速する方法
    発売：2010/12/09
    定価：1,554円
    著者：青山 華子
    出版：ソーテック社
    内容：ブランディングと人脈を構築する86の法則。twitterやFacebookなど、ソーシャルメディアの時間短縮と有効活用方法を徹底解説。
  • できるホームページ HTML&CSS入門 Windows 7/Vista/XP対応
    できるホームページ HTML&CSS入門
    発売：2010/12/24
    定価：1,659円
    著者：佐藤 和人
    出版：インプレスジャパン
    内容：オールカラーの大きな画面で操作手順がよく見える初心者向けの書籍です。HTMLタグやスタイルシートの入力手順を丁寧に解説してます。手順の横にヒントも掲載されており、関連知識も身に付きます。ホームページやHTMLの用語集も付属してます。
おすすめレンタルサーバー
  • ロリポップ！
    「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
  • ファイアバード
    50GBの大容量で、月額525円からのレンタルサーバーです。マルチドメイン、無料お試し期間、その他ユーザーツールなど便利な機能がたくさんあります。
  • さくらインターネット
    月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
  • １００ＧＢ無制限レンタルサーバー【Ｘ２】
    100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
  • ＷＡＤＡＸレンタルサーバー
    サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。
  • マルチドメイン対応、ビジネス仕様 高性能レンタルサーバー 【シックスコア】
    サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。