ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTML勉強 ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTMLソース勉強部屋
制作:ジョイ@関西

 トップ | ≪HTML基本構成≫ | ≪タグの書き方≫ | ≪スタイルシートの書き方≫ | HTMLタグ・属性 abc順 | ≪サイトマップ≫

エプソンダイレクト株式会社


タグとその属性だけでほとんど書けますが、W3Cの勧告で一部「非推奨」のタグや属性があります。 「非推奨」のものも含めてスタイルシートで指定する方法を説明します。
スタイルシートを利用する場合、<head>〜</head>(基本情報部分)に下記の1行をコピーして貼り付け(コピペ)てください。

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

前述のタグ例をスタイルシートで指定してみます。使う部分を指定するために、<p>、<div>、<span>、<table>、<td> などのタグで使うことが多いです。
今回は <span> で使ってみます。

◇スタイルシート その1(必要な部分に直接指定する)

<span style="font-size:150%; color:red; font-family:'HGゴシックE';">こんにちは</span>

style=" "
「スタイルシートで指定しますよ」という宣言で、タグの中に直接使う場合は必ずこの形にします。
この中に複数の指定をしますが、「=」の替わりに「 : (半角コロン)」を使い、区切りは「 ; (半角セミコロン)」、半角スペースは不要で、あっても無視されるだけですが、区切りが判りやすいので私は半角スペースを入れています。
また属性の言葉や値はタグの場合と書き方が異なります。
size → font-size
face → font-family
これ以外の言葉もほとんど変わります。

文字サイズの書き方は大きく異なり、ピクセル(px)、パーセント(%)などの単位が必ず必要になります。
絶対単位:in, cm, mm, pt, pc、相対単位:px, ex, em、割合:% などがあります。
私のこのページには「 16px 」を使っています。


◇スタイルシート その2(1ページ全体に指定する)

「その1」では部分的に直接指定しました。この情報をページ全体に利用する場合、 そのページの <head>〜</head>(基本情報部分)に次のように記載します。
多くは </head> の直前に記載しています。

<style type="text/css">
<!--
.font1 { font-size:150%; color:red; font-family:'HGゴシックE'; }
-->
</style>

スタイルシートに対応できていないブラウザもあるので、2行目と4行目のようにコメントにしておきます。
<!-- 〜 --> をコメントといい、この間に書かれた文字や記号は表示されません。
今回は3行目の1行が有効です。
3行目は最初に「 . 」で始まっています。これは「クラス属性」と言って、指定したところだけ使えます。
そして使いたいところ、例えばある <td> の中だけ使う場合、その <td> は次のように書きます。

<td class="font1">〜</td>

指定する場合は「 class 」で呼び出し、値は「 . 」なしで書きます。

決まったタグのすべてに使いたい場合は、「 . 」なしで、タグ名を書きます。

<style type="text/css">
<!--
td { font-size:150%; color:red; font-family:'HGゴシックE'; }
-->
</style>

こう書けば、このページのタグ <td> すべてに適用されます。

※スタイルシートでは半角スペースは無視されるので、下記のように書いて見やすくする場合が多いです。
<style type="text/css">
<!--
.font1 {
  font-size:150%;
  color:red;
  font-family:'HGゴシックE';
}
-->
</style>


◇スタイルシート その3(スタイルシートのファイルを作る)

複数のページや色々な場所で使う場合、スタイルシートだけのファイルを作り流用します。
スタイルシートファイルの拡張子は「 .css 」。名前は半角英数と一部の半角記号ならOKです。
利用したいページの </head> の直前に、次のように書きます。

<link href="*****.css" type="text/css" rel="stylesheet">

スタイルシートには「その2」の3行目、
.font1 { font-size:150%; color:red; font-family:'HGゴシックE'; }
だけ書き、「 *****.css 」で保存します。
このとき、使うファイルとスタイルシートは同じ階層にある方がトラブルが少ないようです。

ページが多い場合はこの方法が便利で、多くのサイトが利用しています。

指定がクラス属性なら、「 class=" " 」で指定した部分に適用、指定がタグの場合はそのページすべての指定したタグに適用されます。

≪スタイルシートの見本≫

スタイルシートサンプル

1行目はbodyタグで指定しているのでページ全体に適用。
2行目もhrタグで指定しているので、hrタグ全部に適用。
3行目は、沢山書いたとき見やすくするために開けました。開けなくてもOKです。
4行目は「.」で始まるので、クラス指定。ページの中で「class="f16"」と書いたところだけ適用。
5行目もクラス指定で、ページの中で「class="font1"」と書いたところだけ適用。

/* */ を書くと、コメントとして使えます。この部分は無視されるので、意味など書いておくと便利です。

スタイルシートの使い方と例をもう少し詳しく紹介したページ


ページの先頭へ


 トップ | ≪HTML基本構成≫ | ≪タグの書き方≫ | ≪スタイルシートの書き方≫ | HTMLタグ・属性 abc順 | ≪サイトマップ≫

Copyright(C) 2005 ホームページを自作しよう≪JoyWave便利箱≫ All Rights Reserved.