スタイルシートの記述場所は3箇所あり、一つはHTMLソースの<head>~</head>内、
二つ目は<body>~</body>内、三つ目は外部ファイルに記述します。
外部ファイルでCSSを記述する方法が複数のページの文字色や
レイアウトを変えるのが一変にできてしまうのでこの方法が
一番効率よくHPを更新できます。
HTML文書にスタイルシートの記述がある場合、スタイルシート言語で記述されていることを
宣言するために<head>~</head>内に
<meta http-equiv="Content-Style-Type" content="text/css">
のメタタグを記述しておきましょう。
■ <head>~</head>内に記述する場合
<style type="text/css">~</style>内に
スタイルシートを記述します。
<!- - ~ - ->はスタイルシート
に対応していないブラウザの為に記述します。
HTMLソース
<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
p{color:blue;}
-->
</style>
</HEAD>
<BODY>
<p>ホームページ</p>
</BODY>
</HTML>
■ <body>~</body>内に記述する場合
本文に直接CSSを記述します。HTMLタグに直接style属性を指定してHTML形式で記述する方法です。
HTMLソース
<HTML>
<HEAD>
<TITLE>SAMPLE</TITLE>
<meta http-equiv="Content-Style-Type" content="text/css">
</HEAD>
<BODY>
<p style="color:green;">文字</p>
</BODY>
</HTML>
■ 外部ファイルに記述する場合
スタート→プログラム→アクセサリ→メモ帳
の順でメモ帳を起動し下の例のようなスタイルシートだけを
記述します。
外部ファイルに記述する場合は
<style type="text/css">~</style>
の記述は省略できます。
メモ帳のファイル名はabcd.cssという風に小文字の半角英数字にして拡張子は
.cssとします。
外部ファイルのスタイルシートをHTML文書に読み込むには
HTMLソースの<head>~</head>内に
<link rel="stylesheet" href="style.css" type="text/css">
を記述します。
外部ファイルで記述したスタイルシートによりHTMLソースの
<body>~</body>内にある
<p>~</p>で囲まれた文字は全て赤色になります。
外部ファイル
p{color:red;}
HTMLソース
<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
<link rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>
<p>ここの文字は赤色</p>
<p>ここの文字は赤色</p>
</BODY>
</HTML>
■ その他の項目
・
スタイルシートの記述方法
・
個別にCSSを指定する
・
複数のセレクタで指定
・
@importでCSSファイルを読み込む
・
外部ファイルのコメント
スタイルシート一覧のページに行く
|