短い「文字」、「言葉」を囲むには・・ | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
$あんなこと そんなこと どうでもいいこと...



おはようございます。

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

Station Fire, Los Angeles - Free Photos fotoq
photo by Jaimito Cartero



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

<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>



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

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス