続:タイトルに背景色のついた囲み枠 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

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

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


テーマ:
Virginia Beach: Adam Thorogood House - 無料写真検索fotoq
photo by bill barber




以前、ご紹介した「タイトルに背景色のついた囲み枠」のタイトルを中央に寄せて、背景の角を少し丸くしてみました。

ちょっとオシャレかなと(笑)

タイトル
~ここに表示したい内容を書きます。ここに表示したい内容を書きます。ここに表示したい内容を書きます。~


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




関係の無いおまけ^^;


やる時はやる、のやる時って、いつですか!?

$あんなこと そんなこと どうでもいいこと...-浜田翔子


ワンタンさんをフォロー

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

Ameba人気のブログ

Amebaトピックス