パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:
こんにちは、パソコンワンポイントレッスン!

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澄川・ライフデザインスクール
川上 雄大
いいね!した人  |  コメント(4)  |  リブログ(0)

川上雄大・パソコンインストラクターさんの読者になろう

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

SNSアカウント