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;
参考文献
| |
| PENGUINITIS Yuu Kasuga | |