タイトル付きの枠線の使い勝手が非常に素晴らしい

文章を強調するために以前は青い枠線を使っていました。

青い枠線で文章を囲む。

<p style="border: medium solid rgb(0, 204, 255); padding: 10px;"></p>

ある時、枠線背景の色を変えたいなと思い、文章を囲む枠の背景を入れるタグを探していたところ
タイトル付きの枠線を入れるサイトに遭遇。
その使い勝手があまりにも素晴らしくこれは紹介したいなと。

研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に

タイトル

枠の中の文章

これ凄くないですか？
初めて知ったのですがものすごい使い勝手がいい。

俺のブログは過去記事に対して人知れず追記をすることが多いのですが
本文の流れを邪魔することもあり困っていたんです。

記事下に書くのであればいいのですが本文の中ほどに追記したいときは難しくて
始まりには追記と書くので分かるんだけど終わりが分からず
いったいどこまでが追記なのかって。

それがこのタグですべて解決。

タイトル部分に【追記】と入れ、枠で囲ってやれば一目瞭然です。
こんな感じで。

【追記】

追記した文章

これならどこからどこまでが追記なのか凄い分かりやすい。

<fieldset style="border-color: rgb(245, 245, 245); padding:0 10px 10px;"><b><font color="#FF0000"> 【追記】 </font></b></legend>追記した文章</fieldset>

ただ、Firefoxで見ると完璧なのですが
IEで見ると枠線の色が非常に薄く、文章も左詰めで枠との余裕がないんですよね。



上がInternet Explorerで下がFirefoxで見た時の状態なのですが
同じタグなのに見え方が全然違うのが分かると思います。

IEの方は薄すぎて見づらい。

なので色を指定し、paddingで上は０px、左右下から１０pxの幅を取り
IEで見ても薄くならないように指定しました。
FFは変わらないのに対しIEで見るとなぜか黒色になっちゃいましたが良しとします。
他ブラウザは知らない。

これが上記リンクでも注意があった
テンプレCSSで<fieldset>の表示方法が指定されている場合もあり
ねらい通りの枠線、色が表現できないということもあるってやつでしょうね。

たぶんだけど。

後は【追記】の部分を赤字と太字に指定し
ランキングバナーたちと一緒にいつでも貼れるよう下書き保存しています。

枠の中に文章を書き改行しても枠が勝手に広がってくれるのがいいね。
上の<p style>は改行すれば１列ごとに枠が出てしまい
HTMLタグを表示して</p>を文章の最後に入れ直さないといけなかったのが大変でした。

ブログ開設７年目でようやく覚えたタイトル付き枠。

上記リンク先には最初にやろうと思っていた枠背景などもあるので
記事の文章を装飾するのに参考にしてみてください。

これは重宝しそうです。

HTML&スタイルシート トレーニングブック CSS3増補版/ソーテック社

￥2,499

Amazon.co.jp

■ランキングに参加中。
いつもポチがとうございます。
クリックして下さると１０ポイントが入り喜びます。