以前、ご紹介した「タイトルに背景色のついた囲み枠」のタイトルを中央に寄せて、背景の角を少し丸くしてみました。
ちょっとオシャレかなと（笑）
タイトル
上のHTMLはこうなってます。 ⇓
<div style="border-width: 1px;border-style: solid;border-color: #ff0000;margin: 5px;padding: 5px;background-color: #ffffff;color: #333333;box-shadow: 5px 5px 5px #aaaaaa;border-radius: 10px;color: #333333;"><div style="margin: -12px 0 0px 0px;padding: 0;"><div align="center"><span style="display:inline-block;zoom:0;margin: 0;padding: 0 5px;background-color: #ff0000;color: #ffffff;border-radius: 5px;font-size: 14px;font-weight: bold;text-decoration: none;">タイトル</span></div></div>～ここに表示したい内容を書きます。ここに表示したい内容を書きます。ここに表示したい内容を書きます。～</div>
で、もし「表示したい内容」を書いて、改行されずに文字が詰まってしまう場合は、改行したい箇所に<br/>を記入してやると改行されると思います。
色や線の太さ等、お好みの物を作っておくのも楽しいかもしれませんね＾＾；
※前回バージョン⇓
タイトルに背景色のついた囲み枠
以前、タイトル付囲み枠を設置する方法をご紹介しました。⇒ちょっとおしゃれなタイトル付枠囲い
今回、それをチョットだけバージョンアップして、タイトルに背景を付けたものをご紹介してみたいと思います。
⇓
タイトル
～ここに表示したい内容を書きます。ここに表示したい内容を書きます。ここに表示したい内容を書きます。～このタグはこのようになります。 ⇓
<div style="border-width: 1px;border-style: solid;border-color: #999999;margin: 5px;padding: 5px;background-color: #ffffff;color: #333333;box-shadow: 5px 5px 5px #aaaaaa;border-radius: 10px;color: #333333;"><div style="margin: -12px 0 0px 0px;padding: 0;"><span style="display:inline-block;zoom:0;margin: 0;padding: 0 5px;background-color: #0000ff;color: #ffffff;font-size: 14px;font-weight: bold;text-decoration: none;">タイトル</span></div>～ここに表示したい内容を書きます。ここに表示したい内容を書きます。ここに表示したい内容を書きます。～</div>
赤字の箇所がタイトルの背景色のカラーコードです（上の場合は、青⇒0000ff）。
赤（ff0000）にしてみます。 ⇓
タイトル
～ここに表示したい内容を書きます。ここに表示したい内容を書きます。ここに表示したい内容を書きます。～検索でカラーコードと入れて探すと、カラーコードのサイトが、たくさん出て来ますが、一応参考までに⇒HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定
お好みの色の物を作って、パソコンのメモ帳等に、保存しておくと便利かもしれませんね。
参考になると、うれしいのですが・・(^O^)/
[追記]
また、ふっと思いつきました＾＾；
タイトルの背景色と枠線の色を同じにしてみました。
タイトル
～ここに表示したい内容を書きます。ここに表示したい内容を書きます。ここに表示したい内容を書きます。～上の囲み枠（↑）のタグは、こちらです。 ⇓
<div style="border-width: 1px;border-style: solid;border-color: #ff0000;margin: 5px;padding: 5px;background-color: #ffffff;color: #333333;box-shadow: 5px 5px 5px #aaaaaa;border-radius: 10px;color: #333333;"><div style="margin: -12px 0 0px 0px;padding: 0;"><span style="display:inline-block;zoom:0;margin: 0;padding: 0 5px;background-color: #ff0000;color: #ffffff;font-size: 14px;font-weight: bold;text-decoration: none;">タイトル</span></div>～ここに表示したい内容を書きます。ここに表示したい内容を書きます。ここに表示したい内容を書きます。～</div>
赤字の二か所のカラーコードを同じにすれば、タイトルの背景色と、枠線の色が同じになります。
まとまりの無い説明でした（汗）。 ペコリ m(_ _ )m
関係の無いおまけ＾＾；
やる時はやる、のやる時って、いつですか！？
