HTMLに直接スタイルを書いて文字を装飾する方法

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
HTML画像

HTMLに直接スタイルを書いて文字を装飾するときに使いたいタグやフォントカラーなどについての個人的な覚え書きです。

スポンサーリンク

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>
(HTML5ではよほどのことがない限り<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

スポンサーリンク
スポンサーリンク