Webページ作成入門

文字を飾ろう

文字のデザインを変える方法を説明します。

文字に色を付けよう

文字を赤にしたい場合は、その文字を「<span style="color:#FF0000;">」と「</span>」で囲みます

以下の例では、「改行」を赤にしています。

<html>
<head>
<title>私の日記</title>
</head>
<body>
今日は、Webページで「<span style="color:#FF0000;">改行</span>」する方法を勉強した。<br>
もっと勉強して、ページの見栄えを良くしたい。
</body>
</html>

こうなる

文字の色を赤以外にしたい場合、「FF0000」の部分を書き換えます。
例えば、青にしたい場合は、「0000FF」です。

他の色は、以下のツールを使って探してみてください。
・赤・緑・青それぞれについて00・33・66・99・CC・FFを選びます。
・00に近いほどその色は薄く、FFに近づくほどその色は濃くなります。
・全てが00なら黒になり、全てがFFなら白になります。

■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■


文字の大きさ・太さを変えよう

今度は文字の大きさや太さを変えてみましょう。
以下のものが代表的です。

種類 囲み
ナナメ <span style="font-style : italic;"> </span>
太い <span style="font-weight : bold;"> </span>
取り消し <span style="text-decoration : line-through;"> </span>
極めて小さい <span style="font-size : xx-small;"> </span>
小さい <span style="font-size : x-small;"> </span>
やや小さい <span style="font-size : small;"> </span>
やや大きい <span style="font-size : large;"> </span>
大きい <span style="font-size : x-large;"> </span>
極めて大きい <span style="font-size : xx-large;"> </span>
<html>
<head>
<title>私の日記</title>
</head>
<body>
今日はWebページの文章を飾る方法を勉強した。<br>
・<span style="color:#FF0000">赤文字</span><br>
・<span style="font-style : italic;">ナナメ文字</span><br>
・<span style="font-weight : bold;">太字</span><br>
・<span style="text-decoration : line-through;">取り消し</span><br>
・<span style="font-size : xx-small;">極めて小さい文字</span><br>
・<span style="font-size : x-small;">小さい文字</span><br>
・<span style="font-size : small;">やや小さい文字</span><br>
・普通の大きさの文字<br>
・<span style="font-size : large;">やや大きい文字</span><br>
・<span style="font-size : x-large;">大きい文字</span><br>
・<span style="font-size : xx-large;">極めて大きい文字</span><br>
</body>
</html>

こうなる

これまでのものを組み合わせる

今回の講座では、文字の色・大きさ・太さ・ナナメ・取り消しを学びました。
最後に、「赤くて大きい文字」のように、これらを組み合わせる方法を紹介します。

注目する部分は、「<span style="」と「">」で囲まれている部分です(「color:#FF0000;」など)。

赤い時は、ここが「color:#FF0000;」です。
大きい時は、ここが「font-size : x-large;」です。

赤くて大きい時は、ここが「color : #FF0000; font-size : x-large;」です。
つまり、並べて書くだけです。
<span style="color : #FF0000; font-size : x-large;">赤くて大きい文字</span>」のように使います。

ということで、「<span style="」と「">」で囲まれている部分をまとめてみましょう。

種類 「<span style="」と「">」で囲まれている部分
color : #色
ナナメ font-style : italic;
太い font-weight : bold;
取り消し text-decoration : line-through;
極めて小さい font-size : xx-small;
小さい font-size : x-small;
やや小さい font-size : small;
やや大きい font-size : large;
大きい font-size : x-large;
極めて大きい font-size : xx-large;
<html>
<head>
<title>私の日記</title>
</head>
<body>
今日はWebページの文章を飾る方法を勉強した。<br>
・<span style="color : #FF0000; font-style : italic;">赤くてナナメ文字</span><br>
・<span style="color : #00FF00; font-weight : bold;">緑で太字</span><br>
・<span style="color : #0000FF; text-decoration : line-through;">青くて取り消し文字</span><br>
・<span style="font-style : italic; font-size : xx-small;">ナナメで極めて小さい文字</span><br>
・<span style="font-weight : bold; font-size : x-small;">太くて小さい文字</span><br>
・<span style="text-decoration : line-through; font-size : small;">取り消しのやや小さい文字</span><br>
・普通の大きさの文字<br>
・<span style="color : #00FFFF; font-weight : bold; font-size : large;">水色で太くてやや大きい文字</span><br>
・<span style="color : #FF00FF; font-style : italic; font-size : x-large;">紫色でナナメで大きい文字</span><br>
・<span style="color : #FFFF00; font-size : xx-large;">黄色くて極めて大きい文字</span><br>
</body>
</html>

こうなる

これを使うと、この講座で学んだことで簡単に行えます


作成者 組長