■ CSSコードの書き方
１． CSSコードの記入位置
CSSコードを書く場所は、次の三種類があります。
１．HTMLファイルの <body>〜</body> に直接記入する方法。
２．HTMLファイルの <head>〜</head> 内に id 又は、class を使って記入し、<body>〜</body> 内でリンクする方法。
３．CSSコードを別ファイルに記入して、<body>〜</body> 内でCSSファイルにリンクする方法。
"１．"の方法は、どう考えても初心者的で、ダサいやり方でスタイルシートを使う意味がないように思います。
ここでは、"２．"又は、"３．"の方法を使うことを念頭に解説します。
CSSコードの記述方法は、ウェブページの製作者それぞれが独自で考えなければなりません。 その為には、コーディングの練習を繰返して独自の方法を確立する努力が必要です。
２． ＣＳＳコードの記述方法
コード書き方の説明をする場合の用語の使い方は、指導者によって違いがあるようです。 ここでは用語の曖昧さをなくすために次のように統一します。
"表１"は、スタイルシートとHTMLファイル側の記述例です。
表１．id と class の違い |
| | CSSコード（スタイルシート側） | HTMLファイル側の記述 |
id を使ったコードの例 | #sampleA { font-size : 150% ; } | <p id="sampleA">表示する文字列</p> |
class を使ったコードの例 | .sampleA { font-size : 150% ; } | <p class="sampleA">表示する文字列</p> |
"表１"で、スタイルシート側とHTML側を sampleA というキーワードを使って互いに参照（リンク）していることが判ります。スタイルシートを使う上で一番重要な点ですから良く理解しておきましょう。
キーワードは、例として samplA を使いましたが、任意の文字列が使えます。
id と class は、HTMLファイルの表示に於いては、まったく同じ働きをしますから、どちらを使っても問題ありません。
但し、id を使った場合、同一ページ内で同じキーワードを二回以上使うとアクセス解析や cgi に影響して不具合を起こすことがあるようです。この問題を懸念する場合は、すべてを class で統一した方が良いでしょう。
コードの記入には一定の規則があります。
１．スタイルシート側で id を使う場合は、キーワードの前に # を記入します。
２．スタイルシート側で class を使う場合は、キーワードの前に . （ドット） を記入します。
３．キーワードの後ろに半角スペースを設けて { 要素-属性 : 値 ; } の順に記入します。
４．要素の後ろには - （ハイフォン）、属性の後ろに : （コロン）、値の後ろに ; （セミコロン）が必要です。
５．{ の後ろと、: (コロン)の前後や、; （セミコロン）の前後に半角スペースを入れると見やすくなります。
６．複数の要素を指定する場合は、{ 要素-属性 : 値 ; 要素-属性 : 値 ; } のように記述します。
３． HTMLファイルへのコード記入方法
head 要素の範囲に"表２"のように記述します。
個々のHTMLファイル毎にCSSコードを記入することになります。
表２．head 要素の範囲内への記入方法 |
|
<style type="text/css">
<!--
コードを記入
-->
</style>
|
☆ 実用例
表３．head 要素の範囲内への記入した実例 |
|
<html>
<head>
<title>HTMLファイルへの記入</title>
<style type="text/css">
<!--
span { color : red ; }
-->
</style>
</head>
<body>
<span>HTMLファイルへの記入</span>
</body>
</html>
|
|
|
４． CSSコードを別ファイルにする方法
CSSコードを別ファイルで作ると、同一ディレクトリ内の総てのHTMLファイルに適用できます。ページデザインの統一に便利ですから、この方法を使うのが最善の方法だと思います。
CSSコードだけを記入して、****.css でHTMLファイルと同一ディレクトリに保存して、HTMLファイト同様にアップロードすることになります。 **** （ファイル名）は、任意の名前を使えます。
HTMLファイル側には、head 要素の範囲内に次のようにリンクコードを記載します。
<link rel="stylesheet" type="text/css" href="****.css">
☆ 実用例
表４．別ファイル（****.css）で保存するコード |
|
span { color : red ; font-style : italic ; } /* 斜体の赤色 */
|
表５．CSSコードを別ファイルにした場合の、HTMLソースの実例 |
|
<html>
<head>
<title>HTMLファイルへの記入</title>
<link rel="stylesheet" type="text/css" href="****.css">
</head>
<body>
<span>斜体の赤色文字です。</span>
</body>
</html>
|
|
|
|