研Ｑ69.ブログの文字をHTMLで四角く囲む方法。

文字Mを枠で囲む囲み文字も自由自在にできる。

 photo by KellBailey

文章を枠で囲む方法は、過去記事で研Ｑしたことがあります。
⇒ 研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に）

今度は文章ではなくて、文字を枠で囲む方法です。

文章を枠で囲むときには、<div>タグを使って枠で囲みたい部分をブロック化しましたが、文字の場合はブログの文字に蛍光マーカーを引く方法（研Ｑ66.）でやったようにインライン要素の<span>タグを使う応用です。

蛍光マーカーでは「 style=""」属性で文字の周囲の背景色をつけましたが、
枠で囲うには文字の背景色を白にして、枠を実線にします。

文字を枠で囲むタグコードは？

「 style=""」属性を、
<span style="border-style: solid; border-width: 1px;padding: 0px 0px 0px 0px;">囲み文字</span>
にします。

これで、→こんなふうに囲み文字ができます。

「 style=""」属性の中に書いてある内容は・・・


border-style: solid

実線⇒ solid
点線 ⇒ dotted
破線 ⇒ dashed
二重線 ⇒ double
線無し ⇒ none
です。


border-width: 1px

囲み線の太さです。


padding: 0px 0px 0px 0px

文字と囲み枠との余白です。

数値は左から、枠内の上、右、下、左の余白です。


さらに応用編で、

border-color: red

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

「 style=""」属性は、値を組み合わせることで自由自在に使えるのでとても気に入っています。


関連記事：
研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に）
研Ｑ66.ブログの文字に蛍光マーカーを引く方法。

amix　7インチ デジタルフォトフレーム V-FRaMe APF-070 posted with カエレバ　⇒カエレバについて ａｍｉｘ Amazon　 楽天市場 Yahooショッピング　 ヤフオク！

にほんブログ村

表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
　　　

ツイッター でも、更新案内を流しています。　　　　　　　　　　　　　　　　　　　　　　　　　　

RSSリーダーとは？⇒ ＲＳＳってなんなの？

　　リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。

▲ネットビジネス研Ｑ室のトップページに戻る▲　　●ネットビジネス研Ｑ室の記事一覧●

記事末尾200posted by +M Inamura (水村亜里)