◆ スタイルシート（ＣＳＳ）を複数のページの全体に適用する方法 ◆
この実践ページでは、スタイルシートファイル（ＣＳＳファイル）を作って、そのＣＳＳファイルを
作成するＨＴＭＬファイルのヘッダーにＬｉｎｋタグを使ってリンクさせる形で
ページ全体に適用（反映）する方法を試してみました。
この方法は、複数のページに適用する事ができます。
スタイルシートファイルで定義していない部分の文字の色とサイズは
このページのベースとなる基本（ ＜body＞ 〜 ＜/body＞ ） に設定したものです。
★ このページに適用したスタイルシートファイル（ＣＳＳファイル）の中身
ｈ２｛ｃｏｌｏｒ：ｏｒａｎｇｅ｝
ｈ３｛ｃｏｌｏｒ：ｇｒｅｅｎ｝
ｈ４｛ｃｏｌｏｒ：ｂｒｏｗｎ｝
ｐ{ｃｏｌｏｒ：ｂｌｕｅ；ｆｏｎｔ−ｓｉｚｅ：１０ｐｔ｝
※ スタイルの指定のみの記述でＯＫ！ その他の記述は必要ないそうです。
※ 上記のような形で作成し終わったら、ファイル名の後ろに拡張子「．ｃｓｓ」を付けて保存します。
※ ＣＳＳファイルは、≪ ジオクリエーター ≫では作れません！
≪ アドバンストＨＴＭＬエディタ ≫や≪ メモ帳 ≫などの、テキストエディタで作ってね♪
自分のパソコンの≪ メモ帳 ≫で作った場合は、サーバーにアップロードする作業が必要です。
★ 本文中で、次のタグを使った場合は以下のように、スタイルシートファイルに定義（指定）しました。
◎ 見出し≪Ｈ２≫を使った場合は、文字の色は「オレンジ」
◎ 見出し≪Ｈ３≫を使った場合は、文字の色は「グリーン」
◎ 見出し≪Ｈ４≫を使った場合は、文字の色は「ブラウン」
◎ 前後に１行の空きがある段落タグ＜Ｐ＞を使った場合
文字の色は「ブルー」、文字のサイズは「 １０ポイント 」に指定しました
このページのソースは下に記載しているので、興味のある方は見てね♪
−−−−−−−−− 以下 ↓ が、このページのソースで〜す♪ −−−−−−−−−−−−−−−
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>スタイルシート（ＣＳＳ）・適用方法≪実践ページ：外部ＣＳＳファイルをリンクさせて複数のページの全体に適用する方法 ≫</title>
<link rel="stylesheet" type="text/css" href="stylesheetfile-1.css">
</head>
<body bgcolor="white" text="gray">
<basefont size="3">
<div align="left">
<br>
<br>
<h2>◆ スタイルシート（ＣＳＳ）を複数のページの全体に適用する方法 ◆</h2><br>
<br>
この実践ページでは、スタイルシートファイル（ＣＳＳファイル）を作って、そのＣＳＳファイルを<br>
作成するＨＴＭＬファイルのヘッダーにＬｉｎｋタグを使ってリンクさせる形で<br>
ページ全体に適用（反映）する方法を試してみました。<br>
<br>
この方法は、複数のページに適用する事ができます。<br>
<br>
スタイルシートファイルで定義していない部分の文字の色とサイズは<br>
このページのベースとなる基本（ ＜body＞ 〜 ＜/body＞ ） に設定したものです。<br>
<br>
<b>★ このページに適用したスタイルシートファイル（ＣＳＳファイル）の中身</b><br>
<br>
<p>
ｈ２｛ｃｏｌｏｒ：ｏｒａｎｇｅ｝<br>
<br>
ｈ３｛ｃｏｌｏｒ：ｇｒｅｅｎ｝<br>
<br>
ｈ４｛ｃｏｌｏｒ：ｂｒｏｗｎ｝<br>
<br>
ｐ{ｃｏｌｏｒ：ｂｌｕｅ；ｆｏｎｔ−ｓｉｚｅ：１０ｐｔ｝<br>
<br>
</p>
<br>
※ スタイルの指定のみの記述でＯＫ！ その他の記述は必要ないそうです。<br>
<br>
※ 上記のような形で作成し終わったら、ファイル名の後ろに拡張子「．ｃｓｓ」を付けて保存します。<br>
<br>
※ ＣＳＳファイルは、≪ ジオクリエーター ≫では作れません！<br>
≪ アドバンストＨＴＭＬエディタ ≫や≪ メモ帳 ≫などの、テキストエディタで作ってね♪<br>
自分のパソコンの≪ メモ帳 ≫で作った場合は、サーバーにアップロードする作業が必要です。<br>
<br>
<br>
<b>★ 本文中で、次のタグを使った場合は以下のように、スタイルシートファイルに定義（指定）しました。</b><br>
<h2>◎ 見出し≪Ｈ２≫を使った場合は、文字の色は「オレンジ」</h2><br>
<h3>◎ 見出し≪Ｈ３≫を使った場合は、文字の色は「グリーン」</h3><br>
<h4>◎ 見出し≪Ｈ４≫を使った場合は、文字の色は「ブラウン」</h4><br>
<p>
◎ 前後に１行の空きがある段落タグ＜Ｐ＞を使った場合<br>
<br>
文字の色は「ブルー」、文字のサイズは「 １０ポイント 」に指定しました<br>
</p>
<br>
このページのソースは下に記載しているので、興味のある方は見てね♪
<br>
<br>
<br>
−−−−−−−−− 以下 ↓ が、このページのソースで〜す♪ −−−−−−−−−−−−−−−<br>
]]>
|
|
|