《CSS》

CSSって何?

CSSとはスタイルシートの一つとされていますが
あまり深く考えないのであればスタイルシートで良いでしょう。
見栄えを担当する上でとても役立つのがスタイルシートです。
一つ一つを指定する基本タグと違い、「このページ内での文字サイズはこれくらい!色はこれ!」と定義し、全体を統一します。
例えばどんなことができるの?
 
基本的なところだと
  • 格文字サイズ(基本サイズ・リンク文字サイズなど)の指定
  • 格文字色(基本色・リンク色など)の指定
  • 画像表示位置の固定
  • スクロール変形
などなど。
「統一」する事から読み込みが早く、訪問者に好まれます。
もちろん統一した中で個別に<font>などで文字サイズなどを変える事はできます。
例としては↓ <STYLE type="text/css"></STYLE>タグでスタイルシートを入力します。
仕組み

ページ全体を導く内部情報となるので<head></head>内に情報を入力します。

<STYLE type="text/css"></STYLE>タグでスタイルシートを入力します。
内部にスタイルシート情報を入力するわけですが仕組みを簡単に説明すると、

設定したい要因1 {
例えば文字サイズ:  その値;
例えば書体:     その種類;
例えば画像:     その情報:
}
設定したい要因2 {
例えば文字色:     その値;
例えば書体:     その種類;
例えばフォント:   その種類:
}

格好の良い言い方を
するのであれば

セレクタ1 {
プロパティ1:   プロパティ値;
プロパティ2:   プロパティ値;
プロパティ3:   プロパティ値:
}
セレクタ2 {
プロパティ1:   プロパティ値;
プロパティ2:   プロパティ値;
プロパティ3:   プロパティ値:
}

と、なります。 実際にソースを見てみましょう↓

<html>
<head>
<title>あなたのホームページ</title>

<STYLE type="text/css">

body {

font-size: 9pt;

scrollbar-dark-shadow-color:#17e851;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #45882f;
scrollbar-shadow-color: #17e851;
scrollbar-3d-light-color: #17e851;
scrollbar-arrow-color: #45882f;
scrollbar-base-color: #17e851;

}

a:link {
font-size: 9pt;
text-decoration: none;
}

a:visited {
font-size: 9pt;
text-decoration: none;
}

a:active {
font-size: 9pt;
text-decoration: none;
}

a:hover {
font-size: 9pt;
color: #70bafe;
text-decoration: none;
}

td {
font-size: 9pt
;}

b {
font-size: 9pt
;}

</STYLE>

</head>

<body>
略〜
</body>

</html>
外部出力
ページ外部に拡張子.cssファイルを作成し、呼び出す事で同じスタイルシートを簡単に使いまわす事が出来ます。
ソースをすっきりさせる上でも有効的なので、外部ファイルを作り呼び出してみましょう。

まず、仕組み(←ポイントリンクをつける)項目で説明した通り、cssプログラムを作り拡張子.cssで保存します。その際、cssである事は明白なのでcssプログラムを宣言する必要はなく、内部プログラムのみで構いません。
例:下記プログラムをメモ帳で☆.cssとして保存

body {

font-size: 9pt;

}


cssファイルを作成できましたら、スタイルシートを活用したいページに<link href="☆.css" rel="stylesheet" type="text/css">と記述し、先ほど作成した外部ファイルを呼び出します


<html>
<head>
<title>あなたのホームページ</title>
<link href="aaa.css" rel="stylesheet" type="text/css">
</head>

<body>
略〜
</body>

</html>
rel="" stylesheet を指定します
type="" text/css を指定します
href="" 読み込むスタイルシートファイルを指定します