ブログでよく使うHTMLタグ文字装飾まとめ

ブログで文章や画像を入れたい時とか、
線をひきたい時とか、柔軟に対応していきたい。

でもHTMLって難しそう。

そう思っている方を救いたいと思ったし、
僕も、HTMLをすべて覚えているわけではないので、
忘れたりしたら、ネットで調べて、
使うって事を繰り返してたんです。

それが、面倒になってきたというのもあって、
今回、まとめを作ろうと思ったんです。

部門別に解説します。

HTMLの基本知識

HTMLを使っているから、
文字や画像が綺麗に配置して見えているんですが、

詳しいことを、うんたらかんたら説明しても無駄なんで、

これだけ覚えて下さい。

1,HTMLタグで、どのように表すか指示を出す。
2,HTMLタグは、始まりと終わりがあります。

つまり、HTMLタグの始まりと終わりで囲んだ部分に
表したいように指示をだす。

オセロで例えると、
HTMLタグが黒のコマで、今から指示を与えて
表示を変えたい場所が白のコマだとしたら

黒のコマで、白のコマを挟むと、黒のコマになります。

このイメージです。

1,HTMLタグで、どのように表すか指示を出す。
2,HTMLタグは、始まりと終わりがあります。

この2つだけ覚えて下さい。

5hj

文字を装飾する。

文字を装飾と言っても、
文字を大きくする。
文字を太くする。
文字の色を変更する。

これらを順番に解説します。

文字を大きくする。

文字を大きくする場合は、
フォントサイズを変更するという
指示を与えてあげます。

始まりのHTMLタグ
<font size="4">


</font>
終わりのHTMLタグ 

このHTMLタグで挟むとこうなります。

フォントサイズ4

フォントサイズのHTMLタグに、
4と半角の文字がありますね。

この数字を大きくすると、
文字の大きさを調節出来ます。

変更するとこうなります。

フォントサイズ5
フォントサイズ6

文字を太くする。

文字を太くするHTMLタグは、
2種類あります。

始まりのタグ<strong>

</strong>終わりのタグ


始まりのタグ<b>

</b>終わりのタグ

strongで太くしたもの
bで太くしたもの

どちらも同じように表示されますが、
意味が少しだけ違います。

あまり気にしなくてだいじょうぶです。

気になったら、ネットで調べて下さい。
答えが見つかりますが・・・・

気にしないで大丈夫って思うはずですwww
それぐらいの違いしかありません。

文字の色を変更する。

文字の色を変更する場合は、
フォントカラーを変更するという
指示を与えてあげます。

色は、薄いアカもあれば、
濃い赤もあります。

なので、カラーコードを使って、
色が決まっています。

カラーコードは、
⇒こちら

始まりのタグ<font color="#EE82EE">

</font>終わりのタグ

このHTMLタグで挟むとこうなります。

フォントカラー#EE82EE

#EE82EEは、ピンク色です。

文字の色は、変更しすぎると、
読みくくなります。

3色ぐらいを使い分けるのがいいと思います。

僕の場合は、

オレンジ
レッド
グリーン

この3色を使い分けています。

組み合わせる

最後に、組み合わせについて解説します。

今回、ご紹介したのは、

文字を大きくする。
文字を太くする。
文字の色を変更する。

この3種類でした。

これを組み合わせることも出来ます。

例えば、

<font color="#EE82EE"><font size="5"><b>
</b></font></font>

この場合は、文字を太くて大きくして
色もピンクにするという指示です。

このHTMLタグで挟むとこうなります。

ピンク~~~

フォントがカラーとサイズで2回出てきます。
これを1個にまとめる事が出来ます。

<font size="5" color="#EE82EE"><b>
</b></font>

まとめたので、終わりのフォントタグが1個になります。

このように、組み合わせて使えるので、
覚えておきましょう。

まとめ

今回ご紹介したHTMLタグを
コピペで使えるようにまとめて表示しておきます。

ご自由にお使い下さい。

太くする

<strong>太くする</strong>

太くする

<b>太くする</b>

大きくする

<font size="4">大きくする</font> 

太く大きく

<font size="5"><b>太く大きく</b></font> 

オレンジにする

<font color="#F4A460">オレンジにする</font>

組みあせわ

<font size="5" color="#F4A460"><b>組みあせわ</b></font>

参考になったら幸いです。

kihon

【0⇒1を目指す初心者講座】 top23 0514
サブコンテンツ

このページの先頭へ