[HTML] [CSS] 別ファイルのスタイルシートをリンクしてスタイルを利用する - 外部スタイルシートファイルの利用
このページのタグ:[HTML] [CSS]
別ファイル(外部ファイル)のスタイルシートを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について
iPentec all rights reserverd. (ISDC)