別ファイルのスタイルシートをリンクしてスタイルを利用する - 外部スタイルシートファイルの利用 - CSS

別ファイル(外部ファイル)のスタイルシートをHTMLファイルにリンクして、スタイルを利用する方法を紹介します。
補足
スタイルシートをHTMLファイル中に埋め込んで記述する方法はこちらの記事を参照して下さい。

書式

<head></head> タグ間に下記のコードを記述します。
<link href="(スタイルシートファイル名)" rel="Stylesheet" type="text/css" />

コード例

StyleSheet.css
.StdText
{
    font-size:18px;
    color:#10A020;
    margin-left:64px;
}
CssExternalStyleSheet.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
  <div class="StdText">スタイルシート、外部スタイル。</div>
</body>
</html>

表示結果

上記HTMLファイルをWebブラウザで表示すると下図の表示が得られます。フォントサイズとフォントの色、左マージンの変更ができています。


著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2012-07-05
iPentec all rights reserverd.