ファイル > 新規
カテゴリ：基本ページ 基本ページ：CSS
（ 作成 ）
/* サブページの基本デザイン用CSS Document */
● 見出しにスタイルを設定
まず、「body」タグと見出しタグ「h1」、「h2」、「h3」をそのままスタイルシートのセレクタに設定してプロパティと値を設定して見ましょう。
h1 {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 24px; /* フォントサイズの絶対指定 */
text-align: center; /* 文字の中央揃え */
}
などです。
全体は以下のとおりです。
[ ソースコードの参照 ]
ファイル > 新規保存
別名で保存：webpagebase1.css
場所：MySite
（ 保存 ）
HTML文書（shader.html）を開き、下記の<link>タグを<title>タグの下に記載します。
<head>
（省略）
<title>（省略）</title>
<link href="webpagebase1.css" rel="stylesheet" type="text/css">
</head>
この設定をするとページはこのように見えるでしょう。
[ ページの実例 ]
● 段落、アドレス、画像にスタイルを設定
次に、段落、アドレス、画像にスタイルを設定してみます。
p {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
address {
font-family: "Times New Roman", Times, serif;
font-size: 80%; /* フォントサイズの相対指定 */
}
p img {
float: left; /* 画像に文字が回りこむ設定 */
}
などです。
[ ソースコードの参照 ]
ファイル > 新規保存
別名で保存：webpagebase2.css
場所：MySite
（ 保存 ）
HTML文書（shader.html）を開き、下記の<link>タグを<title>タグの下に記載します。
<head>
（省略）
<title>（省略）</title>
<link href="webpagebase2.css" rel="stylesheet" type="text/css">
</head>
この設定をするとページはこのように見えるでしょう。
[ ページの実例 ]
● 不要な回り込みの解除
画像に文字が回りこむ設定をすると、見出しなども回り込むことが起こります。そのような回り込みを解除します。左右の回り込みを解除するには「clear: both;」というプロパティと値を次のセレクタに設定します。
h2 {
（省略）
clear: both; /* 回り込み解除 */
}
address {
（省略）
clear: both; /* 回り込み解除 */
}
.figure {
clear: both; /* 回り込み解除 */
}
全体は以下のとおりです。
[ ソースコードの参照 ]
ファイル > 新規保存
別名で保存：webpagebase3.css
場所：MySite
（ 保存 ）
HTML文書（shader.html）を開き、下記の<link>タグを<title>タグの下に記載します。
<head>
（省略）
<title>（省略）</title>
<link href="webpagebase3.css" rel="stylesheet" type="text/css">
</head>
さらに、見出し以下に複数の画像と説明文があると、これらも回り込みが起こるので、画像と説明文を対にして
<div class="figure">（画像と文章）</div>
のような「figure」クラスを設定します。
この設定をするとページはこのように見えるでしょう。一通り完成したページが表示されます。
[ ページの実例 ]
● 全体の横幅を固定し中央表示にする
このまでは、行がウィンドウの幅いっぱいに広がります。文章を読みやすくするには横幅を固定します。さらに、コンテンツ全体がブラウザの画面中央に配置されるように余白の設定をします。
body {
（省略）
}
.contents {
width: 640px; /* コンテンツ表示幅を固定 */
margin: auto; /* 余白を自動にしてコンテンツ全体を中央揃え */
}
ファイル > 新規保存
別名で保存：webpagebase4.css
場所：MySite
（ 保存 ）
HTML文書（shader.html）を開き、下記の<link>タグを<title>タグの下に記載します。
<head>
（省略）
<title>（省略）</title>
<link href="webpagebase4.css" rel="stylesheet" type="text/css">
</head>
さらに、スタイルシートの「.contents」セレクタに対応させて、次のように<body>タグの内容全体を「contents」クラスとして指定します。
<body>
<div class="contents">
（省略）
</div>
</body>
最後に、ハイパーリンクが設定してある文字などにマウスポインタが乗っかると色などが変わるホバー効果（複雑なロールオーバー効果はJavaScriptで実装するのが普通）も追加します。
a:hover { /* マウスポインタが乗った時の効果 */
color: #33EE22;
text-decoration: underline; /* 下線指定 */
}
などです。
全体は以下のとおりです。
[ ソースコードの参照 ]
この設定をするとページはこのように見えるでしょう。
[ ページの実例 ]