短い「文字」、「言葉」を枠で囲む方法

おはようございます。

短い「文字」、「言葉」を枠で囲む方法をご紹介してみたいと思います。


下のタグの「好きな言葉」のところに、「好きな言葉」を入れて下さい（笑）。

<span style="border-style: solid; border-width: 1px;padding: 0px 0px 0px 0px;">好きな言葉</span>

こんな感じになります⇒好きな言葉



あと、参考までに、タグの意味ですが・・

実線⇒ solid

点線 ⇒ dotted

破線 ⇒ dashed

二重線 ⇒ double

線無し ⇒ none



あと、囲み線の太さは・・

border-width: 1px　←5にすると・・

好きな言葉


文字と囲み枠との余白ですが、数値は左から

、枠内の「上、右、下、左」になります。

padding: 0px 0px 0px 0px ←10px 5px 10px 5pxにすると・・

好きな言葉


さらに応用で、

border-color: red;

を追加して枠線の色を変えることもできます。


好きな言葉

<span style="border-style: solid;border-color: red; border-width: 1px;padding: 0px 0px 0px 0px;">好きな言葉</span>

よろしかったら、参考にしてみて下さい。

---

鎌田紘子／榮倉奈々／桐谷美玲／坂口杏里／重盛さと美／菜々緒