CSSの基本を学びましょう。
基礎の基礎からCSSを学んでいきましょう。
■スタイルシート（CSS）
★スタイルシートとは
Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。 ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる（カスケードする）ことができる しかし、拡張・修正の続いている CSS 仕様の全てを完全に実装しているユーザーエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし実用上支障のないレベルの実装はされてきており、なおかつ表現のお互いの互換性についても考慮されてきている。引用：ウィキペディアの執筆者. “Cascading Style Sheets”. ウィキペディア日本語版. 2012-04-04.
■３種類のスタイルシート
スタイルシートは３種類あります。
● 制作者スタイルシート
● ユーザースタイルシート
● デフォルトスタイルシート
の3つです。
★３スタイルシートの優先順位
UA(User Agnet（ユーザーエージェント）・・・一般的にブラウザ）の環境設定でどのスタイルシートを適用するかの設定をしなければ、優先度はこのようになります。
たとえば、文字色に対して制作者スタイルシートで赤を指定、ユーザースタイルシートでは青、
デフォルトスタイルシートでは黒が設定されていたとします。
この場合、デフォルトスタイルシートの黒がユーザースタイルシートの青で上書きされ、さらに
制作者スタイルシートの赤が上書きされ、最終的に文字色には赤が設定されます。
デフォルトスタイルシートは各UAが持っているもので、それぞれ内容が異なります。この差異が異なるブラウザにおける表示の違いの原因の一つです。
デフォルトスタイルシートを表にしてみました。
■HTML文書にスタイルシートを適用する
★３つのスタイルシート適用方法
HTML文書にスタイルシートを適用する方法は３つあります。
１．要素にstyle属性を追加する２．style要素で文書全体に適用する
３．link要素で外部CSSファイルを呼び出す
★スタイルシート適用方法の優先順位
こちらも優先順序があります。
このHTML文書をスタイルシートを使って書き直してみましょう。
ソースコード<p><font color= "red"> スタイルシートを使いましょう。</font></p>
表示
スタイルシートを使いましょう。
ちなみにfont要素は、HTML5で廃止される予定のようです。
★１．要素にstyle属性を追加する
ソースコード<p style= "color: red"> スタイルシートを使いましょう。</p>
要素単位でのスタイルを設定する方法です。
★２．style要素で文書全体に適用する
ソースコード<head>
<style
type="text/css">
p {color:
red;}
</style>
</head>
<p> スタイルシートを使いましょう。</p>
文書単位でスタイルを設定する方法です。
p {color:
red;}
の部分が、CSSの基本書式でそれぞれの名称は、
セレクタ {プロパティ名:
値;}です。
プロパティ名: 値; の部分は複数の記述ができます。
ソースコード（CSSファイル）p {
color: red;
font-weight: bold;
}
★３．link要素で外部CSSファイルを呼び出す
ソースコード（CSSファイル）p {color: red;}
ソースコード（HTMLファイル）
<head>
<link rel= "stylesheet"
type="text/css"
href="style.css"
>
</head>
<p> スタイルシートを使いましょう。</p>
こちらが、お勧めスタイルシートの適用方法です。
複数のHTMLファイルに同じスタイルを使用するときなど、管理面で非常に優位です。
このホームページでは、極力この方法で記述し説明もこれを基準とします。
■クラス名を用いたスタイルの指定
クラス名を付けてスタイルを定義し、要素単位でこのクラスを指定することによりスタイルを適用します。
ソースコード（CSSファイル）p.redstyle {
color: red; /* 文字色は赤 */
}
ソースコード（HTMLファイル)
ここはデフォルトの文字色です。<br>
<p
class= "redstyle"
>
クラスを指定して文字の色を変えました。
</p>
表示
クラスを指定して文字の色を変えました。
p.redstyleは、p要素に対してのみredstyleクラスが適用可能となります。
*.redstyleとすれば、どの要素にも適用できます。＊は省略でき
.redstyleと記述できます。
また、クラスは複数のクラスを適用することもできます。クラス名の間に半角スペースを入れて記述します。
p.redstyle {
color: red; }
/* 文字色は赤 */
*.bold {
font-weight: bold; }
/* 太文字 */
ソースコード（HTMLファイル)
<p
class= "redstyle bold"
>
２つのクラスを指定して文字の色と太さを変えました。
</p>
表示
２つのクラスを指定して文字の色と太さを変えました。
■ID名を用いたスタイルの指定
ID名を付けてスタイルを定義し、要素単位でこのIDを指定することによりスタイルを適用します。
■クラス名を用いたスタイルの指定と使い方が同じですが、
同じページで一箇所しか使えないという違いがあります。
| 定義側（CSS） | 使用側（HTML） | 使用回数 | |
|---|---|---|---|
| クラス | .（ピリオド） （例）p.class_name |
class= （例）<p class="class_name"> |
何回でも |
| ID | #(シャープ) （例）p#id_name |
id= （例）<p id="id_name"> |
１ページに１回のみ |
ソースコード（CSSファイル）
p#redstyle {
color: red; /* 文字色は赤 */
}
ソースコード（HTMLファイル)
ここはデフォルトの文字色です。<br>
<p
id= "redstyle"
>
IDを指定して文字の色を変えました。
</p>
表示
IDを指定して文字の色を変えました。