ケム 　 CSS（スタイルシート）の解説
　記述方法っつってもたいしたことないです
　　雑記　　
　　メモ　　
　　掲示板　　
　　SCRIPT　　
　　HTML　　
　　├ 基本　　
　　├ 前準備　　
　　├ 保存　　
　　├ 確認　　
　　├ 更新　　
　　├ 装飾　　
　　├ リンク　　
　　├ テーブル　　
　　├ テーブル2　　
　　├ フレーム　　
　　└ フレーム2　　
　　CSS　　
　　├ 記述方法　　
　　├ CSSファイル　　
　　└ テキスト　　
　　リンク　　
　　メール　　
 1.記述位置

ええとBODY全体に影響を及ぼす指定をしたい時は<HEAD>〜</HEAD>間に書きます。
例えばスクロールバーや背景の設定はここに記述します。
あと文字の大きさとか色もここで記述しておこうね。
って説明だけより実際に見てもらった方が早いか（＾＾；
それじゃ背景を黒、文字の大きさを10ポイントで指定してみましょう。

<HTML>
<HEAD>
<TITLE>CSS入門</TITLE>
<STYLE type="text/css">
<!--
BODY { background-color: #000000; font-size: 10pt; }
-->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

ここでは<TITLE>〜</TITLE>の後ろで記述してますが前でも大丈夫です。
……中はダメだかんね（笑）

2.全体に有効にする

まずそのタグが出てきた時に全部有効になる書き方を伝授します（笑）
あ。これは上で書いた位置<STYLE type="text/css">〜</STYLE>に書いてね。
ええと上でも書いたけど例えばBODY全体に有効になって欲しい場合は
BODY { 指定1; 指定2; 指定3; }
てな風に記述してください。
記述1、記述2ってのはフォントのサイズとかカラーとかの指定です。
それぞれは「；（セミコロン）」で区切ってください。
TDに指定したいときはTD { 指定1; 指定2; 指定3; }です。
それぞれタグに対応したものを指定して記述すればいいんですね。
それじゃ複数を指定したものの例をあげてみましょう。

<STYLE type="text/css">
<!--
BODY { background-color: #000000; font-size: 10pt; }
TD { font-size: 10pt; color: #999999; }
A { text-decoration: none; color: red; }
-->
</STYLE>

それじゃこの指定の説明です。
「BODY」で背景を黒、文字サイズを10ptにしてますね。
「TD」では文字サイズを10pt、文字色を#999999にしてます。
「A］（リンク）では文字に下線が出ないようにしつつ、色を赤にしてます。
それぞれの指定の話は別にしますが、ここで注目はTDの指定です。
なんでBODYで指定してるのに同じ指定をまたしてるか。
TDだったら確実にBODYの中にあるんだからそこで指定した10ptでしょ。
・・・・・・って僕も最初は思ってたんですよ。
でも実際にやってみたらテーブルの中は無効になってるんですね。
そこで改めてTDやTHで指定してあげないといけないんです。

3.部分的に有効にする

CSSには後で記述されたものの方が強いという性質があります。
例えば font-size: 10pt と書いた直後に font-size: 8pt と書いたとします。
この場合は（同じタグに対する指定なら）後者の8ptが有効になります。
ということで全体に対する指定も有効ですが個々にも指定が出来るんですね。
ここは<BODY>〜</BODY>の中に書いてある文字に対する記述です。
例えば　はぅ。はにぃに逢いたひ。　こんな文章があったとします（笑）
この「はにぃ」の部分を赤にしたい時は
はぅ。<SPAN style="color: #ff0000">はにぃ</SPAN>に逢いたひ。
という風に書いたら　はぅ。はにぃに逢いたひ。　こうなります。
また通常のタグと組み合わせて
<FONT size="3" style="color: #ff0000">〜</FONT>と書くこともできます。

4.自分で指定する

例えば繰り返し使いたい装飾があったとします。
でもそれはタグで括られるようなものじゃなかったらクラスを使いましょう。
例えばサイズを12ptで、色が赤で、アンダーライン引いて、太字にしたい場合は
毎回SPANで書くのが面倒じゃないっすか。
<SPAN style="font-size: 16px; color: red; text-decoration: underline; font-weight: 600">
だって↑こんなんですよ（苦笑）
これは例えば「mite」という名前にしたら

<STYLE type="text/css">
<!--
BODY { background-color: #000000; font-size: 10pt; }
.mite { font-size: 16pxt; color: red; text-decoration: underline; font-weight: 600 }
-->
</STYLE>

てな具合に（HEAD部分に）記述してください。
これを有効（？）にするには
<SPAN class="mite">ここはじっくり見て欲しい。</SPAN>
こう記述したら　ここはじっくり見て欲しい。　こうなります。


△ 上へ △

HOME　 |　雑記　 |　メモ　 |　掲示板　 |　SCRIPT　 |　HTML　 |　リンク　 |　メール