ドリル式ホームページの作り方

間隔と枠線を指定する

ドリル式ホームページの作り方TOP  >>  Lesson3〜CSSを使った装飾〜  >>  間隔と枠線を指定する

間隔と枠線を指定する

borderを理解する

要素と要素の間隔を調整してサイトのバランスを整えるタグに、margin(マージン)とpadding(パディング)、文字の下にラインを引いたり、文字を四角で囲んだりするタグに、border(ボーダー)があります。

この3つはまとめて覚えるとわかりやすいと思いますが、理解力のない人(管理人がそうでしたが・・・)には、いまいちわかるまでに時間がかかるかも知れません。

まずは図で概要をつかみましょう。

margin,padding,border

まず最初にborderを覚えるとよいかもしれません。borderは指定したタグの周りに線を引くことができます。

h1 {
border:solid 1px #000; */ h1タグの周りに、1pxの黒色の実線 */
border:dotted 1px #000; */ h1タグの周りに、1pxの黒色の点線 */
border:double 3px #000; */ h1タグの周りに、3pxの黒色の二重線 */
}

また、枠線だけでなく、下線だけ、上線だけを引くことも可能です。その場合は、「border-○○○」というように、○○○にtop,right,left,bottomを入れて指定します。

h1 {
border-top:solid 1px #000; */ h1タグの上に、1pxの黒色の実線 */
border-bottom:solid 1px #000; */ h1タグの下に、1pxの黒色の実線 */
border-right:solid 1px #000; */ h1タグの右に、1pxの黒色の実線 */
border-left:solid 1px #000; */ h1タグの左に、1pxの黒色の実線 */
}

もちろん、4行全て記述すれば枠線を描くことになります。

margin,paddingを理解する

marginとpaddingは、このborder線を基準に、文字とborderの間の余白をpaddingborderより外の余白をmarginとしています。

この二つの余白の違いが明確にわかるのが、背景色を指定する場合です。

背景色はborderよりも内側領域に指定されますので、paddingで余白を拡大すれば背景色も広がります。marginで余白を拡大すると文字や画像の間隔が広がります。

p {
padding:20px; */ borderの内側上下左右に20pxの余白 */
}

p {
margin:20px; */ borderの外側上下左右に20pxの余白 */
}

marginとpadding

また、marginとpaddingは上下左右を一度に指定することが可能です。

p {
margin:1px 2px; */ 上下に1px、左右に2pxの余白 */
margin:1px 2px 3px 4px; */ 上に1px、右に2px、下に3px、左に4pxの余白 */
}

4方向全て指定するパターンは、上、右、下、左という風に時計回りに記述します。慣れるまではとっつきづらいとおもいますが、なれると便利です。

サンプルにmargin,padding,borderを指定する

"* {"はユニバーサルセレクタと呼ばれ、全ての要素に対してスタイルが反映されます。

最初にこのユニバーサルセレクタを使ってmargin、border、paddingを指定するのは、h1やpなどの要素はデフォルトで規定の余白があるため、それらを全てなくすためです。

実際これは管理人が全ての余白がゼロの状態から始めたいという個人的な都合によるもので、別に無理に全ての余白を0にしなくてもよいです。

@charset "shift_jis";

* {
margin:0;
border:0;
padding:0;
}

body {
background-color:#efe;
}
h1,h2,h3,p,ul,address,hr,dl {
margin:10px 0 0 10px;
width:610px;
}
h2 {
font-size:16px;
width:400px;
color:#494;
border-left:solid 10px #494;
border-bottom:dotted 1px #494;
padding-left:5px;

}
h3 {
font-size:14px;
color:#f44;
}
dl {
background-color:#fff;
margin-left:30px;
width:400px;
}
dt,dd {
font-size:13px;
line-height:20px;
}
dt {
width:80px;
}
dd {
margin-left:80px;
margin-top:-20px;
}

ul {
margin-left:30px;
font-size:14px;
line-height:20px;
color:#555;
}
a {
padding:0 10px;
}
address {
font-style:normal;
padding:2px 0 5px 5px;
border-top:double 3px #494;

}

もうひとつ解説が必要になると思われる部分は、"dd"に指定しているマイナスマージン(ネガティブマージン)と"dt,dd"に新たに指定したline-heightでしょうか。

これは、dtとddが縦に並んでいるのを、横に並べるテクニックです。

dtの幅の分だけddの左ネガティブマージンを取り、dtの文字の高さ分だけddの上ネガティブマージンを取ることで、dtとddを横並びにします。

dt,dd {
font-size:13px;
line-height:20px;
}
dt {
width:80px;
}
dd {
margin-left:80px;
margin-top:-20px;
}

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


Lesson3〜CSSを使った装飾〜

  1. htmlの骨格を作成する
  2. CSS(スタイルシート)の組込み方法
  3. CSSの基本構造
  4. @規則の指定
  5. 文字の大きさを変える
  6. 文字・背景の色を変える
  7. 文字のスタイルと太さを変える
  8. 幅と高さを変える
  9. 間隔と枠線を指定する
  10. カーソルを当てたときのリンクの色

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.