HTMLでの囲み文字の装飾の方法

パソコン

例えば、リンク先の記事を紹介したいときに、

「オススメ」「関連記事」「公式サイト」「NEW」

などとリンク文字の前に描きたいときがあります。

HTMLでの囲み文字の装飾例をまとめてみたいと思います。

囲み文字のHTMLコード

文字

<span style=”border: 1px solid;”>文字</span>

普通に黒字で囲むとこのようになります。

太さの変更

枠線を太くする

<span style=”border: 2px solid;”>枠線を太くする</span>

太枠で囲むには、2pxにします。

中の文字も太字

<b><span style=”border: 2px solid;”>中の文字も太字</span></b>

文字も太字にしたいときには、<b></b>タグを使えます。

色の変更

色の変更

<b><span style=”border: 2px solid #00ff00;”>色の変更</span></b>

枠線の色を変更できます。

文字の色とそろえる

<b><span style=”border: 2px solid #00ff00; color: #00ff00;”>文字の色とそろえる</span></b>

文字と枠が同じ色になりました。color: # を加えます。

色の関連記事

丸みをつける

四角がまるい丸みをつける

<b><span style=”border: 2px solid #0000ff; color: #0000ff; border-radius: 5px;”>四角がまるい</span></b>

border-radius: 10px と入れると角に丸みを加えられます。

微妙に角を丸くしたり、ここのpxの数字を大きくすると、もっと丸くするもできます。

大きさの変更

 大きさ 

<b><span style=”border: 2px solid #00ff00; color: #00ff00; font-size: 30px; border-radius: 10px;”> 大きさ</span></b>

font-size: 30pxで文字を大きくしてみました。数字を小さくすると、全体を小さく表示することができます。

白抜き文字にする

 背景色 

<b><span style=”border: 2px solid #00ff00; color: #ffffff; font-size: 25px; border-radius: 10px; background-color: #00ff00;“> 背景色</span></b>

background-color: #で背景色を枠線と同じにして、文字を白くすると、色が反転しましたね!

マーカー線のようにする方法

応用できます

このような方法で、枠線の色や太さ、文字の色や大きさなどを変えていくことができます。

ひと工夫することで、普通に文字の色を変えたり、太字にしたりするだけよりも目立たせることができますね!

色々なパターンでできるので、ぜひ試してみてはいかがでしょうか?

【その他のHTMLタグの記事】

 関連
HTMLでのリンクコードの貼り方

 関連
HTMLコードの「改行」の貼り方

お名前.com

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク