前回まではXHTMLについてでしたが、今回はいよいよデザインを担当するＣＳＳのお話です。
ＣＳＳはＨＴＭＬファイルとは別のファイルに書き込んでいきます。
そしてそれをＨＴＭＬファイルにつなげます。
- ＣＳＳファイルの用意
- エディタを開いて1行目に半角で次のように記述する。
@charset "Shift_JIS"; - このＣＳＳファイルを「第１回 いきなりですが、、、」で保存したＨＴＭＬファイル「20080808_01.html」と同じフォルダ（xhtml）内に「css」という名のフォルダを作り、その中にに拡張子を「.css」として「test.css」という名前で保存する。
- ひとまずこの「test.css」は閉じる。
- HTMLファイルとCSSファイルをつなげる
- 「第１回 いきなりですが、、、」で保存したHTMLファイル「20080808_01.html」をエディタで開く。
- 5行目の先頭にカーソルを合わせて[Enter]キー押して改行する。
- その場所に次のように記述する。
<meta http-equiv="Content-Style-Type" content="text/css" /> - 7行目の先頭にカーソルを合わせて[Enter]キー押して改行する。
- その場所に次のように記述する。
<link rel="stylesheet" type="text/css" href="css/test.css" media="screen,print" /> - 上書き保存する。
これで、ＨＴＭＬファイルとＣＳＳファイルがつながりました。
<head>と</head>の間の記述が次のようになったはずです。
(赤字が今回追加したところ)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>はじめてのXHTML/CSS</title>
<link rel="stylesheet" type="text/css" href="css/test.css" media="screen,print" />
</head>
＜見出しの文字を赤くする＞
-
再び「test.css」をエディタで開く。
- 先ほど１行目に@charset "Shift_JIS";記入した次の行を数行改行し次のように記述する。
h1 {
color: red;
}
- 「20080808_01.html」をダブルクリックやシングルクリックでブラウザから開く。
- 見出しの"はじめてのXHTML/CSS"の部分が赤くかわっていることを確認する。
＜見出しの文字サイズを変更する＞
- 先ほどの「color: red;」に続けて次のように記述する。（赤字が追加分）
h1 {
color: red;
font-size: 200%;
}
-
ブラウザの表示を更新する。
-
見出しの"はじめてのXHTML/CSS"の部分の文字が大きくなっていることを確認する。
＜見出しの文字フォントを変更する＞
- 先ほどの「font-size: 200%;」に続けて次のように記述する。（赤字が追加分）
h1 {
color: red;
font-size: 200%;
font-family: Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
}
-
ブラウザの表示を更新する。
-
見出しの"はじめてのXHTML/CSS"の部分の文字フォントがかわったことを確認する。
（色やサイズに較べてブラウザの表示を更新したときの変化が小さいので注意して確認しないとわからない）
まとめ
- 記述方法
h1 { ------------------------セレクタ（どこの）
color:red;
} ｜ ?-----------------値（どうする）
?------------------------プロパティ（なにを）
"{" と "}"の間の記述がデザインの内容となる。
プロパティと値の間はコロン（:）で区切る。
値の後ろにはセミコロン（;）を付ける。
最後の"}"を忘れ無いこと。
- h1
これはHTMLファイルに記述した<h1>と</h1>で挟まれた中身に対して適応されます。 - 半角スペース
わかりにくいのですが、"h1"と"｛"の間には、半角スペースが入っています。
これは、ソースを見やすくするためと、Internet Explorerのバグを避けるためですので必ずいれてください。
それ以外は改行せずに一行で
h1 {color: red;font-size: 200%;font-family: Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;}
と記述しても問題はありませんが、ソースが見にくくなるので、セミコロン（;）の後で改行するようにしましょう。 - color:red;
colorはテキストの色を変える時に使います。コロン（:）とセミコロン（;）ではさんだ部分の色が適応されます。
色の指定は次に示すあらかじめ用意された16色のほかにも使うことができます。
それはRGB値といい#FF0000 のように、光の三原色である赤(R)、緑(G)、青(B)の配分を00〜FFまでの16進数で記述も可能です。
一般に、値が大きいと明るい色、小さいと暗い色、RGBの値の差が大きいとケバケバしい色、差が小さいと淡い色になります。
Windowsのペイントブラシのカラーパレットなどを利用して、好みの色をみつけることができます。
Red Lime Blue White Maroon Green Navy Silver Yellow Aqua Fuchsia Gray Olive Teal Purple Black - font-size: 200%;
フォントのサイズを変えるものです。
200%という指定はブラウザの初期値サイズから計算して200％の大きさになります。任意の大きさを指定できます。
また数値にpxやemやexなどの単位をつけた指定もできます。
pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。数値には負の値は指定できません。
そのほかにxx-small、x-small、small、medium、large、x-large、xx-largeの7段階のキーワードでの指定も可能です。
mediumが標準サイズです。1段階上がると1.2倍のサイズになります。また、smaller、largerを指定すると大きさが1段階上下します。 - fobt-family:Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
フォントの種類を指定するものです。
｢ＭＳ ゴシック｣や「Arial」や「Verdana」のようにフォント名で指定します。
フォント名にスペースが含まれている場合や日本語の場合には、ダブルクォーテーション（ " ）またはシングルクォーテーション（ ' ）で囲むようにしてください。
また次のようなフォントの種類を表すキーワードで指定することもできます。
sans-serif･･････ゴシック系のフォント
serif････････････明朝系のフォント
cursive･････････筆記体・草書体のフォント
fantasy･････････装飾的なフォント
monospace･････等幅フォント
フォントの種類はカンマ（ , ）で区切って複数の候補を並べ、 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。
また指定したフォントがユーザーの環境にインストールされていない場合には、ブラウザで設定されたデフォルトのフォントで表示されます。
次回につづく。
コメントする