CSS(スタイルシート)講座:各ブラウザの互換性を考慮したCSSを学びたい人にオススメ!
とりあえずCSSを書いてみよう。
このページでは、最小限のHTMLとCSSで実際にページを表示させるサンプルを紹介します。 では、早速サンプルをご覧下さい。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<link rel="stylesheet" type="text/css" href="sample.css">
<title>css sample</title>
</head>
<body>
<p>はじめてのCSS</p>
</body>
</html>
@charset "shift_jis";
p{
background-color:#0000FF;
color:#FFFFFF;
}
上記サンプルの実行結果はこちら。
HTMLソースの<link~部分の解説はCSSを外部ファイルとして読み込む方法は?をご覧下さい。
ではCSSソースの解説です。
まず1行めの@charset "shift_jis";は文字コードを指定しています。CSSファイル内に日本語を記述する場合は必須になります。
文字コードはHTMLの文字コードと合わせるのがベストです。また、@charsetは必ず先頭行に書く必要があります。
p{ ~ }はHTMLのP要素に対してスタイルを適用する記述です。background-color:#0000FF;は背景色に青(#0000FF)を、
color:#FFFFFF;は文字色を白に設定しています。文字色を指定するのはfont-colorではなくcolorなので注意が必要です。
