基礎の基礎からCSSを学んでいきましょう。
引用:ウィキペディアの執筆者. “Cascading Style Sheets”. ウィキペディア日本語版. 2012-04-04.
スタイルシートは3種類あります。
● 制作者スタイルシート
● ユーザースタイルシート
● デフォルトスタイルシート
の3つです。
UA(User Agnet(ユーザーエージェント)・・・一般的にブラウザ)の環境設定でどのスタイルシートを適用するかの設定をしなければ、優先度はこのようになります。
たとえば、文字色に対して制作者スタイルシートで赤を指定、ユーザースタイルシートでは青、
デフォルトスタイルシートでは黒が設定されていたとします。
この場合、デフォルトスタイルシートの黒がユーザースタイルシートの青で上書きされ、さらに
制作者スタイルシートの赤が上書きされ、最終的に文字色には赤が設定されます。
デフォルトスタイルシートは各UAが持っているもので、それぞれ内容が異なります。この差異が異なるブラウザにおける表示の違いの原因の一つです。
デフォルトスタイルシートを表にしてみました。
HTML文書にスタイルシートを適用する方法は3つあります。
1.要素にstyle属性を追加するこちらも優先順序があります。
このHTML文書をスタイルシートを使って書き直してみましょう。
ソースコード<p><font color= "red"> スタイルシートを使いましょう。</font></p>
スタイルシートを使いましょう。
ちなみにfont要素は、HTML5で廃止される予定のようです。
<p style= "color: red"> スタイルシートを使いましょう。</p>
<head>
<style
type="text/css">
p {color:
red;}
</style>
</head>
<p> スタイルシートを使いましょう。</p>
文書単位でスタイルを設定する方法です。
p {color:
red;}
の部分が、CSSの基本書式でそれぞれの名称は、
セレクタ {プロパティ名:
値;}です。
プロパティ名: 値; の部分は複数の記述ができます。
ソースコード(CSSファイル)p {
color: red;
font-weight: bold;
}
p {color: red;}
<head>
<link rel= "stylesheet"
type="text/css"
href="style.css"
>
</head>
<p> スタイルシートを使いましょう。</p>
こちらが、お勧めスタイルシートの適用方法です。
複数のHTMLファイルに同じスタイルを使用するときなど、管理面で非常に優位です。
このホームページでは、極力この方法で記述し説明もこれを基準とします。
クラス名を付けてスタイルを定義し、要素単位でこのクラスを指定することによりスタイルを適用します。
ソースコード(CSSファイル)p.redstyle {
color: red; /* 文字色は赤 */
}
ここはデフォルトの文字色です。<br>
<p
class= "redstyle"
>
クラスを指定して文字の色を変えました。
</p>
クラスを指定して文字の色を変えました。
p.redstyleは、p要素に対してのみredstyleクラスが適用可能となります。
*.redstyleとすれば、どの要素にも適用できます。*は省略でき
.redstyleと記述できます。
また、クラスは複数のクラスを適用することもできます。クラス名の間に半角スペースを入れて記述します。
p.redstyle {
color: red; }
/* 文字色は赤 */
*.bold {
font-weight: bold; }
/* 太文字 */
<p
class= "redstyle bold"
>
2つのクラスを指定して文字の色と太さを変えました。
</p>
2つのクラスを指定して文字の色と太さを変えました。
ID名を付けてスタイルを定義し、要素単位でこのIDを指定することによりスタイルを適用します。
■クラス名を用いたスタイルの指定と使い方が同じですが、
同じページで一箇所しか使えないという違いがあります。
定義側(CSS) | 使用側(HTML) | 使用回数 | |
---|---|---|---|
クラス | .(ピリオド) (例)p.class_name |
class= (例)<p class="class_name"> |
何回でも |
ID | #(シャープ) (例)p#id_name |
id= (例)<p id="id_name"> |
1ページに1回のみ |
p#redstyle {
color: red; /* 文字色は赤 */
}
ここはデフォルトの文字色です。<br>
<p
id= "redstyle"
>
IDを指定して文字の色を変えました。
</p>
IDを指定して文字の色を変えました。