清水健太郎

HOME　　

CONTACT　　

SITEMAP

　ホーム　>　講義情報　>　CSS

CSS

▼スタイルシートとは
 ▼スタイルシートの記述方法
 ▼スタイルシートを記述する場所
 ▼スタイルシート記述例

スタイルシートとは

Webページは基本的にはHTMLタグで構成されており、文書構造やWebデザイン、配色等もHTMLで指定する事が出来ます。しかし、HTMLの中でWebデザイン等も全て指定しようとすると、以下のようなデメリットが発生します。

HTML内に文書とデザインが混合され、コードが複雑化する
同じデザインを複数箇所に指定する際、毎回同じ設定をする必要がある
Webデザインを変更する場合、全てのページを修正しなければならない

このようなデメリットを払拭するために考えられたのがスタイルシート（CSS）です。CSSを利用すると、HTMLは文書構造、CSSはデザイン、という様に双方を完全に独立させることができ、その結果管理が行い易くなります。

このページの一番上へ

スタイルシートの記述方法

セレクタ { プロパティ:値 }

1行でCSSを書く
上記の記入方法に従ってCSSを記述します。また、一つのセレクタの中で複数の設定を行う場合は、「；」で区切って指定します。

サンプル
H1 { font-size:12px }
H1 { font-size:14px ; color:red }

複数行でCSSを書く
複数の設定を行う場合、上記のように1行の中だけで設定しても構いませんが、複数行にわたって書く事も可能です。結果的に表示されるページに違いはないので、自分で見やすく、管理し易い方法を選んで構いません。但し、各値の最後に「；」を入れるのを忘れないように注意して下さい。

サンプル
H1 {
　font-size : 12px ;
　color : red ;
}

このページの一番上へ

スタイルシートを記述する場所

インライン　　重要度【低】
HTML内で、要素に直接CSSを記述する方法です。但し、HTMLとCSSを分離出来るメリットが生かされていない為、実用性は低いです。

サンプル
<H1 style="font-size:16px; color:blue">サンプル</H1>

ヘッダー　　重要度【中】
各ページのヘッダー（<HEAD>>～</HEAD> までの間）にCSSを記述すると、ページごとにスタイルシートを反映出来ます。ヘッダーにCSSを入力する場合、その記述がCSSである事をブラウザに理解させる必要がある為、必ず <style type="text/css">～</style> で囲う必要があります。

サンプル
<style type="text/css">

</style>

外部スタイルシート　　重要度【高】
CSSを記述したデータを別途用意し、一括でHTMLファイルに読み込む事が出来る為、作成したデータを複数のページで共有して使うことが出来ます。スタイルシートのメリットを最大限活用している事から、最もよく使われる方法です。
CSSを記述したデータは「●●●●.css」と、ファイル名の拡張子を「.css」にします。
また、読み込む側のHTMLデータには、 <HEAD>～</HEAD> の間に、

<link rel="stylesheet" href="●●●●.css" type="text/css">

と記述する事で、該当するCSSデータを読み込んでくれます。

このページの一番上へ

スタイルシート記述例

フォントサイズ
BODY { font-size : small }
P { font-size : 30px }
DIV { font-size : larger }

フォントカラー
H1 { color : red }
H3 { color : #000000 }

フォントスタイル
H1 { font-weight : bold }
H6 { font-style : blue }

背景色
BODY { background-color : #000000 }

背景画像
BODY { background-image : url(●●●●.gif) }

リンク
a:link { color:blue }
a:visited { color:orange }
a:hover { color:red; background-color:orange }

このページの一番上へ