髭仙人の漫ろ歩き
StyleSheet
............................ unworldly man go for a ramble in the internet world ...
自由自在なレイアウトを目指して
 スタイルシート(CSS)とは


 ホームページの体裁を整えるのには「HTML」のタグが使われます。タグを使って、小見出しを指定したり、太字にしたり、イタリック体の活字を使ったり、リストやテーブルを作ることができますが、ブラウザによって表示が異なるなどの現象のために、デザイン専用に開発されたのが「スタイルシート(CSS)」です。
 そして、ひとつのCSSファイルで複数のWebページのデザインを参照することができるので、ページ毎にスタイルを設定する必要がないなどの便利さがあります。

・HTMLのタグの表記
  青い文字 ……… <b><font color="blue">  青い文字</font></b>

・「インラインスタイル」のCSS表記
  青い文字 ……… <b STYLE="color: blue;">  青い文字</b>

 上記のように、いたって簡単な例で、HTMLのタグと「スタイルシート(CSS)」の記載の相違を記述しましたが、普段ホームページの作成を支援ソフト「Dreamweaxer」などを使っていると、今さら「スタイルシート」との思いもありますが、Webサイトが成長し、ページ数や階層が増えてくると、本来の「スタイルシート(CSS)」の便利さや生産性が理解でるようです。

 下記は「スタイルシート(CSS)」を理解する上で、お世話になり、参考にさせて頂いたサイトです。

「とほほのスタイルシート入門
・「Super Style Sheets Reference
・「IXS NET
・「スタイルシートを使おう!
・「スタイルシートの基本
・「スタイルシート例文辞典

 

 
スタイルシートのメリットと問題点  
 スタイルシートのメリット


スタイルシートを使用することのメリットには幾つかありますが、特に次のようなものが重要なポイントでしょう。

◇書式を統一
 見出しなどで、同じサイズの文字に同じ色を指定するのに、<FONT COLOR=red>〜</FONT>を指定してまわるよりも、スタイルシートで一度に指定したら便利ですし、外部ファイルで指定すれば、より一層楽になります。

◇書式を一度に変更
 書式を外部ファイルに定義しておけば、それちょっと変更するだけで関連したページを一度に変更することができます。季節に合わせた色彩で飾るとか、毎月背景の画像を換えるなどの模様替えも簡単に出来ます。

 「スタイルシート(CSS)」を外部ファイルとして定義しましたから、4つの「main」ファイルが総て書式が統一されています。

・sampleAの「style.css」のBODY部の記載
BODY {
FONT-FAMILY: "MS ゴシック",Osaka; color: #333333; background-color: #ebe4e1 ;margin: 0px
}

 最初に、代表のページのレイアウトや書式を確定してから、各ページにコピーし、それぞれのページのない内容を記載しました。

 上記の内容と全く同じものですが、下記のように「スタイルシート(CSS)」のBODY部の一部を変更しました。その結果、4つの「main」ファイルが総て書式がされます。

・sampleBの「style.css」のBODY部の記載
BODY {
FONT-FAMILY: "MS ゴシック",Osaka; color: #333333; background-color: #f5f5e6 ;background-image: url('BG90.gif'); margin: 0px
}

 変更箇所は「ackground-color」のカラーの変更とbackground-imageの画像を追加したことです。

……………………………………………………………………………………………………………………

 スタイルシートの注意点


上記のように、使いこなすと便利なスタイルシートですが、いろいろ問題もあるようです。多種のブラウザやバージョンが使われている環境下では総てに期待した見栄えを求めることはできません。

未対応のブラウザもある。
 まだ多くのブラウザはまだスタイルシートをサポートしていません。また、スタイルシート機能をオフにしている人も居ます。意味だけでなく、見栄えも大切にするページであれば、古いブラウザへの配慮も必要です。

ブラウザによって動作が異なる。
 IEとNNで動作が異なります。同じブラウザでもバージョンやWindows版とMacintosh版でも動作や見栄えが異なるようです。

 

 
スタイルシートの形式について  
 スタイルシートの形式には4つのタイプ


 スタイルシートの形式として下記の4つの形式があるようです。その4つの形式について簡単な例を添えて特徴を記述します。

スタイルシートの形式
・「インラインスタイルシート」(inline style sheets)
・「エンベディッドスタイルシート」(embedded style sheets)
・「リンクトスタイルシート」(linked style sheets)
・「インポーティッドスタイルシート」(imported style sheets)

