 カスケードスタイルシートを使う（CSS）
『スタイルシート』はホームページの文字の大きさや色といったページのデザインに関わる部分を指定して見栄えをよくするものです。 見出しや本文、リストなどの文書の構造を決める『ＨＴＭＬ』と切り離すことで
大量にあるページのデザインを一度に変更することができるのです。
また、ＳＥＯ（検索エンジン最適化）の面からも効果があるので是非とも知っておいてくださいネ♪
『私の失敗＆苦労』の「Ｈ１タグ」と「外部ファイル」でも紹介していますが、このページで もう一度解説したいと思います (#^.^#)
↓ 「経理マン(^-^;)」の兄弟サイトの場合（例） ↓
☆☆ ＨＴＭＬファイル ☆☆
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
<TITLE>リンクについて＆リンク集 - ネット通販人気ショップガイド
-</TITLE>
<META name="KEYWORDS"
content="リンク,link,通販,ネット,人気,ショップ,ガイド,格安,激安,割安">
<META
name="DESCRIPTION" content="リンクについてのご連絡です。">
<META
http-equiv="Content-Style-Type" content="text/css">
<LINK
rel="stylesheet" type="text/css"
href="../image/style.css">
</HEAD>
<BODY>
<H1>『ネット通販人気ショップガイド』とのリンクについて。
お知らせがあります♪</H1>
<H2>リンクについて</H2>
・
・
・
</BODY>
</HTML> |
※ スペースの加減で一部編集してあります。
☆☆ ＣＳＳファイル ☆☆
bogy
{
font-size: 80%;
}
h1 {
font-size:
80%;
}
h2{
font-size:
140%;
} |
↑ こんな感じで作成しています ↑
同じ色同士が対応。 「ＨＴＭＬ」で書かれた内容に対して「ＣＳＳ」でデザインの指示をしています。
→ <LINK rel="stylesheet" type="text/css" href="../image/style.css"> ←
※ hrefには読み込みたいスタイルシートファイルを指定してください。
上記の場合は「image」フォルダの中に「ＣＳＳ」ファイルを保存してある状態です。 なので、「image」フォルダのＣＳＳを編集することで全てのページの編集が一度で完了してしまいます！
『スタイルシート』は 【ｈ１】などの「セレクタ」と【 ｛ 】〜【 ｝ 】 までが１つという構成になっています♪ 「セレクタ」にデザインを加えたいＨＴＭＬのタグを指定して、どのようなデザインを加えるのかを【
｛ 】〜【 ｝ 】 でしてして下さいネ └|∵|┐
|
|
 更新情報♪
|
|
|
知っておくと得をする「知識」
初心者でも分かるホームページ作成
