文字飾り
CSSを使いますと、文字飾りやフォイントの設定が格段に楽になる例えば「注意」という文字を 赤色で太文字 にするには、HTML文では下のように書くとよい
<font color="red"><b>注意</font></b> |
これを、CSS対応のHTML文で書くと、下のようになる
<h3>注意</h3> |
ただし、CSSファイル内に次のような記述が必要
h3 {
color:red;
font-size:110%;
}
|
「注意」を上のように表示させるには、<h3>注意</h3> とし、CSSファイルは下のようになる
h3 {
height:20px;
color:#777777;
font-size:110%;
background:#e7e7e7;
padding:4px 0px 0px 8px;
border-color:#777777;
border-width:0px 0px 1px 10px;
border-style:solid;
}
|
注意
また、上のように「注意」という文字のバックを、画像にすることもできる<h4>注意</h4> とし、CSSファイルは下のようになる
h4 {
color:#777777;
font-size:110%;
padding:8px 0px 0px 24px;
background-image:url("h4.jpg");
}
|
ただし、下のような h4.jpg という画像が必要になる（ファイル名は自由）paddingの数値は画像に合わせて調節
（注） hタグは、1～6まで使えます。ただ、h1はTOPページに一つだけにした方がいい
多用すると検索エンジンから はじき飛ばされる可能性があるそうだ
●フォントの指定
上のh4で「注意」の文字フォントを指定することもできる
h4 {
color:#777777;
font-size:110%;
font-family: "ＭＳ Ｐゴシック";
padding:8px 0px 0px 24px;
background-image:url("h4.jpg");
}
|
上のように書くと、字体が「ＭＳ Ｐゴシック」になる
ＨＰ全体のフォントをしてする方法もあるが、「その他」のページに書いている
---- End ----
↑PageTop ETCにもどる