例えば、リンク先の記事を紹介したいときに、
「オススメ」「関連記事」「公式サイト」「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タグの記事】
コメント