CSSの使い方

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

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

　スタイルシートは以下の3つの定義・利用方法があります。このページでは
③別ファイルに記述する方法を紹介します。 別ファイルにスタイルを定義することで、他のHTMLページからもスタイルシートを使用することができるため、たくさんのHTMLファイルを作成した場合でも、レイアウト・デザインを統一することが容易になります。
記述方法特徴
①直接タグに記述する。そのタグのみに適応可能
②HTMLファイルのヘッダーに記述する。そのファイルのみに適応可能
③別ファイルに記述する。他のファイルに適応可能

別ファイルにCSSを定義する。

①CSSファイル(拡張子は.css)を以下のように作成します。
この例ではファイル名を test.css としルートディレクトリにアップロードしておきます。 　

CSSファイル(/test.css)のサンプル


@charset "utf-8";

.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; }
②HTMLファイル側では、ヘッダー部に linkタグを用いスタイルシートを読み込みます。

HTMLファイルのサンプル


<html>
<header>
<title>CSSのサンプル</title>
<link href="/test.css" rel="stylesheet" type="text/css" media="all" />
</header>
<body>

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

</body>
</html>

表示例

あいうえお

かきくけこ

さしすせそ

たちつてと