外部スタイルシートを作成する
外部CSSを適用するためには、拡張子が.cssのファイルを作成する必要があります。
CSSファイルの作り方
作り方は、htmlファイルを作るのと同じで、terapadを開いてから文字/改行指定保存→UTF-8Nを選び→style.cssと名前をつけて保存すればOKです。（とりあえず何も入力せずに保存してください）
また、新たにstyleフォルダを作成して、style.cssをstyleフォルダの中へと移動させておきましょう。
この時点での階層構造は、
のようになっていることを確認してください。
CSSのセレクタとは
ここまでできたら、先ほど何も書かずに保存したstyle.cssをterapadで開いて以下の文を書き込んでみましょう。
/* Style.css内の記述 */
@charset "UTF-8";
* {
border:0;
margin:0;
padding:0;
line-height:1.5em;
font-weight:normal;
font-style:normal;
}
@が頭に付いた@規則はスタイルシートの文章の中で一番初めに記述します。@charsetはエンコードを指定する記述です。
*はユニバーサルセレクタ（universal selector）と呼ばれ、全てのタグに共通して指定したいスタイルを指定することができます。
HTMLの各要素に対してスタイルを適用させる時は、タグではなく、セレクタ（selector）と呼びます。
例えば、<h1></h1>タグに対して文字の大きさを16pxに変えるスタイルを適用したいのであれば、h1セレクタに対してスタイル（font-size:16px;)
を指定するということができます。
/* Style.css内の記述 */
h1 {
font-size:16px; /* 文字サイズを16pxに */
}
数値の単位にはpx（ピクセル）以外にem（標準から何倍の大きさか）、％表示も使うことができます。pxとemの対応は以下のとおり。
| px | em |
|---|---|
| 14px | 0.875em |
| 16px | 1em |
| 24px | 1.5em |
| 32px | 2em |
例えば、font-sizeを75％と指定した場合、デフォルトのフォントサイズが16pxのブラウザなら、12pxで表示されることを期待しています。
パーセント表示することのメリットは、IEユーザーが「表示」メニューからフォントサイズを変更することができるということのみであるので、ピクセル指定だけでも差ほど問題ないように思えます。
Windowsのデフォルトフォントサイズは16pxですが、MacのFirefox、Safari、Netscapeに関しては、14px相当のフォントサイズをデフォルトにしているため、注意が必要です。
CSSプロパティは沢山あるため、その都度リファレンスで確認しながら行うとよいでしょう。（お勧めはクイックリファレンス）
CSSの適用
それではindex.htmlに対してスタイルシートを適用してみましょう。style.cssの読み込みはhead内にて行います。
スタイル適用のため、情報をWiki（果物、りんご、みかんの項）から引用して充実させましたので、下記をコピーしてお使いください。（コピーする際、©記号だけは手打ちで直していただく必要があります。）
サンプルです。
<!--XHTML1.0-->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>果物info</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="果物は種類も多く栄養も高いです" />
<meta name="keywords" content="果物,種類,栄養,りんご,みかん" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<h1>果物info</h1>
<p>果物（くだもの）は、食用になる果実。フルーツ（英: fruits）、水菓子（みずがし）、木菓子（きがし）ともいう。狭義には樹木になるもののみを指し、農林水産省でもこの定義を用いている。</p>
<h2>りんごについて</h2>
<p>リンゴの木は、落葉高木で晩春頃に白い5弁花が開花する。リンゴの果実は直径約3-15 cm、重さ約35-1000 g。色は赤や黄緑で、または黄色をしている。熟すると蝋状の分泌物に覆われる。</p>
<h3>りんごの種類</h3>
<p><a href="apple/apple1.html">ふじのページへ</a></p>
<h3>りんごの栄養</h3>
<p>食物繊維やビタミンC、ミネラル、カリウムが豊富。1日1個のリンゴは医者を遠ざける (An apple a day keeps the doctor away.)という諺があるように、リンゴは栄養価が高い果実として食されてきた。</p>
<p>リンゴに含まれるリンゴポリフェノールには脂肪の蓄積を抑制する効果があるともいわれる</p>
<h2>みかんについて</h2>
<p>甘い柑橘ということから漢字では「蜜柑」と表記される。古くは「みっかん」と読まれたが、最初の音節が短くなった。</p>
<p><small>Copyright © 2012 nkdesk all right reserved.</small></p>
</body>
</html>
<!--HTML5-->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>果物info</title>
<meta charset="utf-8" />
<meta name="description" content="果物は種類も多く栄養も高いです" />
<meta name="keywords" content="果物,種類,栄養,りんご,みかん" />
<link rel="stylesheet" href="style/style.css" media="all" />
</head>
<body>
<h1>果物info</h1>
<p>果物（くだもの）は、食用になる果実。フルーツ（英: fruits）、水菓子（みずがし）、木菓子（きがし）ともいう。狭義には樹木になるもののみを指し、農林水産省でもこの定義を用いている。</p>
<h2>りんごについて</h2>
<p>リンゴの木は、落葉高木で晩春頃に白い5弁花が開花する。リンゴの果実は直径約3-15 cm、重さ約35-1000 g。色は赤や黄緑で、または黄色をしている。熟すると蝋状の分泌物に覆われる。</p>
<h3>りんごの種類</h3>
<p><a href="apple/apple1.html">ふじのページへ</a></p>
<h3>りんごの栄養</h3>
<p>食物繊維やビタミンC、ミネラル、カリウムが豊富。1日1個のリンゴは医者を遠ざける (An apple a day keeps the doctor away.)という諺があるように、リンゴは栄養価が高い果実として食されてきた。</p>
<p>リンゴに含まれるリンゴポリフェノールには脂肪の蓄積を抑制する効果があるともいわれる</p>
<h2>みかんについて</h2>
<p>甘い柑橘ということから漢字では「蜜柑」と表記される。古くは「みっかん」と読まれたが、最初の音節が短くなった。</p>
<p><small>Copyright © 2012 nkdesk all right reserved.</small></p>
</body>
</html>
CSSプロパティ（line-height,font-weight,font-style）
先ほどの例ででてきたエンコードとユニバーサルセレクタの中身について少し詳しく説明します。
CSSの記述はセレクタ{}の中に命令を記述していきますが、1行が1つの命令というわけではなく、;（セミコロン）で区切ったところまでが一つの命令になります。
各プロパティ（marginとか）と値の間には：（コロン）を入れます。
/* Style.css内の記述 */
* {
border:0;
margin:0;
padding:0;
line-height:1.5em;
font-weight:normal;
font-style:normal;
}
各プロパティの説明ですが、簡単なところから行きますと、
line-heightは「行の高さ」を指定します。これが大きいとレポート用紙のB5からA4になるように行自体の幅が広くなります。
font-weightは「文字の太さ」を指定します。normalが普通、boldが太字、lighterが細め、100～900までの数値のいずれかで指定します。 （例：normal＝400、bold＝700）。
font-styleは「文字体」を指定します。normalが普通、斜体ならitalicです。
CSSプロパティ（border、margin、padding）
border、margin、paddingの違いは少し難しいかもしれませんが、とても重要なのできちんと理解してください。
まず最初にborderを覚えるとよいかもしれません。borderは指定した要素の周りに線を引くことができます。
h1 {
border:solid 1px #000; /* h1タグの周りに、1pxの黒色の実線 */
border:dotted 1px #000; /* h1タグの周りに、1pxの黒色の点線 */
border:double 3px #000; /* h1タグの周りに、3pxの黒色の二重線 */
}
また、枠線だけでなく、下線だけ、上線だけを引くことも可能です。その場合は、「border-○○○」というように、○○○にtop,right,left,bottomを入れて指定します。
h1 {
border-top:solid 1px #000; /* h1タグの上に、1pxの黒色の実線 */
border-bottom:solid 1px #000; /* h1タグの下に、1pxの黒色の実線 */
border-right:solid 1px #000; /* h1タグの右に、1pxの黒色の実線 */
border-left:solid 1px #000; /* h1タグの左に、1pxの黒色の実線 */
}
もちろん、4行全て記述すれば枠線を描くことになります。
marginとpaddingは、このborder線を基準に、文字とborderの間の余白をpadding、borderより外の余白をmarginとしています。
この二つの余白の違いが明確にわかるのが、背景色を指定する場合です。
背景色はborderよりも内側領域に指定されますので、paddingで余白を拡大すれば背景色も広がります。marginで余白を拡大すると文字や画像の間隔が広がります。
p {
padding:20px; /* borderの内側上下左右に20pxの余白 */
}
p {
margin:20px; /* borderの外側上下左右に20pxの余白 */
}
また、marginとpaddingは上下左右を一度に指定することが可能です。
p {
margin:1px 2px; /* 上下に1px、左右に2pxの余白 */
margin:1px 2px 3px 4px; /* 上に1px、右に2px、下に3px、左に4pxの余白 */
}
4方向全て指定するパターンは、上、右、下、左という風に時計回りに記述します。慣れるまではとっつきづらいとおもいますが、なれると便利です。
h1やpといった見出し・段落タグに限らず、多くのタグには自動でマージン（margin）が設定されていて、これが返ってレイアウトする上での弊害になることもあります。
そこでユニバーサルセレクタの中で全て０に設定（リセット）して、あとで各要素セレクタ（h1等）に対して個別にプロパティ値（margin-top:10px等）を指定する方法を取ります。
CSSプロパティ（width,text-align,background）
ユニバーサルセレクタの中身がわかったことろで、各要素に対してプロパティを指定していきましょう。
複数の要素間で共通するプロパティは、カンマ区切りでまとめて指定することができます。
/* Style.css内の記述 */
@charset "UTF-8";
* {
border:0;
margin:0;
padding:0;
line-height:1.5em;
font-weight:normal;
font-style:normal;
}
body {
text-align:center;
background:#eef;
}
h1,h2,h3,p {
width:600px;
margin:auto;
text-align:left;
}
h1,h2,h3 {
font-weight:bold;
}
h1 {
font-size:28px;
}
h2 {
font-size:18px;
}
h3 {
font-size:16px;
}
p {
font-size:15px;
}
widthとheightは画像のところで出てきたように、pxやem、%単位で要素の幅や高さを指定することができます。
text-alignは文章を左寄りに書くか、右寄りに書くか、または中央に書くか（インデント）が指定できます。
p {
text-align;left /* 左揃え */;
text-align;right /* 右揃え */;
text-align;center /* 中央 */;
}
backgroundは、その要素の背景を指定することのできるプロパティです。
背景色の指定はbackground-colorで、背景画像の指定はbackground-imageで指定してもよいですが、同時に指定する場合ケースはもちろんのこと、単一指定であってもcolorとかimageとかは抜いて、backgroundの値として指定するのが楽でよいかと思います。
p {
background-color:#00f; /* 背景色を青色に */
background-image:url(abc.jpg); /* 背景画像をabc.jpgに */
background-repeat:no-repeat; /* 背景の繰り返し処理*/
background-position:left top; /* 背景の表示位置 */
background:url(abc.jpg) #00f; /* 上二つをまとめて指定 */
background:url(abc.jpg) -20px 10px no-repeat; /* 横に-20px、右に10px移動したところにabc.jpを表示 */
background:url(abc.jpg) left top repeat-x; /* abc.jpgを左上を起点に要素の幅だけ繰り返し表示 */
}
文字の色を変えるタグは、「color:#RGB;」、背景の色を変えるタグは、「background-color:#RGB」もしくは「background:#RGB」で、#の後のRGBはRed（赤）,Green（緑）,Blue（青）の略で、3色それぞれが0,1,2・・・9,a・・fまでの16段階（16進法ですね）の濃さを持っています。
0は色がないことで、fは色が最も濃いことを表します。「#RGB＝#00f」の場合は、赤と緑に色がなく、青がMAXなので、真青色となります。
#の後の数字の桁数は本来6桁（R＋G＋B＝2桁＋2桁＋2桁）まであります。上では3桁しか書いてませんが、これは#0000ffは#00fと同じなのでそうしているだけです。
もちろん#0000f2とかだったら3桁に直すことはできません。
3桁でも結構間に合いますが、3桁で表現できない色を使いたい方はペイントソフトで好きな色を指定して表示される6桁の数字を使うとよいでしょう。
後引っかかる点は、margin:auto;という部分ではないでしょうか。
autoの意味は自動でマージンが広がるという意味で、ディスプレイの幅が1024pxだとして、400pxの画像を表示させたい時にmarginをautoにすると両幅に均等のマージンが確保されて中央配置されます。
bodyにtext-align:center;を指定して、その下層のブロックレベル要素に対して、widthを指定してからmargin:auto;を指定すると中央に配置できるというテクニックです。
結構よく使われるので覚えておくとよいかと思います。
ここまでのサンプル。
サブページへのスタイル適用
まず、今出てきたHTMLタグやCSSプロパティで最大限見た目をよくしようと、style.cssの中身を以下のように書き換えます。
/* Style.css内の記述 */
@charset "UTF-8";
* {
border:0;
margin:0;
padding:0;
line-height:1.5em;
font-weight:normal;
font-style:normal;
}
body {
text-align:center;
background:#eef;
}
h1,h2,h3,p {
margin:auto;
text-align:left;
}
h1,h2,h3 {
font-weight:bold;
}
h1 {
font-size:28px;
width:600px;
background:#333;
color:#fff;
border-bottom:solid 5px #fff;
margin-top:10px;
}
h2 {
font-size:18px;
width:580px;
margin-top:15px;
border-left:solid 10px #00f;
border-bottom:solid 1px #00f;
padding-left:10px;
color:#00f;
}
h3 {
font-size:16px;
width:570px;
margin-top:10px;
border-left:solid 10px #000;
border-bottom:dotted 1px #000;
padding-left:10px;
}
p {
font-size:15px;
width:580px;
margin-top:5px;
}
p small { /* 要素の中の子要素（or属性）の指定は半角スペースを入れて */
font-size:14px;
}
※他の要素同士のmarginは打ち消しあうので、h3にmargin-bottom:10px;指定して、その次に出てくるpにmargin-top:10pxを指定しても、10+10=20ではなく、10pxになります。
今の状態ではトップページのみにしかスタイルが適用されていないと思います。
トップページ用のstyle.cssをサブページに指定してもよいのですが、トップページのh1とかp要素の色や幅がサブページに同じように問答無用に適用されると、自然とトップとサブが同じようなデザインになってしまいます。
それでは問題なので、通常トップページ用のCSSとサブページ用のCSSは別に用意します。（コピーで構いません）
サブページのhead内に、
<!--XHTML1.0--> <head> <link rel="stylesheet" type="text/css" href="../style/substyle.css" media="all" /> </head> <!--HTML5--> <head> <link rel="stylesheet" href="../style/substyle.css" media="all" /> </head>
階層に注意してください。
すると、サンプルのようになります。
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
