文字の色やサイズを変えてみる

文字の色を変えてみる

文字の色を変えてみましょう。
文字の色を変えるには「タグ」を使います。

 

ホムタすわ

 

「すわ」の文字が赤色になっていますが、次のようにすると文字色の変更が可能です。

 

ホムタ<span style="color:#ff0000;">すわ</span>

上の行をコピー&ペーストするとそのまま使えます。

 

これは、<span style="・・・・・・">■■■</span>で囲まれた■■■の文字を指定通りに表示しなさい、という命令文(タグ)です。
(正しく指定しないと表示してくれません・・・)

「#ff0000」が「赤色」を指定する「カラーコード」と呼ばれるものです。

「#ff0000」の部分を変えれば、いろいろな色が表現できます。

 

■ウェブ色見本■でカラーコードをコピーして「#ff0000」の部分を変えてみてくださいね!

 

文字のサイズを変えてみる

同じ種類のタグを使って、今度は文字のサイズを変えてみましょう。

 

ホムタすわ

 

「すわ」の文字が大きくなっていますが、次のようにすると文字サイズの変更が可能です。

 

ホムタ<span style="font-size:20px;">すわ</span>

上の行をコピー&ペーストするとそのまま使えます。

 

「20px」がピクセルという単位で文字の大きさを指定できる指数です。

「20」の部分を変えれば、いろいろな大きさが表現できます。

 

文字の色とサイズを同時に変えてみる

応用すると、文字の色とサイズを同時に変えることも可能です。

 

ホムタすわ

 

上記は次のようにタグで指定しています。

 

ホムタ<span style="color:#ff0000;font-size:20px;">すわ</span>

上の行をコピー&ペーストするとそのまま使えます。