文字の装飾
ホームページの見た目のデザインは、スタイルシートとか、CSS と言われるものを使います。 ここでは、"span" というタグを使って文字の装飾を見ていきますが、他もこんなもんです。
タグ span
どんなタグでもいいのですが、範囲を指定するためのタグ "span" を使ってスタイルシートをやってみます。
<span></span>は、「ここから」「ここまで」と範囲を指定するタグです。
<html> <head> <title >ヘッダ部です。</title > </head > <body> <span> ボディー </span> 部です。 </body > </html>
"ボディー" を指定しました。 見た目は何も変化しません。
文字の色
文字に色を付けるには、 次のように、style="color: red;" と書きます。
<html>
<head>
<title >ヘッダ部です。</title >
</head >
<body>
<span style="color: red;">
ボディー
</span>
部です。
</body >
</html>
このように、タグの中にスタイルを書きます。 ボディーの文字が赤くなりました。
フォントサイズ
フォントサイズを指定するには、 style="font-size: 20pt;" と書きます。 これで、２０ポイントになります。
<html>
<head>
<title >ヘッダ部です。</title >
</head >
<body>
<span style="color: red; font-size: 20pt;">
ボディー
</span>
部です。
</body >
</html>
";" は区切り記号です。これを使って、幾つでも指定できます。 ボディーの文字が赤く、２０ポイントのサイズになりました。
背景色
背景の色を指定するには、 background-color: blue; と書きます。
<html>
<head>
<title >ヘッダ部です。</title >
</head >
<body>
<span style="color: red; font-size: 20pt; background-color: blue;">
ボディー
</span>
部です。
</body >
</html>
";" で区切って、幾つでも指定できます。 次のように、背景の色が青になりました。
パディング
内側の余白を指定するには、 padding: 20pt; と書きます。
<html>
<head>
<title >ヘッダ部です。</title >
</head >
<body>
<span style="color: red; font-size: 20pt; background-color: blue; padding: 20pt;">
ボディー
</span>
部です。
</body >
</html>
内側の余白が大きくなりました。 （背景部分が広くなっています）
マージン
外側の余白を指定するには、 margin: 20pt; と書きます。
<html>
<head>
<title >ヘッダ部です。</title >
</head >
<body>
<span style="color: red; font-size: 20pt; background-color: blue; padding: 20pt;margin: 20pt;">
ボディー
</span>
部です。
</body >
</html>
外側の余白が大きくなりました。 ただ、今回は上の余白は無視されました。
