研Q69.ブログの文字をHTMLで四角く囲む方法。 - ネットビジネス研Q室(新館)

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

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

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

AX Fighting Championship 25 - 無料写真検索fotoq
 photo by KellBailey

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

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

文章を枠で囲むときには、<div>タグを使って枠で囲みたい部分をブロック化しましたが、文字の場合はブログの文字に蛍光マーカーを引く方法(研Q66.)でやったようにインライン要素の<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属性で色、太さ、線種など自由自在に)
研Q66.ブログの文字に蛍光マーカーを引く方法。



 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1

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

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

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/69-b726674f

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。