Home/Menu

スタイルなCSSの基礎講座

本サイトで採用していたスタイルシートについて
(2001/06/22以前に採用していたスタイルです。)

はじめに

実は、私はスタイルシートが得意ではありません。(今まで必要性を感じなかった...。)
しかし、今回、ほぼ全HTML文書をスタイルシート採用(chaichan.css)にいたしました。

一番の理由は、blockquoteタグの誤用の訂正です。

私が手本にしている、「とほほのWWW入門」と「KENT-WEB」では、blockquoteタグをインデントで使用していますが、 blockquoteタグはあくまで引用タグであって、インデントでの使用はあきらかな誤用です。 しかし、絶大な影響力を持つ2大サイトが誤用しているため...、改善してくれるといいのですが...。

微力ながら、本サイトだけでも思い、修正いたしました。
そして、見栄えはスタイルシート、文書構造はHTML、内容はわかりやすく...。

IE5とネスケ4.5で同じ見栄えになるように、結構苦労しました。
そんなこんなで、とりあえず、勉強がてらに、本サイトで採用したスタイルシートを説明致します。
少しでも、スタイルシート初心者の方の参考になればいいのですが...。

スタイルシートのHTMLへの記述の仕方

まずは、スタイルシートファイル(chaichan.css)にスタイル宣言を記述しておき、<LINK>タグで任意のHTMLソースの<HEAD>タグ内に記述します。

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css"> <--- スタイル属性指定ありの時は必要
<LINK REL=stylesheet TYPE="text/css" HREF="chaichan.css"> <--- ここ
<title>mystyle.htm</title>
</HEAD>

本サイトで採用したスタイルシートのソース

本サイトのスタイルシートファイル(chaichan.css)のスタイル宣言の内容は以下の通りです。
尚、基本的な文法はスタイルシートの基礎知識を各プロパティは簡易リファレンスを参照してください。

/*----------------------------------------------------------*/
body{ 
           color: #004488; 
           background-color: #FFFFFF;
           margin: 5px 4% 30px 5%;
}
/*----------------------------------------------------------*/
p{ 
           color: #004488;
           margin: 10px 1% 10px 1%;
           line-height: 1.4em;
}
/*----------------------------------------------------------*/
pre{ 
           color: #006666;
           margin: 10px 1% 10px 1%;
           line-height: 1.4em; 
}
/*----------------------------------------------------------*/
blockquote{ 
           color: #006666;
           line-height: 1.4em;
}
/*----------------------------------------------------------*/
h1{ 
           color: #0044FF;
           text-align:center;
           font-style:italic;
           font-size: 1.8em;
           font-weight:bold; 
           border-color:#0088FF; 
           border-style:solid; 
           border-width:0.2em 1.0em 0.2em 1.0em;
           margin-left:20%;
           margin-right:20%;
           background-color: #FFFFFF;
}
/*----------------------------------------------------------*/
h2{        color: #0044FF;
           text-align:center;
           font-size: 1.6em;
}
/*----------------------------------------------------------*/
h3{
           color: #FFFFFF;
           background-color: #0088FF;
           font-size: 1.4em;
           margin: 6px 0% 6px 0%;
           border:none;
           line-height: 1.5em;
} 
/*----------------------------------------------------------*/
h3 B{      
           color: #FFFFFF; 
}
/*----------------------------------------------------------*/
h4{ 
           color: #660000; 
           font-weight:bold; 
           border-color:#0088FF; 
           border-style:solid; 
           border-width:0 0 0.2em 0.5em;
           margin-left:10px;
           margin-right:60%;
           padding-left:1em;
}
/*----------------------------------------------------------*/
ul{ 
           line-height: 1.4em;
           list-style-type: square;  
}
/*----------------------------------------------------------*/
ol{        
           line-height: 1.4em; 
}
/*----------------------------------------------------------*/
strong{    
           color: #00008F; 
}
/*----------------------------------------------------------*/
A:link { 
           text-decoration: none;
}
A:visited { 
           text-decoration: none;
           color: #0066ff;
}
A:active  {
           text-decoration: none;
}
A:hover{  
           text-decoration: underline;
           color: #008800;
}
/*----------------------------------------------------------*/
TH{
           background-color: #66DDFF;
}
/*----------------------------------------------------------*/
.new{
           color: #008000;
           font-style:italic;
           font-size: 1.3em;
}
/*----------------------------------------------------------*/
.mi{
           color: #006666;
}
/*----------------------------------------------------------*/
.bcolor{
           background-color: #FFFFFF;
}
/*----------------------------------------------------------*/
.fs {
           background-color:#7777DD;  
           color:white;
}
.fs2 {
           background-color:#9999FF;  
           color:white;
}
.fs3 {
           background-color:#FFFFFF;  
           color:#7777DD;
}
.TAB1{
           line-height: 1.5em;
           background-color: #BBBBFF;
           margin: 6px 0% 6px 0%;
           border:none;
}
.TAB2{
           margin: 1em 2em 1em 2em;
}
.TAB3{
           margin: 1em 2em 1em 3em;
}
/*----------------------------------------------------------*/

◆ 本サイトで採用したスタイルシートのソースの説明

bodyタグ

pタグとpreタグとblockquoteタグ

h1タグ

h2タグ

h3タグ

h4タグ

ulタグとolタグ

strongタグ

A:link(link疑似クラス)

A:visited(visited疑似クラス)

A:active(active疑似クラス)

A:hover(hover疑似クラス)

THタグ

.new クラス

.mi クラス

.bcolcor クラス

.fs .fs2 .fs3 .TAB1 .TAB2 .TAB3

おわりに

まだまだ、未熟なchaichan.cssファイルですが、徐々にグレードアップしていきます。
そしてそれが、スタイルシートマスターへの一番の近道なのですから...。

みなさんも、是非スタイルシートをお試し下さい!(スタイルシートの基礎知識簡易リファレンス。
スタイルシートファイルを変えるだけで、HTMLファイルの変更無しにいろいろ楽しめます。
しかし、それには、HTMLでしっかり文書構造を記述し、スタイルシートをマスターしないといけませんが...。

では、chaichan.cssファイルが今後どのように成長していくか楽しみにしてください。
本ページが、少しでもスタイルシート初心者の方の参考になれば幸いです。


Home/Menu/スタイルシート概説リファレンス