フォント レイアウト リンク・画像 テーブル リスト ページ 特殊文字 小技・雑学
カラーコード お薦めサイト ホーム HP作成ソフト HP作成法

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

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

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

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

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


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


(2)HTML君1人に、専属でついてもらう方法。
<Head>〜</Head>内に入れこみます。
<Style Type="text/css">
<!--
Font { border-style:dashed; border-color:blue; border-width:1; }
//-->
</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">
<!--
.abc {border-style:dashed;
border-color:#7db8ff;
border-width:1;}
-->
</Style>

※HEADタグの中に入れこみます

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

トップページタグ実験場リンクについて免責事項メール
Copyright © 2001-2006 YukiProduction. All Rights Reserved.
全ページリンクフリー
since03/06/01