TAG index
ホームページ作成ガイド

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / 基本設定(CSS)
基本設定(CSS)


スタイルシートでページの基本設定を行ってみます。タグの部分については、「基本設定」をご覧ください。

※ここで使用しているスタイルシートについての詳細は、「ページ全般」「テキスト・フォント」「リンク」の各カテゴリーをご覧ください。


 設定方法
この例では、ページの背景色、ページの背景画像、ページのマージン、全体の文字サイズ、全体の文字色、リンクの文字色などを、スタイルシートで設定しています。

BODY { }
ページの背景色と背景画像、マージンなどは、BODY { } 内で指定します。

BODY, TD, TH { }
全体の文字サイズと文字色は、 BODY, TD, TH { } 内で指定しています(TDTH は表のセルを指しています)。ページ内に表を置く予定がない場合は、この2つは BODY { } 内に記述しても構いません。

A:*** { }
リンク文字の色は、A:*** { } 内で指定します。通常(未訪問)のリンク、訪問済みのリンク、マウスでポイントしたとき、クリックした瞬間、この4つの状態別にリンクの色を設定することができます。

※スタイルシートの値を変更する際には、ソース内のコメントを参考にしてください。


 ソース
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>Webサイト</TITLE>

<STYLE TYPE="text/css">
<!--

BODY {
background-color: #FFFFFF; /* ページの背景色 */
background-image: url(back.gif); /* ページの背景画像 */
margin: 3px; /* ページのマージン */
}

BODY, TD, TH {
font-size: 1em; /* 全体の文字サイズ */
color: #2B2B2B; /* 全体の文字色 */
}

A:link { color: #0000FF; } /* リンク文字の色 */
A:visited { color: #0000A0; } /* アクセス済みの色 */
A:hover { color: #FF0000; } /* ポイントしたときの色 */
A:active { color: #FF8000; } /* クリックした瞬間の色 */


-->
</STYLE>

</HEAD>
<BODY>


ここにページの内容を入れていきます


</BODY>
</HTML>

関連ページ
スタイルシート - ページの背景に色を付ける
スタイルシート - ページの背景に画像を使う
スタイルシート - ブラウザの枠とのマージンを指定する
スタイルシート - 文字の色を指定する
スタイルシート - 文字のサイズを指定する
スタイルシート - リンク文字の色を指定する


ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