paddingで空間作成

ここでは、スタイルシートの「padding」のプロパティを使用して左側に余白を作る方法を解説します。

padding

前回、「marginを使用して左側に余白を開ける方法」を解説致しましたが、もう一つ「padding」というプロパティを使っても左側に余白を開ける事が出来ます。但し、「padding」と「margin」、この2つの余白の開け方は、全く効果(意味)が違ってくるので、両方とも覚えておきましょう。

早速、実例として見出し4のスタイルにpaddingを入れてみます。「padding」は、タグの外側に余白を指定出来る「margin」に対して、タグの内側に余白を設定出来るプロパティと言えます。スタイルシートは以下のようになります。

h4.samplecolor {
color: #FF0000;
text-decoration: underline;
font-size: 14px;
border: 1px solid blue;
padding: 0px 0px 0px 20px;
}

これは、前回の「margin」と同じで「複数の値をまとめて指定する方法」を使用しています。paddingの場合、4つ数値を並べると、「上・・・右・・・下・・・左」の順番で数値が適用されます。つまり、ここでは「上と右と下の空白は0ピクセル。つまり無しで左だけ20ピクセル」と指定しています。では、実際に動作を見てみましょう。

見出し4

あまり違いがわかりませんか?それでは、余白を全くしていない見出し4は以下ですので見比べてみてください。

見出し4

では次に、「margin」で左側に余白を指定した見出し4は以下ですので見比べてみてください。

見出し4

青い線で囲んでいるため、比較的わかりやすいと思いますが、「内側」と「外側」の違いがおわかり頂けましたでしょうか?これは、次の「背景画像の指定」の項目で大きく関係してきますので、しっかり覚えておきましょう。

次は「backgroundで背景に画像」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法
  5. HTMLのルール
  6. HTMLタグ一覧表
  7. スタイルシートとは
  8. スタイルシートの書き方
  9. 文字を赤、下線、14ピクセル
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成
  13. paddingで空間作成現在のページ
  14. backgroundで背景に画像
  15. font-familyで書式を変更
  16. font-weightで文字の太さ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?