kalvis01のブログ

kalvis01のブログ

ブログの説明を入力します。

Amebaでブログを始めよう!

スタイルシートを作ってみます。

スタイルシートとは、文字のサイズや色、その他書式を別に定義したものです。


<p><font size="5" color="green">3行目</font></p>

例えば、文字のサイズと色は上記の方法で変更できます。
全て同じ文字の大きさや色にするならスタイルシートは必要ないのですが、

ここはこのサイズと色で、ここはこのサイズで、ここはこの色で...という場合、とても面倒です。


スタイルシートにあらかじめパターンを用意しておきます。
上記の緑色の文字をスタイルシートで表すと以下のようになります。(フォントサイズは20pxに変えました。後述。)


<style type="text/css"><!--
greenStyle {
font-size:20px;
color:green;}
--></style>


最初と最後のStyleタグですが、これはスタイルシートを表す決まった書き方なので、そのままコピーして使います。


次に、2行目のgreenStyleは自分で自由に決められる名前です。
3行目はフォントのサイズ、4行目は色を指定しています。
これで、greenStyleというフォントサイズが20pxで色が緑の文字が定義できました。


定義は終わりなので、この定義を実際に使ってみます。


<p><font size="5" color="green">3行目</font></p>
これを次のように変えます。
<p class="greenStyle">3行目</p>


スタイルシートを適用するときは、classという属性を使って記述します。
(idという属性も使えますが、ここではclassを使用しています。)


【サンプル】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<style type="text/css"><!--
.greenStyle {
font-size:20px;
color:green;}
--></style>

<html>
<head>
<title>タイトル</title>
</head>
<body>
<font size="3" color="red">1行目</font><br/>
<font size="4" color="blue">2行目</font><hr/>
<p class="greenStyle">3行目</p>
<font size="3" color="red">4行目</font>
</body>
</html>



*フォントサイズの記述方法


fontタグのsizeで文字のサイズを指定するときは使えた1,2…という値ですが、スタイルシートの場合使えません。

スタイルシートの場合は、下記から選択します。

px:ピクセルで指定します。 使用例:font-size:10px;

em:ピクセルで指定します。 使用例:font-size:10em;

ex:ピクセルで指定します。 使用例:font-size:10ex;

%:パーセントで指定します。 使用例:font-size:80%; font-size:120%;

xx-small、x-small、small、medium、large、x-large、xx-largeのキーワードで指定します。

使用例:font-size:x-small; font-size:large;


実際の文字のサイズはいくつか実際に試して確認するのがよいかと。

個人的には、いちばん良く使われているのはpxではないかと思います。