TOPページ > リファレンス > CSS(スタイルシート)

CSS(スタイルシート)講座:各ブラウザの互換性を考慮した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なので注意が必要です。

CSS(スタイルシート)講座一覧へ