htmlファイル内にスタイルを記述する

新規作成日 2016-04-01

最終更新日 2024-11-03

通常、スタイルシートは、cssファイルとして別ファイルで管理します。

しかし、1つのHTMLファイルでしか使用しないスタイルの場合、特別にCSSファイルを用意すると管理が面倒になる可能性があります。その場合は、HTMLファイルのheadタグ内に、スタイルを記述することができます。

HTMLファイル内でスタイルを指定する方法には、headダグ内のstyleタグ内にまとめて記述する方法と、それぞれのタグ内に、style属性を追加して記述する方法があります。

スタイルシートの種類がCSSであることを明示する

HTML4.01 / XHTML 1.0文書では、headダグ内のmetaタグで、以下の表記を追加して、スタイルシートの種類がCSSであることを明示する必要がありましたが、HTML5 では、不要になりました。

HTML4.01の場合

<meta http-equiv="default-style" content="text/css">

XHTML 1.0の場合

<meta http-equiv="Content-Style-Type" content="text/css" />

headダグ内のstyleタグ内にまとめて記述する

、headダグ内のstyleタグ内にまとめて記述できます。HTML5では、「type="text/css"」の記述は、省略できます。

styleタグを記述する位置

styleタグは、headタグ内に記述します。

<html>
<head>
	...
	<style type="text/css">
		...
	</style>
	...
</head>
<body>
	...
<body>
</html>

styleタグ内にスタイルを記述する例

cssに対応していないブラウザでは、styleタグ内に記述した文字列がそのまま表示されてしまうので、コメントタグ「」で囲う必要がありました。現在では、その配慮は、必要ありません。

複数のスタイルを指定する場合は、「;」で区切ります。

cssに対応していないブラウザに配慮した記述

<style type="text/css">
<!--
        h1{background-color: yellow；
                font-size: 24px}
        .sample01{color: cyan}
        #title{font-size: 24px}
-->
</style>

ちなみに

ヘッダに、Html5,css3に対応させるためのポリフィルを構築します

Html5,css3に対応していないブラウザに、Javascriptで対応させる方法があります。Html5,css3移行期に使用されていました。

HTML5での記述（HTML5では、「type="text/css"」の記述は、省略できます。）

<style>
        h1{background-color: yellow；
                font-size: 24px}
        .sample01{color: cyan}
        #title{font-size: 24px}
</style>

style属性の値として記述する

スタイルを指定したい要素に、style属性を設定する方法で、「style="プロパティ:値"」のように、引用符（「"」または「'」）をつけて記述します。

<h1 style="background-color:yellow">サンプル</h1>

外部スタイルシートに記述する

通常は、HTMLファイル内には、スタイルを記述せず、外部スタイルシートを使用します。HTMLファイル内にスタイルを記述しないことで、HTMLファイル内の内容が理解しやすくなるとともに、何度もスタイルを記述する必要がなくなります。

外部スタイルシートを使用する場合は、　headタグ内でlinkタグを使用して、スタイルシートの場所を明示します。

href属性に、スタイルシートのフルパスを入力します。外部スタイルシートの場所は、トップディレクトリ直下にcssフォルダを作成し、そこに格納するのが一般的です。

<link rel="stylesheet" type="text/css" href="style.css">

ページトップへ