CSSの使用法

CSSセレクター CSS コメント

目次

  1. CSS を使用する 3 つの方法
  2. 外部 CSS
  3. 内部 CSS
  4. インライン CSS
  5. 複数のスタイル シート
  6. カスケード順序

ブラウザはスタイル シートを読み取ると、スタイル シート内の情報に従って HTML ドキュメントをフォーマットします。

CSS を使用する 3 つの方法

スタイル シートを挿入するには 3 つの方法があります:

  • 外部 CSS
  • 内部 CSS
  • インライン CSS

外部 CSS

外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。

すべての HTML ページには、head セクションの <link> 要素内に外部スタイルシート ファイルへの参照が含まれている必要があります。

例

外部スタイルは、HTML ページの <head> セクション内の <link> 要素で定義されます。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

自分で試してみてください

外部スタイル シートは任意のテキスト エディタで作成でき、.css 拡張子を付けて保存する必要があります。

外部 .css ファイルには HTML タグを含めないでください。

"mystyle.css"は次のようになります:

"mystyle.css"

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

注: 属性値と単位の間にスペースを追加しないでください (例: margin-left: 20 px;)。 正しい書き方は次のとおりです: margin-left: 20px;

内部 CSS

HTML ページに独自のスタイルがある場合は、内部スタイル シートを使用できます。

内部スタイルは、head セクションの <style> 要素内で定義されます。

例

内部スタイルは、HTML ページの <head> セクション内の <style> 要素で定義されます。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

自分で試してみてください

インライン CSS

インライン スタイル (インライン スタイルとも呼ばれます) を使用して、個々の要素に独自のスタイルを適用できます。

インライン スタイルを使用するには、関連する要素に style 属性を追加します。 style 属性には、任意の CSS プロパティを含めることができます。

例

インライン スタイルは、関連する要素の "style" 属性で定義されます。

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

自分で試してみてください

ヒント: インライン スタイルでは、(コンテンツとプレゼンテーションが混在するため) スタイルシートの利点の多くが失われます。 この方法は注意して使用してください。

複数のスタイル シート

異なるスタイルシートの同じセレクター (要素) に対していくつかのプロパティが定義されている場合、最後に読み取られたスタイルシートの値が使用されます。

外部スタイル シートが <h1> 要素のスタイルを次のように設定すると仮定します。

h1 {
  color: navy;
}

ただし、内部スタイル シートでも <h1> 要素のスタイルが次のように設定されていると仮定します。

h1 {
  color: orange;    
}

例

内部スタイルが外部スタイル シートへのリンクの後に定義されている場合、<h1> 要素はオレンジ色になります。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

自分で試してみてください

例

ただし、内部スタイルがリンク先の外部スタイル シートの前に定義されている場合、<h1> 要素は濃い青色になります。

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

自分で試してみてください

カスケード順序

HTML 要素に複数のスタイルが指定されている場合、どのスタイルが使用されますか?

ページ上のすべてのスタイルは、次のルールに従って新しい「仮想」スタイル シートに「カスケード」されます。最初のスタイル シートが最も優先されます。

  • インライン スタイル (HTML 要素内)
  • 外部および内部スタイル シート (head セクション内)
  • ブラウザのデフォルトのスタイル

したがって、インライン スタイルが最も優先され、外部スタイル、内部スタイル、ブラウザのデフォルト スタイルをオーバーライドします。

自分で試してみてください

CSSセレクター CSS コメント