HTML 入門

スタイルシートでデザインを作ろう

padding を設定する

次は padding（パディング：詰め物）について理解するためのコードを確認しましょう．まず，html ファイルに次の通り5個の <div> を設置し，それぞれに .box クラスと，.box1 から .box5 までのクラスを配置します． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

index.html（抜粋）コピー
<div class="box box1">あいうえおあいうえおあいうえおあいうえお .box1 1 1 1 1 1 1 1 1 1 1</div><hr>
<div class="box box2">あいうえおあいうえおあいうえおあいうえお .box2 2 2 2 2 2 2 2 2 2 2</div><hr>
<div class="box box3">あいうえおあいうえおあいうえおあいうえお .box3 3 3 3 3 3 3 3 3 3 3</div><hr>
<div class="box box4">あいうえおあいうえおあいうえおあいうえお .box4 4 4 4 4 4 4 4 4 4 4</div><hr>
<div class="box box5">あいうえおあいうえおあいうえおあいうえお .box5 5 5 5 5 5 5 5 5 5 5</div><hr>

前のページでは各クラスに幅や高さなど同じプロパティを繰り返して指定しましたが，共通する部分を抜き出して指定すると良いでしょう．共通部分は .box クラスにまとめて指定します．これによりすべての .box クラスを持つ要素のスタイルが設定されました．また前のページで説明した box-sizing プロパティも設定していることに注意してください．

style.css（抜粋）コピー
@charset "utf-8";

.box {
  border: 1px solid #a0a0a0;
  width: 160px;
  background-color: #f0f0f0;
  box-sizing: border-box;
}

.box1 はとくにスタイルを設定していません．このとき，ボーダのすぐ近くに文字列が配置され，窮屈な印象を与えます．なお文字列は左に揃えて配置している関係で右側の空白は環境によって異なる可能性があります．

.box2 上下左右に 8px のパディングを設定します．その結果少しゆったりしたイメージになりました．

style.css（抜粋）コピー
.box2 {
  padding: 8px;
}

4つの値を指定することもできます．この場合は上側を始点とした時計回りに，右，下，左の順で指定することになります．なお，0px の値を与える場合には単位 px を書かずに 0 とだけ書くことが推奨されます．

style.css（抜粋）コピー
.box3 {
  padding: 0 8px 12px 36px;
}

2個の値を与えると上下と左右のパディングを指定することを意味します．

style.css（抜粋）コピー
.box4 {
  padding: 0 16px;
}

次のように，上下左右それぞれのプロパティを使って個別にパディングを設定することも可能です．

style.css（抜粋）コピー
.box5 {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
}

.box5 のあたりを選択して「DevTools」を表示します．box-sizing プロパティに border-box を設定し，幅を 160 ピクセルに設定しました．その結果，ボーダ部分までを含む領域が指定した幅と高さに設定され，ボーダの太さとパディングを除いた 126 (=160-1-16-16-1) ピクセルがコンテンツ領域の幅として確保されていることが確認できます．

目次に戻る