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-top, margin-bottom, margin-left, margin-right マージン
  
    値: マージン, auto (自動設定)
    例: margin-left: 3%;
  
  padding, padding-top, padding-bottom, padding-right, padding-left パディング
  
    値: パディングの幅
    例: padding-left: 3%;
    
  border-color, border-top-color, border-bottom-color, border-left-color,
      border-right-color 境界色
  
    値: 境界色
    例: border-color green;
    
  border-width, border-top-width, border-bottom-width, border-left-width,
      border-right-color 境界の太さ
  
    値: 境界の太さ
    例: border-width 2px;
    
  border-style, border-top-style, border-bottom-style, border-left-style,
      border-right-style 境界の形式
    
    値: 境界の形式
      none 表示しない
      solid 線
      dashed 破線
      dotted 点線
    例: border-bottom-style: solid;
    
  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