ココのスタイルシートで遊びませんか[基本篇(4)]

基本篇(STEP4)
複数のページで共通に使う
【LINK REL】

このページでは「外部定義ファイルの読み込み」について説明をします。今までのSTEP1からSTEP3ではSTYLEやCLASSの指定方法について説明をしてきました。STEP3ではSTYLE TYPEをHEAD部に書き込みCLASSで、同一ページの中だけでスタイルを使用しました。しかし、いろいろなページで毎回同じSTYLE TYPEを宣言するのは面倒なので、スタイルの宣言をする専門のファイルを作っておき、それを「各ページから呼び出して使ってしまおう」というのがこのページの目的です。HTMLでは画像を表示させるのに、<img src="画像ファイルの場所">で指定しますが、スタイルを記述したスタイルシートファイルを呼び出すには次のように記述をします。

スタイルシートファイルへのリンク

STEP3の「STYLE TYPE」の記述と同様に、htmlのbody部に記述します。

┌<html>
│┌<HEAD>
││　←ここには<title>～</title>などの記述が入っています
││　←ここでスタイルシートファイルを指定します
│└</HEAD>
│┌<BODY>
││　←ここには表示する内容が書いてあります
│└</BODY>
└</HTML>

上のように記述します。スタイルシートファイルのファイル名は自由に決めて構いませんが、拡張子は css とします。この記述を各HTMLファイルに置くだけで共通のスタイルをしようすることができるようになります。それでは、stylecoco.css という名前のスタイルシートファイルを作ってみましょう。

スタイルシートファイルの書き方

スタイルシートファイルの書き方は全く「１ページ全体で使う」で説明した「STYLE TYPE」と同様です。細かい説明は「１ページ全体で使う」を参考にしてください。このページでは、「行間隔の指定」「赤い文字の太字」「他ページへのリンク部分にカーソルを合わせたときの色替え」を指定してみたいと思います。

[実際のページで見てみましょう]

<html>
<head>
<title>スタイルシートのテスト</title>
<link rel="stylesheet" type="text/css" href="./stylecoco.css">
</head>

href="./stylecoco.css" は href="stylecoco.css" でも構いません。./ は、このHTMLと同じディレクトリの意味です。同じ場合は省略できます。参考までに、親ディレクトリ(一つ上の階層)は ../ と書きます。

それでは、実際のページの記述を見てみましょう。

<html>
<head>
<title>スタイルシートのテスト</title>
<link rel="stylesheet" type="text/css" href="./stylecoco.css">
</head>
<body>
<div class="main">
<h2 align="center">CSSファイルの読み込み</h2>
このページはスタイルシートを使用して表示されています。このページのHEAD部までは、下にように書かれています。
<hr class="short" style="background:red">
<pre class="blackbox"><html>
<head>
<titl>スタイルシートのテスト</title>
<span class="red"><link rel="stylesheet" type="text/css" href="./stylecoco.css"></span>
</head></pre>
<span class="blue">stylecoco.css</span> というスタイルシートファイルを利用して、このような表示ができるようになっています。
<hr class="short">
<div class="redbox">このページの解説は「<a href="./css_step4.html"><span class="help">複数のページで共通に使う</span></a>」にあります。リンク部分にカーソルをあてると変なカーソルが出ますか？文字色や背景色が変わりますか？</div>
スタイルシートを使用すると、このページのように枠内に文字を表示したりすることもできます。
<hr class="short" style="background:red">
</div>
</body>
</html>

stylecoco.css は下のように書かれています。

H2 {
color:#000000;
background-color:#EEFF11;
width: 70%;
border:3px solid #9999DD;
}
HR.short {
width:10%;
height:5;
background-color:aqua
}
A:hover {color:red; background:yellow;}
.help {cursor:help;}
.main {
width:600px;
color:#000000;
font-size:14pt;
line-height:1.4;
margin-left:50px;
margin-right:50px;
}
.redbox {
width:600px;
margin-top : 10px;
margin-bottom : 10px;
color:#000000;
line-height:1.5;
border:1px solid red;
padding:5pt;
}
.blackbox {
width:600px;
margin-top : 10px;
margin-bottom : 10px;
font-size:12pt;
color:#000000;
line-height:1.1;
border:1px solid black;
padding:5pt;
}
.blue {
color:blue;
font-weight:bold;
}
.red {
color:red;
font-weight:bold;
}

このようにスタイルシートファイルの外部定義ファイルを呼び出すことによって、同じ定義を複数のファイルで共用することができます。ホームページの色や体裁を統一するのにも便利ですね。外部定義ファイルは一つではなく、複数指定することもできます。このように書くこともできます。

用途に応じて使い分けることができますね。

これで基本篇は終了です。今までの説明の中に、背景色を指定したり、太字で表示させたりしましたが、まだまだ色々なことがスタイルシートではできます。次のページからは、どのようなことができるのか、実際に表示させながら示していきたいと思います。

| Back | Coco's Home | ココのスタイルシートで遊びませんか(Top) |

基本篇(STEP4)複数のページで共通に使う【LINK REL】

基本篇(STEP4)
複数のページで共通に使う
【LINK REL】