PCインストラクターの川上です。
今日は、
『【続編】見出し付きの囲い枠 -その2 』
■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
改行後の本文はこちら(ここは削除してください。)
画像はこちら↓
の囲い枠の角(カド)を丸くするには、
をお伝えいたします。
いろんな見出し付きの囲い枠があると思いますが、こんなのもレパートリーに入れていただくといいかな、と思っています^^
こんなのや↓
■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)
改行後の本文はこちら(ここは削除してください。)
<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澄川・ライフデザインスクール
川上 雄大