CSSでホームページをデザインする。

CSS(カスティングスタイルシート）は、あなたのホームページをクールにデザインするのに必要になるスキルです。
最初は少しむつかしく感じるかもしれませんが、理屈さえ解れば簡単なのでがんばって理解してください。

ホームページ作成ｈｔｍｌTop お気に入りに追加

デザインする要素の指定方法

セレクタとは？

セレクタとは、そのプロパティをどの要素に適用するかを決定する為のものです。

たとえばpタグにマークアップされた文章を赤色にするには、

p { color: red; } と指定します。（この場合pがセレクタになります。）

セレクタは、様々な指定方法があるので、以下で解説します。

全称セレクタ

全称セレクタは、あらゆる要素名とマッチし＊で指定します。

全称セレクタだけが唯一の構成条件ではない場合に限り、アスタリスクを省略することができます。

たとえば*{font-size:20px;}と指定すれば、すべてのテキストが20ｐｘで表示されます。

タイプセレクタ

タイプセレクタは、1つの要素名のみから成りhtml構造内に記述した要素すべてとマッチします。

たとえばp { font-size:20ｐｘ; }と指定すれば、pでマークアップされたすべてのテキストが20ｐｘで表示されます。

クラスセレクタ

指定したclass属性値を持っているあらゆる要素にマッチします。

クラス名の前に必ず.（ドット記号）を入れて記述します。

たとえばhtml構文のp要素に指定する場合html構文を
<p class="size">○○○○○○○○○<p>とし
cssファイルで.size{ font-size:20ｐｘ; }と指定するとclassで指定した構文が20pxで表示されます。

IDセレクタ

IDセレクタは、基本的にはクラスセレクタと同じですが、ページ内で一箇所しか指定できないとゆう制約があり、一方クラスセレクタは、何箇所でも指定できるとゆう特徴があります。

つまり文書中の特定の一箇所にのみ与えられる名前をIDと言います。

ID名の前に必ず#（ハッシュ記号）を入れて記述します。

子孫セレクタ

子孫セレクタは、ある要素の子孫にあたる要素のみをマッチさせたい場合に使用します。

たとえばp要素に含まれるstlong要素のみにマッチさせる場合は、次のように記述します。

p stlong { color: #FF0000; }pとstlongの間にスペースを入れます。

p要素内のすべてのstlong要素が赤い文字で表示されます。

疑似クラス

擬似クラスを使うと訪問者の操作によって状態が変るように設定できます。

例えば

未訪問のリンクの色を指定する　a:link { color:色; }
訪問済みのリンクの色を指定する　a:visited { color:色; }
クリックしている間のリンクの色を指定する　:active { color:色; }
カーソルが乗っている状態の色を指定する　:hover { color:色; }

上記のように設定すると訪問者の操作によってアンカーテキストの色が変化します。