PCインストラクターの川上です。
今日は、
『【続編】見出し付きの囲い枠 -その２ 』
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
画像はこちら↓
の囲い枠の角（カド）を丸くするには、
をお伝えいたします。
いろんな見出し付きの囲い枠があると思いますが、こんなのもレパートリーに入れていただくといいかな、と思っています^^
こんなのや↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ff1493; border:1px solid #ff1493; padding-left:10px; font-size:1.16em;border-radius:5px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ff1493; padding:10px; font-size:1em;border-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>こんなの↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ff1493; border:1px solid #ff1493; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ff1493; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>も使ってみてはいかがでしょうか^^
ただし、CSS3ですので、IE8以前のブラウザでは表示されません。
ご注意くださいませ。
また、他の色でもご用意しておきますね。
紺色（カラーコード：#000066）は↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>青色（カラーコード：#0000ff）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#0000ff; border:1px solid #0000ff; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #0000ff; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>赤色（カラーコード：#ff0000）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ff0000; border:1px solid #ff0000; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ff0000; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>緑色（カラーコード：#008000）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#008000; border:1px solid #008000; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #008000; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>オレンジ色（カラーコード：#ff9933）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ff9933; border:1px solid #ff9933; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ff9933; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>茶色（カラーコード：#994c00）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#994c00; border:1px solid #994c00; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #994c00; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>黄色（カラーコード：#ffd400）はこちら↓
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#ffd400; border:1px solid #ffd400; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;"><font style="color:#000000; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ffd400; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>さらに他の色がご希望であれば、次の色コードをご自由に設定されるとよいです。
<div style="background:色コード; border:1px solid 色コード; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid 色コード; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div>なお、
うまく表示されない場合は、
/* 上のみ角丸 */
border-top-left-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
/* 下のみ角丸 */
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
をご利用くださいませ^^!
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大