……………………………………………………………………………………………………………………

 「インラインスタイルシート」(inline style sheets)


 文章の中に直接書き込むスタイルを「インラインスタイル」(inline styles)と言いますが、最も簡単なスタイルシートで次のように指定します。<SPAN>はインライン要素(前後で改行されない)、<DIV>はブロック要素(前後で改行される)を囲む一般的なタグとして使用されます。それぞれのタグの違いを明確にするために同じ文章を3行続けて記載しました。 Sample01.htm

 「ハイパーリンク」に「ロールオーバーイメージ」を使用することがありますが、ここでは「Dreamweaver」の「ロールオーバーイメージの挿入」を使用した場合の例を記載します。

・<SPAN STYLE="color:red">文章</SPAN>

文章 文章 文章

・<DIV STYLE="color:red">文章</DIV>

文章
文章
文章

 <SPAN>や<DIV>に限らず、<H1>や<P>などのほとんどのタグでもSTYLE属性を指定できます。これも同様に同じ文章を3行続けて記載しました。

・<P STYLE="color:red">文章</P>

文章

文章

文章

・<H5 STYLE="color:red">文章</H5>

文章
文章
文章

……………………………………………………………………………………………………………………

 「エンベディッドスタイルシート」(embedded style sheets)


 「インラインスタイル」では、「赤い色」にしたい文字に、いちいち指定を書き込まなければなりませんが、「エンベディッドスタイルシー」トではタイルをあらかじめ決めておいて、そのスタイルで文書全体を統一することがでかす。
 <STYLE>タグと</STYLE>タグで囲んだ「スタイルブロック」でスタイルを定義します。そのスタイルブロックは<HEAD>タグと</HEAD>タグの間に作ります。

Sample02.htm
<HTML>
<HEAD>
<TITLE>style sheets</TITLE>
<STYLE type="text/css">
H1 { color: red }
</STYLE>
</HEAD>
<BODY>
<H1>My Home Page</H1>
<P>I am very glad to see you</P>
</BODY>
</HTML>

……………………………………………………………………………………………………………………

 「リンクトスタイルシート」(linked style sheets)


 リンクトスタイルシートでは、スタイルを適用するHTMLファイルとは別に、スタイルシートだけのファイルを用意し、そのスタイルシートに複数のHTMLファイルからリンクできます。
 HTMLファイルの方では、<HEAD>の部分に<LINK>タグを使って、次のような指定を挿入します。

HTMLファイル Sample03.htm

<HTML>
<HEAD>
<TITLE>style sheets</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">
</HEAD>

styles.css

BODY {
color:green;
background-color:pink;
font-size:12pt;
}
H1 {
color: red;
font-size:24pt;
}
P {
color:blue;
font-size:18pt;
}

……………………………………………………………………………………………………………………

 「インポーティッドスタイルシート」(imported style sheets)


 「リンクトスタイルシート」によって外部のスタイルシートにリンクすることができますが、外部のスタイルシートを使う方法がもう一つあり、それが@importタグを使う「インポーティッドスタイルシート」(imported style sheets)です。
 インポーティッドスタイルシートの書き方はリンクトスタイルシート同じです。HTMLファイルの方では、次のような記述を <STYLE TYPE="text/css"> と </STYLE>で挟みます。

@import url(styles.css);

HTMLファイル Sample04htm


<HTML>
<HEAD>
<TITLE>style sheets</TITLE>
<STYLE TYPE="text/css">
@import url(styles.css);
</STYLE>

 

 

フォントのサイズの指定について

 
 文字のフォントサイズ指定 (<font>と<H>)


 HTML言語で、文字のフォントサイズを指定するには、<font size=X>〜</font>で囲み、Xには 1〜7 の数値を指定したり、<hX>〜</hX>で囲み、Xには 1〜6の数値を指定します。下記のようにサイズの種類やフォントに若干の相違があります。この範囲で使い分けをすることと、スタイルシートの機能を使ってより一層魅力的なサイトを作成することが可能となります。

・HTMLの文字のサイズ(size1〜7)

文字サイズ
HTMLタグの記述
文字サイズ1 <font size="1">文字サイズ1</font><br>
文字サイズ2 <font size="2">文字サイズ2</font><br>
文字サイズ3 <font size="3">文字サイズ3</font><br>
文字サイズ4 <font size="4">文字サイズ4</font><br>
文字サイズ5 <font size="5">文字サイズ5</font><br>
文字サイズ6 <font size="6">文字サイズ6</font><br>
文字サイズ7 <font size="7">文字サイズ7</font><br>

 

・HTMLの文字のサイズ(H1〜6)

文字サイズ
HTMLタグの記述
文字サイズH6
<H6>文字サイズH6</H6>
文字サイズH5
<H5>文字サイズH5</H5>

文字サイズH4

<H4>文字サイズH4</H4>

文字サイズH3

<H3>文字サイズH3</H3>

文字サイズH2

<H2>文字サイズH2</H2>

文字サイズH1

<H1>文字サイズH1</H1>

 

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/