柴犬 けんたの日記 Part2

柴犬 けんたの日記 Part2

文字の装飾


【文字 装飾

【文字の大きさと色】

 みんな、いろんな大きさの文字にしている。どうやっているのだろう?と思って考えた。

 日記を書くときには、簡単に大きくしたり小さくしたりできるよね。


【文字の大きさを変える】

 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創英角ポップ体 柴犬 けんたの日記
MS Pゴシック 柴犬 けんたの日記
MS P明朝 柴犬 けんたの日記



よっつ 面倒なので、いっぺんに変えるぞ~


<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.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: