CSS 入門

2005年12月21日
春日 悠

CSS とは

CSS とは、HTML 文書の外見を指定するスタイルシートの一種です。

CSS の書式

CSS はつぎのように書きます。 

    タグ名, タグ名, ... {
      プロパティ: 値;
      プロパティ: 値;
      ...
    }

たとえば、つぎのように書くと <h1>...</h1> の文字が赤くなります。 

h1 {
  color: "red"; /* 文字を赤くする */
}

/* ... */ はコメントを表し、無視されます。つぎのように書くと、指定した ID を持つタグにだけスタイルを指定できます。 

タグ名#ID {
  ...
}

たとえば、<h1 id="title">...</h1> にスタイルを指定するにはつぎのように書きます。 

h1#title {
  color: red;
}

値

色はつぎのように指定します。 

"red" (キーワード)
#9966ff (RGB の各値を 2 桁の 16 進数で指定)
rgb(100%, 50%, 0) (RGB の各値を割合で指定)

長さや大きさはつぎのように指定します。 

640px (ピクセル単位)
1.5em (フォントサイズを 1 とした単位)
5% (割合)

ファイルのパスはつぎのように指定します。 

url("background.jpg")

プロパティ

color 文字色

  • 値: 文字色
color: #9966ff;

background-color 背景色

  • 値: 背景色
background-color: rgb(100%, 50%, 0);

background-image 背景画像

  • 画像ファイルのパス 
background-image: url("background.jpg");

font-family フォントファミリー

  • 値: フォントファミリー名
    • serif 明朝系
    • sans-serif ゴシック系
    • cursive 筆記体・草書体系
    • monospace 等幅
font-family: sans-serif;

font-size フォントサイズ

  • 値: フォントサイズ (xx-small, x-small, small, medium, large, x-large, xx-large)
font-size: small;

font-weight フォントの太さ

  • 値: フォントの太さ (normal, bold)
font-weight: bold;

font-style フォントスタイル (斜体)

  • 値: フォントスタイル (normal, italic)
font-style: italic;

text-align 行揃え

  • 値: 行揃え
    • left 左寄せ
    • right 右寄せ
    • center 中央揃え
text-align: center;

line-height 行の高さ (行間の指定)

  • 値: 行の高さ
line-height: 1.5em;

letter-space 文字の間隔

  • 値: 文字の間隔
letter-space: 0.1em;

text-indent 段落の 1 行目のインデント

  • 値: インデントの長さ
text-index: 1em;

width 領域の幅

  • 値: 領域の幅
width: 320px;

height 領域の高さ

  • 値: 領域の高さ
height: 240px;

margin マージン

  • margin, margin-top, margin-bottom, margin-left, margin-right
  • 値: マージン, auto (自動設定)
margin-left: 3%;

padding パディング

  • padding, padding-top, padding-bottom, padding-right, padding-left
  • 値: パディングの幅
padding-left: 3%;

border-color 境界色

  • border-color, border-top-color, border-bottom-color, border-left-color, border-right-color
  • 値: 境界色
border-color green;

border-width 境界の太さ

  • border-width, border-top-width, border-bottom-width, border-left-width, border-right-color
  • 値: 境界の太さ
border-width 2px;

border-style 境界の形式

  • border-style, border-top-style, border-bottom-style, border-left-style, border-right-style
  • 値: 境界の形式
    • none 表示しない
    • solid 線
    • dashed 破線
    • dotted 点線
border-bottom-style: solid;

border 境界色・太さ・形式

  • border, border-top, border-bottom, border-left, border-right
  • 値: 境界色, 太さ, 形式
border-bottom: solid 3px #9999ff;

list-style-type リストの印の種類

  • 値: リストの印の種類
    • disc 塗りつぶされた円
    • circle 線で描かれた円
    • square 四角
list-style-type: square;

list-style-image リストの印画像

  • 値: 画像ファイルのパス
list-style-image: url("star.jpg");

border-collapse セルの境界の表示形式

  • 値: セルの境界の表示形式
    • collapse テーブル全体の境界とセルの境界を重ねて表示
    • separate テーブル全体の境界とセルの境界を分けて表示
border-collapse: collapse;

参考文献

  • 岡蔵龍一, 詳解 HTML & スタイルシート事典, 秀和システム, 2000