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

文字のスタイルと太さを変える

ドリル式ホームページの作り方TOP  >>  Lesson3〜CSSを使った装飾〜  >>  文字のスタイルと太さを変える

文字のスタイルと太さを変える

font-styleとfont-weight

文字のスタイルを変えるタグは、「font-style:○○;」で、○○には、デフォルトならnormal、斜体ならitalicが入ります。

この二つすら使うことが少ないので、二つだけ覚えるだけで十分です。

h1 {
font-style:italic;
}

文字の太さを変えるタグは、「font-weight:○○;」で、○○には、デフォルトならnormal、太字ならbold、細めならlighter、100〜900までの数値のいずれかで指定します。(例:normal=400、bold=700)。

h1 {
font-weight:normal;
}

サンプルの文字のスタイルを変える

これを使ってサンプルのaddressタグがイタリック体になっているのをノーマルに変えます。

@charset "shift_jis";
body {
background-color:#efe;
}
h2 {
font-size:16px;
color:#494;
}
h3 {
font-size:14px;
color:#f44;
}
dl {
background-color:#fff;
}
dt,dd {
font-size:13px;
}
ul {
font-size:14px;
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.