スタイルシート初心者講座

外部CSSファイルからの指示方法

それではさっそく外部ファイルを使ってスタイルを指示してみましょう!

外部CSSファイルで作成したスタイルを、HTMLの適用したい部分に反映させるには、HTML内で下記のような指示をします。

テーブルタグで使う場合
<TABLE border="1" width="100%" cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD class="スタイル名"></TD>
</TR>
</TBODY>
</TABLE>

DIVタグで使う場合
<DIV id="スタイル名">
</DIV>

「class」と「id」の違いは?

「class」はひとつのHTML文の中で複数回使用することが出来ますが、「id」は一度しか使うことが出来ません。

という使い方が正しいとされていますが、実際のところは「id」を複数回使用しても、現在のブラウザでは認識してしまいます。 ただこれは正しい利用法ではないので、ひとつのHTML文の中で複数回使用するのはやめておいた方がいいでしょう。

指定の仕方は違っても「結果」は変わらないので、「class」だけでも問題ありません。

「class」を使う場合の外部ファイルの記述法

.スタイル名 {
         width : 750px ;
         text-align : left ;
         background : #ffffff ; }

※スタイル名は自分でわかりやすい名前を半角英数で記述
※スタイル名の前の「.」ドットを忘れずに!

「id」を使う場合の外部ファイルの記述法

#スタイル名 {
         width : 750px ;
         text-align : left ;
         background : #ffffff ; }

※スタイル名は自分でわかりやすい名前を半角英数で記述
※スタイル名の前の「#」シャープを忘れずに!

このページの上▲

⇒ Next Lesson 3 直接表示と背景設定の違い
レッスン1へ レッスン2へ レッスン3へ スタイルシートQ&Aへ スタイルシート初心者講座トップへ


[PR] [PR]