CSS（スタイルシート）の組込み方法

CSSファイルを作成する

CSSはカスケーディングスタイルシートと呼ばれ、htmlの各タグ(hやpなど）に対して個別に色や文字の太さなどのスタイルを変更することができるプログラムです。

index.htmlファイルにCSSを組み込んでスタイルを変更する方法は、内部に組み込む方法と外部から読み込ませる方法の2つがあり、一般的には後者の外部スタイルを適用する方法を使うのが一般的です。

また、外部から読み込ませる場合は、htmlファイル（index.html）とは別にCSSファイルを用意する必要があります。

ファイルの作り方は、htmlファイルを作った要領と全く同じで、メモ帳を起動させたら、ファイル名は拡張子cssで、txtになっているのを全てのファイルに変更して保存します。

内部に組み込む場合はcssファイルは用意する必要はありません。

内部に組み込む

CSSを内部に組み込む場合は、headの間に次のように記述します。

「!--」や「//」はコメントアウトを表します。ここでコメントアウトしているのは古いブラウザでstyleの間に記述した内容が表示されてしまうためです。

<head>
<style type="text/css">
<!--
適用スタイル
//-->
</style>
</head>

html内へのコメントアウトの記述はHTMLであれば問題ないですが、XHTMLやXMLで記述するときには記述してはいけないことになっています。

当講座では、HTMLではなく、XHTMLを使用してホームページを作ることを目的としているので、外部から組み込む方法を覚えておくことを薦めます。

外部から読み込ませる

外部からCSSファイルを読み込ませる場合は、headの間に次のように記述します。これは、外部シートであるstyle.cssを読み込むことを意味します。

<head>
<link rel="stylesheet"type="text/css" href="style.css" media="all" />
</head>

mediaではページが出力されるメディアを指定します。

いろいろありますがallにしとけばすべてデバイスに適用されるので問題ないでしょう。最初は何も考えずallを入れればOK。

サンプルにCSSを組み込む

先ほど作った骨格に、先ほど作ったstyle.cssファイルを組み込みます。

styleといフォルダの中のstyle.cssにアクセスするので、”style/style.css”とします。

<html>
<head>
<title>ホームページ作成講座</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<link rel="stylesheet"type="text/css" href="style/style.css" media="all" />
</head>
<body>
<h1><img src="gif/1.gif" alt="ホームページ作成講座" /></h1>
<p><img src="gif/2.gif" alt="境界線" /></p>
<p>｜<a href="index.html"<HOME</a>｜<a href="#>Lesson1</a>｜<a href="#>Lesson2</a>｜<a href="#>Lesson3</a>｜<a href="#>Lesson4</a>｜<a href="#>Lesson5</a>｜</p>
<h2>INFORMATION</h2>
<dl>
<dt>2008/1/1</dt>
<dd>ホームページ作成講座を開設しました。</dd>
<dt>2008/1/2</dt>
<dd>ホームページ作成講座を閉鎖しました。</dd>
</dl>
<h2>Lesson1：メモ帳を起動してみよう！</h2>
<ul>
<li>ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。</li>
<li>Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。</li>
<li>さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。</li>
</ul>
<h2>LLesson2：タグを書いてみよう！</h2>
<ul>
<li>ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
<p><img src="jpg/1.jpg" alt="メモ帳に記述" /></p>
<h3>＜文字の大きさを変える＞</h3>
<p>文字の大きさは、font sizeタグを使用します。</p>
<h3>＜文字の色を変える＞</h3>
<p>文字の色は、colorタグを使用します。</p>
</li>
<li>ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。</li>
</ul>
<hr />
<address>Copyright 2007@nkdesk. all right reserved.</address>
</body>
</html>

Lesson3～CSSを使った装飾～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>