文字の装飾
【文字 の 装飾
【文字の大きさと色】
みんな、いろんな大きさの文字にしている。どうやっているのだろう？と思って考えた。
日記を書くときには、簡単に大きくしたり小さくしたりできるよね。
【文字の大きさを変える】
2種類のHTMLが使えるよ。
ひとつめ
<font style="font-size:20px;">柴犬 けんたの日記</font>
柴犬 けんたの日記
size:20pxの数字を変えると大きくしたり小さくしたりできる。
<font style="font-size:40px;">柴犬 けんたの日記</font>
柴犬 けんたの日記
ふたつめ
<font size="-1">柴犬 けんたの日記</font>
柴犬 けんたの日記
こっちは、size="-1"の数字を-から+にして数字を大きくすると、どんと大きくなる。
+-の記号をつけないで、数字だけ大きくしても、大きくなるよ。
<font size="+2">柴犬 けんたの日記</font>
柴犬 けんたの日記
【文字に色をつける】
<font color="#FF0000">色をつける</font>
色をつける
色は、color="#FF0000"の、#FF0000を変えると好きな色にできる。
この記号の色は、ブログでは選べるから問題ないけどね。
色見本 を参考にしてくださいね。
【文字の大きさと色をいっぺんに変えちゃおう】
どっちでも、使いやすい方を使うといいね。
ひとつめ
<font style="font-size:20px;" color="#FF0000">柴犬 けんたの日記</font>
ふたつめ
<font size="+2" color="#FF0000">柴犬 けんたの日記</font>
これで、文字の大きさも自由自在。文字色も好きな色にできるようになったよ。
【もうちょっと、かっこつける】
ひとつ 背景色の変更
文字に<font style="background-color:#FFFF99"> 背景色 </font>をつける
ふたつ 文字の色を変えて、背景色をつける
<font color="#FA8072">文字の色を変えて<font style="background-color:#FFFF99">背景色</font>をつける</font>
みっつ 文中でフォントを変える。
<font face="書体">フォントを変える</font>
<font face="HG創英角ﾎﾟｯﾌﾟ体">フォントを変える</font>
文字の書体を変えたいときは、"書体"のところに、表現したい書体を入れるんだ。
下の表が主な書体かな。もっと、たくさんあると思うけど、相手のパソコンが書体を持っていないと表示されないので、一般的なのを使うといいね。
| 書 体 | 柴犬 けんたの日記 |
|---|---|
| HGPｺﾞｼｯｸE | 柴犬 けんたの日記 |
| HGPｺﾞｼｯｸM | 柴犬 けんたの日記 |
| HGP正楷書 | 柴犬 けんたの日記 |
| HGSｺﾞｼｯｸE | 柴犬 けんたの日記 |
| HGSｺﾞｼｯｸM | 柴犬 けんたの日記 |
| HGｺﾞｼｯｸM | 柴犬 けんたの日記 |
| HG丸ｺﾞｼｯｸM-PRO | 柴犬 けんたの日記 |
| HG行書体 | 柴犬 けんたの日記 |
| HG正楷書体 | 柴犬 けんたの日記 |
| HG正楷書体-PRO | 柴犬 けんたの日記 |
| HG創英角ｺﾞｼｯｸUB | 柴犬 けんたの日記 |
| HG創英角ﾎﾟｯﾌﾟ体 | 柴犬 けんたの日記 |
| ＭＳ Ｐゴシック | 柴犬 けんたの日記 |
| ＭＳ Ｐ明朝 | 柴犬 けんたの日記 |
よっつ 面倒なので、いっぺんに変えるぞ～
<font face="HG丸ｺﾞｼｯｸM-PRO" style="font-size:30px;" color="#FF42BD"> フォントを変えて、文字の大きさと色を変える </font>
【文字の強調・斜体・取り消し線】
これも、日記書くときは、ブログのボタンを使えば一発で出来ちゃうね。
<b>強調</b>
<strong>強調</strong>
どっちでも同じことだよ。
強調
<i>斜体</i>
斜体
<s>取り消し線</s>
<u>下線を引く</u>
下線を引く
【線を引く】
width="200" は、線の長さ size="6" が、線の幅になる。
水平線
<HR width="200" size="6" noshade>
<HR width="250" size="10" color="#FF0000">
点線
<HR width="400" size="1" color="#FF0000" style="border-style:dotted">
垂直線は？(*´σｰ｀)・・・さて、次行こうか～!!
次は、 文字や画像の配置とまわりこみ に行くよ。
© Rakuten Group, Inc.
