【スタイルシートを使ったホームページ作成♪】
−初心者の初心者による初心者のためのCSS入門−


◆第5回 文字の種類の指定、斜体にする。 ◆

その1 文字の種類を変える(指定する)
1)大見出しの文字の種類を指定してみようかの。
  今までは指定してなかったから、標準フォントで表示されていたはずぢゃ。
 だが、ここで問題がある!それは、見ている人のPCにそのフォントが入ってなければ、作成側が意図したフォントスタイルでは見てもらえないということぢゃ。
windowsとmacとは、組み込まれておるフォントが違うしのぉ、同じwindowsでも、違っておるんぢゃ。

自分のPCに、どんなフォントが入っているか見るには、スタート→コントロールパネル→フォントで確認できるが・・・フォントスタイルのファイル名ぢゃから、要領を得ないかもしれん。

ということで、ワードやエクセル、webページ作成ソフト、画像ソフトが入っている場合は、そのソフトのフォント指定のツールを見ると、フォントリストが表示されると思う。
そっちの方で見た方がいいぢゃろうの。


ということで、さっそくcssファイルぢゃぞ。
style4.cssを元にして、(別名で保存)、style5.cssファイルを作ってくだされ。
body {
background-color: white;
color: black;
}

h1 {
color: red;
font-size: xx-large;
font-family: "HG明朝E";
}

h2 {
color: blue;
font-size: large;
}

上では大見出しのフォントスタイルを、HG明朝Eに指定しておるのぢゃ。
ここは、みなさんのPCに入っている書体でテストしてみてくだされ。

前のと比較できるように、webページも、test5.htmlと名前を変えて保存しようかいのぉ。リンクするcssファイル名は、きちんとstyle5にするんぢゃぞい。

<html>
<head>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<h1>スタイルシートに挑戦!</h1>
<h2>フォントサイズ</h2>
テストページ
</body>
</html>

 
font-family: "フォントスタイル(書体)名"; で指定することにより、ページ全体でも小見出しでもそれぞれ指定(変更)できるわけぢゃ。
わかったかのぉ?


ぢゃが、こっちはその気になっておっても、見てくれる人のPCに入っているかどうかは分からんからの。この指定は、良いようで無用のような気もするが・・・・。
指定されたフォントが見ている人のPCにない場合は、指定しない場合と同様、標準フォントで表示されるぞい。
その2 文字を斜めにする
では、引き続き、style5.cssでいくぞい!



body {
background-color: white;
color: black;
}

h1 {
color: red;
font-size: xx-large;
font-family: "HG明朝E";
font-style: italic;
}

h2 {
color: blue;
font-size: large;
}


italic のところを nomal にすると、通常の書体になるぞい。



困った顔の助手
font-styleのところがなければ、normalとしなくても通常の書体ですが・・・




いきなり突っ込むんぢゃないわいっ!
ったく・・最近大人しくしとると思っとったら・・・・使う場合もあるんぢゃ!



にこにこ顔の助手
あはははは・・つい口がすべって・・・/^^;
お、お疲れ様でした。時間がありましたら、いろいろテストしてみてくださいね。
ということで、今回の最終webページはこうなってます。
次回は、見出しのちょっとした装飾についてを予定してます。
質問、間違いなどのつっこみ、訂正指摘など、BBSへお気軽にどうぞ。



Back INDEX Next◆ ページトップ