|
|
スタイルシート記述法
▼スタイルシートで記述してみよう。
- ＣＳＳ講座とは別に、ここではＰテーブルの例にとってスタイルシートの記述法を解説しています。
上級者になればなるほど、いろいろな指定にはスタイルシートを使っているような気がしますが、この方法のほうが内部がスッキリして見やすい分、あとで書き直しなどする時に楽なんですよ。
スタイルシートについてはＣＳＳ講座で詳しくやってますが、とりあえずＰテーブルのスタイルシートの使い方について説明します。
外部スタイルシートの記述法なども解説していますので、ぜひ一度は読んでみてください。
●ＨＴＭＬ内に記述する方法
<P style="background-color:#0000ff;
width:300; height:50;
border:10px double #00bfff; color:#ffffff;
font-weight:bold;"
align="center">ここに文字を入れる</P>
↓上のように記述されているのを、タグとスタイルシートに分けてみます。
●クラス指定：（<BODY>〜</BODY>内の入れたい場所に記述します。）
<P align="center" class="p1">ここに文字を入れる。</P>
●クラスの内容：（<HEAD>〜</HEAD>内に記述します。）
<STYLE type="text/css">
<!--
.p1 {
background-color : #0000ff;
width
:
300;
height
: 50;
color
:
#ffffff;
font-weight
: bold;
border
:10px double
#00bfff;
}
-->
</STYLE>
以上のように記述すると、同じ結果のテーブルが出来上がります。
下のほうにコピペ用も用意してありますから、自分で作ってみてください。
色・数値・キーワードなどを変更してみるとわかりますよ。
それと外部スタイルシート用も用意してありますので、合わせて研究してみてくださいね。
◆<BODY>〜</BODY>記述用
◆<HEAD>〜</HEAD>記述用
◆外部スタイルシート用
●外部スタイルシートの記述法
上のような外部用の指定をメモ帳に記述して、それを「名前をつけて保存」→「すべてのファイル」と選択していき名前は自由決めて保存します。
その場合の拡張子が一番重要で、必ず ．ｃｓｓ で保存します。
ここでは、名前を「ｓａｍｐｌｅ．ｃｓｓ」としておきますね。
これを外部ファイルとして呼び込むわけですね。
■外部ＣＳＳファイルの呼び込みの記述
<HEAD>内に以下のように記述します。（例はｓａｍｐｌｅ．ｃｓｓと名前です。）
<LINK rel="stylesheet" href="sample.css"
type="text/css">
↓例として、こんな形で記述されます。
<HTML>
<HEAD>
<TITLE></TITLE>
<LINK rel="stylesheet"
href="sample.css" type="text/css">
</HEAD>
<BODY>ここはページ内容</BODY>
</HTML>
|
スタイルシートというのは、一言で言うと、ページレイアウトを定義する技術ということが言えると思います。
ＨＴＭＬは、文書の構造などを指定する機能しか持ってません。
本来のＨＴＭＬ機能にはない体裁の制御について、全く別の方法で記述するようにするために生み出されたものだということです。
簡単に言うと、ＨＴＭＬの補助のための指定と思ってもらってもいいかも知れませんね。
外部ファイルですっきりさせるのもいいですし、内部に書いておいて手直しをしやすくするのもいいと思いますが、どちらにしろホームページ製作においての重要なポイントには違いありませんね。 |
|
|
|
