ゼロからはじめるホームページ作成 
HOME > スタイルシート講座 > スタイルシートの書き方(3)

スタイルシートの書き方(3)

"CSSファイル"を別ファイルに持つことで、他の全ページの見栄えを統一できます。

<head>内に<link rel="stylesheet" href="CSSファイル名" type="text/css">を記述することで"CSSファイル"を各ページに適用することができます。

変更前

<html>
<head>
<style type="text/css">
<!--
div{
color:#0000ff;
font-size:16pt;
background-color:#999999;
}
-->
</style>

</head>
<body>
<div>スタイルシートの書き方1</div>
<div>スタイルシートの書き方2</div>
</body>
</html>

ここで以下のような"CSSファイル"を作成します。

CSSファイル

ファイル名:style.css
div{
color:#0000ff;
font-size:16pt;
background-color:#999999;

}

変更後

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div>スタイルシートの書き方1</div>
<div>スタイルシートの書き方2</div>
</body>
</html>

結果

スタイルシートの書き方1
スタイルシートの書き方2

まとめ

  • styleを"CSSファイル"として別に作ります。
  • <head>内に<link rel="stylesheet" href="CSSファイル名" type="text/css">を記述します。


スタイルシート講座

初心者講座

スポンサードリンク

スタイルシート辞典

テキスト
フォント
背景
ボックス
配置
リスト
テーブル
ユーザインタフェース
その他



Copyright© ゼロからはじめるホームページ作成講座 All Rights Reserved.  サイトマップ