TECH I.S.

CSSの追加方法


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


CSSを挿入する3つの方法

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

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

外部CSS

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

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

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

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>見出し</h1> <p>段落</p> </body> </html>

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

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

「mystyle.css」ファイルは次のようになります。

「マイスタイル.css」

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

注:プロパティ値と単位の間にスペースを追加しないでください: 不適切 (スペース):margin-left: 20 px;正しい (スペースなし):margin-left: 20px;


内部CSS

1つの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>見出し</h1> <p>段落</p> </body> </html>


インラインCSS

インラインスタイルを使用して、単一の要素に独自のスタイルを適用できます。

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

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

<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">見出し</h1> <p style="color:red;">段落</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要素に複数のスタイルが指定されている場合、どのスタイルが使用されますか?

ページ内のすべてのスタイルは、次のルールによって新しい「仮想」スタイルシートに「カスケード」されます。ここで、1番の優先度が最も高くなります。

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

そのため、インラインスタイルが最も優先度が高く、外部および内部のスタイルとブラウザのデフォルトをオーバーライドします。


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細