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

新規作成日 2016-04-01

最終更新日 2016-04-01

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

cssの使い方の記事等で、そこでしか使わないスタイルを別ファイルで管理するのは、面倒な上に、混乱の元です。そのような場合は、htmlファイル内に、スタイルを記述します。

スタイル属性を使用する

それぞれのタグのスタイル属性の中に記述する方法です。

headの記述

ヘッダに以下の記述をスる必要があります。

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

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

ヘッダ要素内のスタイルタグ内に記述します

cssの使い方の記事等で、そこでしか使わないスタイルを記述するのに適した方法です。

headの記述

stylタグの内容が表示されないように、コメントタグで囲います。

複数のクラスや属性を指定する場合は、スペースで区切ります。複数のスタイルをを指定する場合は、;で区切ります。

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

外部スタイルシートファイルを作成する

最も一般的に使用される方法です。

headの記述

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

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

ページトップへ