カラーコード	お薦めサイト	ホーム	HP作成ソフト	HP作成法

トップページ＞雑学・小技集＞ CSS(スタイルシート)

スタイルシートとは簡単に例えると、スタイリストさんです。普通のＨＴＭＬが出来ない事、例えば文字と文字の間隔、テーブルの線の種類などを装飾する事ができます。

スタイリストさんがＨＴＭＬ君を格好良くするという図式です。スタイリストさんには、３つの雇い方ができます。 (1)髪だけ、服だけ…など、それだけを格好良くしてもらう方法。 (2)ＨＴＭＬ君１人に、専属でついてもらう方法。 (3)出張してもらう方法。

(1)髪だけ、服だけ…など、それだけを格好良くしてもらう方法。

フォントタグに、太さ1の青点線を上下左右で装飾しています。

<Font Style=" border-style:dashed; border-color:blue; border-width:1;">
フォントタグに、太さ1の青点線を上下左右で装飾しています。
</Font>

※メリット…タグと同じなので指定するので簡単かつ、わがままがききます。
※デメリット…修正するとき面倒です。

(2)ＨＴＭＬ君１人に、専属でついてもらう方法。

<Head>～</Head>内に入れこみます。
<Style Type="text/css">

</Style>

※メリット…ページ単位で例えば文字の大きさなどを指定できます。
※デメリット…特に無し

(3)出張してもらう方法。

CSSファイルを制作します。上の、
<Style Type="text/css">

</Style>
の部分を外し、テキストファイルに、ただ
Font { border-style:dashed; border-color:blue; border-width:1; }
と、書いて保存します。保存した後、拡張子（.txt、.htmlの部分）をcssと変更します。
そして、
<Link rel="stylesheet" href="CSSファイルのURL" type="text/css">
を<Head>～</Head>内に入れこみます。

※メリット…全てのHTMLから呼び出すのでデザイン変更が容易にできます。
※デメリット…ページの読みこみに少し時間を食います。
(3)をもっと知りたい方はCSSを外部から呼び出そう！へGO！！

■ classは便利～～！使うべき！

みんなのタグ辞書のHTMLのソースを覗くと、至る所に「class=""」という文字を目撃すると思います。 classとは、ファーストフードのセットメニューだと思ってください。セットメニューを自分で作り必要なときにメニュー名をタグに書けば、ひとつずつスタイルシートを書かなくてもいいのです。

例えば、「囲み線が1px、点線、色は青（#7db8ff）」、この命令文の名前を「abc」とします。名前はなんでもいいんですよ。それを、例えばフォントタグに<Font Class="abc">あいうえお</Font> と記述すると
あいうえおと表示されます。

HTMLファイルの場合
<Style Type="text/css">

</Style>
※HEADタグの中に入れこみます

CSSファイルの場合
.abc {border-style:dashed;
border-color:#7db8ff;
border-width:1;}

ページトップ ▲

┃トップページ┃タグ実験場┃リンクについて┃免責事項┃メール┃

トップページ ＞ 雑学・小技集 ＞ CSS(スタイルシート)

トップページ＞雑学・小技集＞ CSS(スタイルシート)