勉強会資料
このページは熊本シニアネットの勉強会用として作成したものです
ご自由にお持ち帰りください  
                                KSN勉強会資料

知って得する話 第三弾
ホームページの裏技 第2話
CSSの概要
CSSとは
HTMLだけで作成したホームページは、指定に制限があるため、イメージ通りの表現が出来ないことが多々あります。
そこでCSSの出番となります。
CSSを使えば、HTMLだけでは表現できない文字のサイズや色などを指定することが出来ます。
ホームページの作成に用いられている言語「HTML]を使えば、文字や画像を組み合わせて伝えたいことを表現することが出来ます。しかし、微妙なサイズの指定や配置する位置などを細かく指定することが出来ないため、あまり見栄えの良いページが出来ません。そのため、本来の役割と違った方法でのHTMLタグを使用(テーブルをレイアウトに用いる、スペースを空けるために画像を読み込む、など)が行われるようになりました。
このような使い方は文書の構造をわかりにくくしたり、文書の再利用や保守を困難にする弊害も出てきます。
そこで、CSS(Cascading Style Sheet)を利用することにより、柔軟なデザインと、構造の単純化が実現出来るようになります。
タイトルロゴのサイズ、フォントの種類、画像の重ね合わせなど自由に表現出来ます。(HTMLでは無理)
(現在、Internet Explorer も Netscape も 最新バージョンでは対応していますが、一部の古いバージョンでは対応していませんので、対応バージョンを明記するようにしましょう。
例 Internet Explorer5.0以降・Netscape6以降でご覧下さい。
CSSスタイルを設定するには
スタイルを設定する方法(場所)は3通りありますが、何れも「プロパティ:値」という書式で行います。

例  
color(プロパティ)(プロパティに値を設定刷る記号)blue(値)

CSSは「プロパティ」 に 「値」 を設定することで使用できます。「プロパティ」とは、「フォントのサイズ」 「色」 など、設定しようとする項目のことを
差し、「値」 とは 「18ポイント」 「黄色」 など具体的な設定値を示すものです。
CSSでは、プロパティに値を設定するためにころん 「:」 を用います。
上の例では、「color」 プロパティに 「blue」 という値を設定しています。

CSSを記述する場所
 1:style属性の値として記述する
「プロパティ:値」というスタイルの設定を記述出来る場所は3カ所あります。
HTMLを知っているなら、一番わかりやすい方法は、スタイルを設定したいタグに style 属性を設定する方法で、
「style = "プロパティ:値"」のように二重引用符 「"」 を付けて記述します。

例 <H1 style = "color:blue">ようこそ</H1>

大文字小文字は区別しません。ただし、全角文字は認識されないので注意が必要です。

 2:ヘッダ部分に記述する
文書内の同じタグの全てに、同じスタイルを設定したいときは、HTMLソースのヘッダ部分(「<HEAD>」 と 
「</HEAD>」 の間)にSTYLEタグを用いて次のように記述します。

<HTML>
<HEAD>
<TITLE>CSSの記述方法</TITLE>
(ア) <STYLE type = "text/css">(="スタイルシートの種類を指定")
<!--
H1{color : blue}   (スタイルシート非対応プラウザ用の記述)
-->
(イ) </STYLE> ((ア)から(イ)の中にスタイルの指定を記述)
</HEAD>
<BODY>
<H1>ようこそ</H1>
</BODY>
</HTML>

 3:別のファイルに記述する
複数のページに同一のスタイルを適用したいときは、別のテキストファイルにスタイルを設定し、スタイルを設定した
ファイルは 「.css」という拡張子を付けて保存して、それをHTMLファイルで読み込むようにします。
読み込みの設定は、ヘッダ部分にLINKタグを用いて次のように記述します。
「rel = "stylesheet"」 で スタイルシートを使うことを宣言し「type = "text/css"」の部分はスタイルシートの種類を示し、「href = "ファイル名"」という形で保存したスタイル設定ファイルを読み込ませます。

H1{color : blue}   (別のテキストファイルに記述して拡張子「css」で保存します。
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<LINK rel = "stylesheet"      (スタイルシートを使うことを宣言しています)
type = "text/css"       (スタイルシートの種類を示します)
href = "style.css">      (「style.css」というスタイル設定ファイルを読み込むことを示します)
</HEAD>
<BODY>
<H1>ようこそ</H1>
</BODY>
</HTML>

ようこそ  (表示される文字)

3つの方法のどれを用いてもひょい次結果は、上のように、H1タグで指定した部分の文字の色がになります

お話箱へ戻る