タイトル画像
サイトタイトル画像

スタイルシートを使ってみよう

「スタイルシート」とはフォント、テキスト、テーブルなどをそのスタイルの指定を パターン化し、まとまった形でドキュメントに適応させることができる機能です。

「スタイルシート」は「 Internet Explorer 」だけにサポートされていたものですが、「 Netscape Navigator4.0 」 よりサポートされました。

HTML 「文書の構造を定義」タイトル、見出し、段落、区切り線、表組、アドレスなど、文書内の役割(意味)づけをします。
スタイルシート 「配置や装飾などの文書の体裁を設定」文字サイズ、ウェイト、表示フォント等の文字の装飾、ポジション指定など「見た目」をコントロールします。

(1)スタイルシートの記述の基本

スタイルシートは「スタイルを『定義』しておいて、必要な個所に『適用』する」が基本です。

スタイルの「定義」の基本となるのが、次のスタイルの宣言と呼ばれるものです。

PROPERTY : VALUE (定義するもの:その値)

複数指定する場合は、それぞれを「;」で区切り続けて記述することができます。

スタイルシートの定義方法には、大きく分けて3つあります。

(2)スタイルシートの定義方法(ヘッダー内での指定)

まず、ヘッダー(<head>~</head>)内で要素(タグ)ごとにスタイルを定義する方法は次のように記述します。

要素(タグ)名 { PROPERTY : VALUE }

これは、例えば次のように利用します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>スタイルシートの練習</title>
<style type="text/css">
<!--
  h3 { color : #0066ff }
  p  { color : #666666; font-size : 10pt }

</style>
</head>

<body>

<h3>●スタイルシートでできること</h3>

<p>スタイルシートはスタイルを「定義」します。</p>
<p>定義されたものは文書全体に適用されます。</p>

</body>
</html>

<!-- //-->」は無くても構いませんが、スタイルシート未対応ブラウザ を使った場合、スタイルシートの設置が設定がそのまま表示されてしまいます。

上記のソースをブラウザで表示すると、次のようになります。

スタイルシートの見本

ヘッダー内での定義によって、スタイルがページ全体に適用されていることが分かると思います。

(3)スタイルシートの定義方法(外部ファイルでの指定)

これは、スタイルを定義した外部ファイルをヘッダーで読み込み指定して、ページ全体に適用させるというものです。

これは、例えば次のように利用します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>スタイルシートの練習</title>
<link rel="stylesheet" type=text/css href="sample.css">
</head>

<body>

<h3>●スタイルシートで出来ること</h3>

<p>スタイルシートはスタイルを「定義」します。</p>
<div class="t1">例えば、文字の装飾。</div>
<span id="c1">ページ全体に適用できます。</span>

</body>
</html>

スタイルを適用するためにスタイルシートをファイルとして保存し、href属性でスタイルシートファイル(.css)のURLを指定します。

スタイルシートファイル(.css)の中身は次のように記述します。

sample.css

   h3 { color : #0066ff }
    p { color : #666666; font-size : 10pt }
  .t1 { color : #ff0066; line-height : 25pt }
  #c1 { color : #33cc33; font-style : italic }

「.」や「#」などで指定した場合は、それぞれ「CLASS」や「ID」を利用してスタイルシートを呼び出します。

ブラウザでは次のように表示されます。

スタイルシートの見本

このようにHTML文書に記述して読みこめば、 多くのページの体裁が統一されたページを作成することができます。

スタイルシートの定義方法(タグに直接指定)

汎用性は高くはありませんが、一部分にのみスタイルシートを適用したい場合に役に立つのが、この方法です。

これは、例えば次のように利用します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>スタイルシートの練習</title>
<meta http-equiv="content-style-type" content="text/css">
</head>

<body>

<h3 style="color : #0066ff">●スタイルシートで出来ること</h3>

<p style="color : #666666; font-size : 10pt">スタイルシートはスタイルを「定義」します。</p>

<div style="color : #ff0066; line-height : 25pt">例えば、文字の装飾。</div>

<span style="color : #33cc33; font-style : italic">ページ全体に適用できます。</span>

</body>
</html>

ブラウザでの表示は、上の例と全く同じになります。

注意としては、直接指定の場合はスタイルシートのタイプ(種類)の指定ができないため、<meta>タグを利用してヘッダーに以下を追加しなければならないことです。

<meta http-equiv="Content-Type" content="text/css">

ちなみに「div」要素は改行をともなうブロックとしてのまとまり、「span」要素は改行をともなわない行内レベルのまとまりを表すタグです。

この2つのタグは、それ自体には特定の意味を持たないため、スタイルシートの指定でよく使われます。

なお指定を合わせて利用する場合は、この直接指定が最も優先されます。

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since )