ＨＴＭＬに直接スタイルを書いて文字を装飾するときに使いたいタグやフォントカラーなどについての個人的な覚え書きです。
HTMLに直接スタイルを書いて文字の装飾をしたいときによく使いそうなタグまとめ
! fontタグではなく「style=””」を使う !
1.<h3 style=”color: #000080; font-size: 150%;”>見出しを紺色にして大き目に</h3>
実際の表示↓
見出しを紺色にして大き目に
<–あまり良くない例–>
<h3><span style=”color: #000080; font-size:150%;”>見出しを紺色にして大き目に</span></h3>
実際の表示↓
見出しを紺色にして大き目に
2.<p style=”color:#ff9900; font-size:125%;”>文章をオレンジにして少し大き目に</p>
実際の表示↓
文章をオレンジにして少し大き目に
3.部分的に装飾したいときは<span style=”color:#ff9900; font-size:125%;”>span</span>で
実際の表示↓
部分的に装飾したいときはspanで
←<span>で囲んだ文字に対してだけフォントカラーとフォントサイズを指定
4.部分的に<b span style=”font-size: 125%;”>太字にして少し大きめ</b>に
実際の表示↓
部分的に太字にして少し大きめに
※ここから下は、Wordpress Simplicityで入力すると自動的に記述が変更されることを確認
5.文字を太文字にする
⇒<b>文字を太文字にする</b>
改記述⇒<strong>文字を太文字にする</strong>
（ＨＴＭＬ５ではよほどのことがない限り<b>は使わないこととなっている。WordPressでは太字＝<strong>。<strong>は強調の意味があるので使いすぎに注意）
6.文字を斜体にする
⇒ <i>文字を斜体にする</i>
改記述⇒<em>文字を斜体にする</em>（日本語フォントには効かない）
7.文字に取り消し線を付ける
⇒<del>文字に取り消し線を付ける</del>
改記述⇒<del datetime=”2016-06-14T01:20:24+00:00″>文字に取り消し線を付ける</del>（日付は自動で入る）
8.文字に下線を付ける
⇒<u>文字に下線を付ける</u>
改記述⇒<span style=”text-decoration:underline;”>文字に下線を付ける</span>
9.ノート風の下線を付ける
⇒<font style=”border-bottom: 1px dashed”>ノート風の下線を付ける</font>
改記述⇒<span style=”border-bottom: 1px dashed;”>ノート風の下線を付ける</span>
10.文字に背景色を付ける
⇒<font style=”background-color:#ffff00″>文字に背景色を付ける</font>
（背景色はカラーコードで指定）
改記述⇒<span style=”background-color:#ffff00;”>文字に背景色を付ける</span>
アレンジ：文字に下線を付けて背景色を付ける
⇒<span style=”text-decoration: underline; background-color: #ffff00;”>文字に下線を付ける</span>
※注意：テキストモードで『背景色を付けるタグ』を手動入力したあと、ビジュアルモードでWordPress Simplicityに標準装備されている『下線』ボタンを利用すると
⇒<span style=”text-decoration: underline;”><span style=”background-color: #ffff00;”>文字に下線を付ける</span></span>となる。
複数のクラスを付ける場合は半角スペースで区切って一つにまとめる
蛍光ペン的に使いやすそうな色まとめ
yellow系（Webセーフカラー）
#ffff66
#ffff33
yellow
#ffff00
pink系（Webセーフカラー）
#ffcccc
#ff99cc
pink
#ffc0cb
blue系（Webセーフカラー）
#33cccc
#99ffff
#00ffff
blue
aquamarine #7fffd4
paleturquoise #afeeee
