CSS(スタイルシート)のページ

    HPを多彩にするページ  　

CSSとはCascading Style Sheets の略で、ホームページのスタイルを統一的に記述するための言語です。

背景色、空白、フォントなどのレイアウトを、数百ページのサイトでも一挙に変更できますので、サイトのデザインの統一が数秒で可能になります。また、季節ごとに変化に富んだホームページを簡単につくることもできます。
　

全ページのスタイルを一括記述する

▼
style.cssを開き、自分のWebに保存して、FTPでサーバーにアップロードします。

▼
HTMLの各ページのhead区間に下の1行を書き込んでおきます。

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

▼
下をページの<body>区間に挿入して、ページをアップロードします。

<div class=veryimportant style="width: 640; height: 20">&nbsp;&nbsp;&nbsp;&nbsp;<font size="5">ここがタイトル欄</font>

▼
#FFCF00を変更すれば、ページの背景色がすべてのページにわたって変更できます。#FFFFFF を変更すれば、表の色がすべてのページにわたって変更できます。


style.cssの中身

BODY {
BACKGROUND-COLOR: #ffcf00  ←ページの背景色はゴールド。適当に変更
;
}
TABLE {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
WIDTH:640;  ←表の幅は640ピクセル。
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffffff;  ←表の背景は白
BORDER-RIGHT-WIDTH: 0px
;
}
DIV.veryimportant {  ←タイトル欄についての記述
FONT-SIZE: large;  ←フォントサイズは大
BACKGROUND: #7375ce;  ←行の背景色、やわらかい紫
COLOR: #ffffff  ←行のフォントは白
;
}
A:hover {  ←ホバー。リンクテキストをポイントすると変色
FONT-WEIGHT: bold;  ←リンクテキストをポイントすると太字に変化
COLOR: #f00ca0   ←リンクテキストをポイントすると赤に変色
;
}

}

リンク集