CSSとは何ですか？
CSSはCascading S tyleSheetsの略です
CSSは、HTML要素の表示方法を記述します
CSSの例
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
[自分で試す]ボタンをクリックして、どのように機能するかを確認してください。
CSS構文
CSSルールは、から成るセレクタと宣言ブロック：
セレクターは、スタイル設定するHTML要素（h1）を指します。
宣言ブロック（中括弧内）には、セミコロンで区切られた1つ以上の宣言が含まれています。
各宣言には、コロンで区切られたCSSプロパティ名と値が含まれます。
次の例では、すべての<p>要素が中央揃えで赤くなり、フォントサイズは32ピクセルになります。
例
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
同じ例を次のように書くこともできます。
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
外部スタイルシート
CSSスタイルシートは外部ファイルに保存できます。
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
外部スタイルシートは、 <link>タグを使用してHTMLページにリンクされています。
例
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
インラインスタイル
例
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
カスケード順序
HTML要素に異なるスタイルが指定されている場合、スタイルは 次の優先順位で新しいスタイルにカスケードされます。
- 優先度1：インラインスタイル
- 優先度2：外部および内部のスタイルシート
- 優先度3：ブラウザのデフォルト
- 同じ優先度レベルで異なるスタイルが定義されている場合、最後のスタイルが最も高い優先度になります。
例
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSSデモ-1つのHTMLページ-複数のスタイル！
ここでは、4つの異なるスタイルシートで表示された1つのHTMLページを示します。
スタイルシートボタン（1〜4）をクリックして、さまざまなスタイルで表示されたページも表示します。
完全なCSSチュートリアル
これはCSSの簡単な説明です。
完全なCSSチュートリアルについては、W3SchoolsCSSチュートリアルにアクセスしてください。
完全なCSSリファレンスについては、W3SchoolsCSSリファレンスにアクセスしてください。