コピペするだけで文章を枠で囲み、角を丸くする方法です

2012年09月21日


ども、
ピアノ教室管理人です。


以前、コピペするだけで文章を枠で囲む方法をご紹介しましたが、
今回はその枠の角を丸くする方法です。




文章だけを枠で囲んだサンプル


祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ

またまた有名な平家物語の冒頭の一節です。^^


上記のサンプルのHTMLタグはこうなっています。

<div style="border:1px solid #FF0000; margin:0px; padding:10px; background-color:#FFFFFF;">
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
</div>


詳しいタグの解説はコチラを参照してください。

この状態だと角は四角くなったままです。




枠の角を丸くする


先ほどのサンプルに次のHTMLタグを追記します。
border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;



具体的にはこんな感じです。
<div style="border:1px solid #FF0000; margin:0px; padding:10px; background-color:#FFFFFF; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;">
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
</div>



すると


祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ


ホラ、角が丸くなりました。\(^o^)/




タグの解説


追記したタグの「8px」部分が、丸さ具合の指定です。
border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;


この数値を変更すると、丸み具合が変わります。


たとえば「20px」にすると・・・

祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ

こんな感じになります。


数値が大きければ大きいほど、丸みも増します。




注意点


丸みの数値は3箇所すべて変えてくださいね。

ブラウザによっては若干違いが出るかもしれません。

少なくともInternet Explorer(IE)の8,7、6では、丸くは表示されません。
(IE9は未確認です。持ってなくて...^^;)

ホントは、4角それぞれに指定できるんですが、
別の機会にご紹介するかも...。^^;




コピーコード


<div style="border:1px solid #FF0000; margin:0px; padding:10px; background-color:#FFFFFF; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;">
※ここにお好きな文章などをいれてください。※
</div>

コピーしてお使いください。


でわ ^^)/~

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。