CSSの使い方

TOP > CSS >HTMLファイル上でのスタイルシートの定義・利用方法

CSSをHTMLファイルに定義し利用する方法

　スタイルシートを定義する方法は以下の3パターンあります。 このページでは下表の①②のHTMLファイル上でのスタイルシートの定義・利用方法を紹介します。
記述方法特徴
①直接タグに記述する。そのタグのみに適応可能
②HTMLファイルのヘッダーに記述する。そのファイルのみに適応可能
③別ファイルに記述する。他のファイルに適応可能

①直接タグに記述( style="" )

　スタイルシートはHTMLタグに直接書く事ができます。
<p>タグを例にすれば <p style="パラメーター">あいうえお</p>　のように
style属性に様々なスタイルを指定することができます。

サンプルコード

<p style="font-size:15pt;">あいうえお</p>

実行例

あいうえお
　さらに以下のように複雑なスタイルを指定する事も可能です。

サンプルコード

<p style="border:3px solid #ff0000;font-size:8pt;color:green;width:150px;height:100px;padding:5px;">あいうえお</p>

実行例

あいうえお

解説

上記のpタグは以下のスタイルを指定しています。
  • border:3px; …枠線を3px、色を#ff0000(赤)に。
  • font-size:8pt; …文字サイズを8ポイントに。
  • color:green; …文字色を緑に。
  • width:150px; …ボックス幅を150ピクセルに
  • height:100px; …ボックス高を100ピクセルに
  • padding:5px; …ボックス内の余白を5ピクセルに

②ヘッダーに記述(STYLEタグ)

　<style>タグを用い、スタイルシートをまとめてヘッダ部で定義する事ができます。
　スタイルを使用する場合は、適応したいタグに class属性やid属性などでスタイル名を指定します。
スタイルの定義方法スタイルの利用方法特徴
.スタイル名
例 .test{ color:red; }		class属性で指定
#スタイル名
例 #test{ color:red; }		id属性で指定idの重複利用はNGです。
タグ名
例 em{ color:red; }		タグ名で指定そのタグのスタイルを全て変更。
　

サンプルコード


<html>
<header>
<title>CSSのサンプル</title>
<style type="text/css">
<!--
.test { font-size:10pt; }
.test2 { font-size:12pt; color:red ; }
#id3 { font-size:12pt; color:blue ; font-weight:bold; }
em { font-weight:bold; background-color:#ccc; }
-->
</style>
</header>
<body>

<p class="test">あいうえお</p>
<p class="test2">さしすせそ</p>
<p id="id3">かきくけこ</p>
<em>かきくけこ</em>

</body>
</html>

表示例

あいうえお

かきくけこ

さしすせそ

たちつてと