HTML-スタイルシート

Cascading Style Sheets（CSS）は、ドキュメントが画面に表示される方法、印刷される方法、またはおそらくどのように発音されるかを記述します。 W3Cは、1994年にコンソーシアムが設立されて以来、Webでのスタイルシートの使用を積極的に推進しています。

カスケードスタイルシート（CSS）は、HTMLタグのさまざまな属性を指定するための簡単で効果的な代替手段を提供します。 CSSを使用すると、特定のHTML要素に対して多数のスタイルプロパティを指定できます。各プロパティには、コロン（:)で区切られた名前と値があります。各プロパティ宣言はセミコロン（;）で区切られます。

例

まず、<font>タグと関連する属性を使用してテキストの色とフォントサイズを指定するHTMLドキュメントの例を考えてみましょう-

'_注-_font_タグは非推奨であり、将来のバージョンのHTMLでは削除される予定です。したがって、むしろ使用すべきではありません。CSSスタイルを使用してフォントを操作することをお勧めします。ただし、学習目的のために、この章ではfontタグを使用した例を使用します。_

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

私たちは次のようにスタイルシートの助けを借りて上記の例を書き直すことができます-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

これは、次の結果を生成します-

HTMLドキュメントでCSSを3つの方法で使用できます-

外部スタイルシート-スタイルシートルールを別の.cssファイルで定義し、HTML <link>タグを使用してそのファイルをHTMLドキュメントに含めます。
内部スタイルシート-<style>タグを使用して、HTMLドキュメントのヘッダーセクションでスタイルシートルールを定義します。
インラインスタイルシート- style 属性を使用して、HTML要素とともにスタイルシートのルールを直接定義します。

適切な例を使用して、3つのケースすべてを1つずつ見てみましょう。

外部スタイルシート

スタイルシートをさまざまなページで使用する必要がある場合は、別のファイルで共通のスタイルシートを定義することを常にお勧めします。カスケードスタイルシートファイルの拡張子は .css になり、<link>タグを使用してHTMLファイルに含まれます。

例

私たちは次のルールを持つスタイルシートファイル style.css を定義することを検討してください-

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

ここでは、HTMLタグに定義された3つの異なるクラスに適用される3つのCSSルールを定義しました。 CSSの学習中にルールを学習するため、これらのルールがどのように定義されているかを気にしないでください。さて、次のHTMLドキュメントで上記の外部CSSファイルを利用しましょう-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

これは、次の結果を生成します-

内部スタイルシート

スタイルシートルールを1つのドキュメントのみに適用する場合は、<style>タグを使用してHTMLドキュメントのヘッダーセクションにそれらのルールを含めることができます。

内部スタイルシートで定義されたルールは、外部CSSファイルで定義されたルールをオーバーライドします。

例

上記の例をもう一度書き直しましょうが、ここでは<style>タグを使用して同じHTMLドキュメントにスタイルシートルールを記述します-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Internal CSS</title>

      <style type = "text/css">
         .red {
            color: red;
         }
         .thick{
            font-size:20px;
         }
         .green {
            color:green;
         }
      </style>
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

これは、次の結果を生成します-

インラインスタイルシート

関連するタグの style 属性を使用して、HTML要素にスタイルシートルールを直接適用できます。これは、HTML要素のみに特定の変更を加えたい場合にのみ行う必要があります。

要素でインラインで定義されたルールは、外部CSSファイルで定義されたルールと<style>要素で定義されたルールをオーバーライドします。

例

上記の例をもう一度書き直しますが、ここでは、スタイルシートルールとそれらの要素の style 属性を使用するHTML要素を記述します。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Inline CSS</title>
   </head>

   <body>
      <p style = "color:red;">This is red</p>
      <p style = "font-size:20px;">This is thick</p>
      <p style = "color:green;">This is green</p>
      <p style = "color:green;font-size:20px;">This is thick and green</p>
   </body>

</html>

これは、次の結果を生成します-

Html-style-sheet

目次

HTML-スタイルシート

例

外部スタイルシート

例

内部スタイルシート

例

インラインスタイルシート

例