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

幅と高さを変える

ドリル式ホームページの作り方TOP  >>  Lesson3〜CSSを使った装飾〜  >>  幅と高さを変える

幅と高さを変える

width、height、line-height

幅の指定は、「width:○○px;」、高さの指定は「height:○○px;」で、○○には数値が入ります。

h1 {
width:400px; /* 幅400px */
height:30px; /* 高さ30px */
}

line-heightは高さは高さでも、”文字の高さ”である点でheightとは区別されます。

「line-height:○○px;」で文字の高さを指定しますが、文字の大きさが16pxの時、line-heightを14pxなど、文字の大きさよりも小さく指定した場合は文字が一部かけて表示されてしまいます。

主な用途は、文が改行されるときに、1行目と2行目の文の間隔を調整するときに使われます。

heightで高さを指定すると高さの中央配置されないので、これはよく使われます。

h1 {
line-height:20px; /* 文字幅が20px */
}

サンプルの幅と高さを設定する

まず、文章の幅がバラバラなので、サンプルの全体幅を、境界線画像の610pxにあわせます。h1,h2・・dlに一度に610pxを指定します。

続いて文の間隔を広げるため、ulに対してline-height:20px;を指定します。

@charset "shift_jis";
body {
background-color:#efe;
}
h1,h2,h3,p,ul,address,hr,dl {
width:610px;
}
h2 {
font-size:16px;
width:400px;
color:#494;
}
h3 {
font-size:14px;
color:#f44;
}
dl {
background-color:#fff;
width:400px;
}
dt,dd {
font-size:13px;
}
dt {
width:80px;
}
ul {
font-size:14px;
line-height:20px;
color:#555;
}
address {
font-style:normal;
}

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


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.