[1]下記のスタイルシート指定をそのままコピーして、メモ帳などテキストエディタの新しいファイルに貼り付け、それに"style.css"という名前をつけ、他のhtmlデータと同じフォルダ内に保存してください。
(拡張子は".css"です。 ".txt"や".html"とならないよう注意!)
h1, h2, h3, h4 {
margin: 0;
padding: 0;
color: #990000;
font-size: small;
font-weight: normal;
text-align: left;
text-decoration: none;
} |
[2]各htmlファイルのhead要素(<head></head>で囲まれたエリア内)に、下記のタグを挿入してください
| <link rel="stylesheet" href="style.css"
type="text/css"> |
[3]htmlファイルの文章のどこかに、<h1>見出し</h1>を書き込んで上書き保存してください。そのファイルをブラウザプレビューすると、スタイルシートの指定前よりも小さい文字で、かつ赤い色の見出しが表示されるはずです。
●文字サイズを変更したい場合
[1]のスタイルシート部分、font-size: small; の、smallという指定部分を、下記のように書換えて保存し、htmlをブラウザプレビューしてみてください。
| サイズを固定しない(相対サイズ指定) |
サイズを固定する(数値指定) |
xx-small (最小サイズ)
x-small (極小サイズ)
small (小サイズ)
medium (中サイズ)
large (大サイズ)
x-large (極大サイズ)
xx-large (最大サイズ) |
10px
12px
14px
16px
18px
20px
22px |
※注意!
文字サイズを 数値指定にすると、ブラウザ側で文字サイズを変更することができず、ユーザビリティの面ではよくありません。デザイン性は落ちるかもしれませんが、相対サイズ指定をお勧めします。
●文字色を変更したい場合
color: #990000; の、#990000という指定部分を、お好みの色指定(16進数)に書き換えてください。
指定したい色の数値見本は、こちらを参考にどうぞ!→「色見本」
|