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

2012年09月21日

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

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

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

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

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

上記のサンプルのＨＴＭＬタグはこうなっています。

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

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

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

枠の角を丸くする

先ほどのサンプルに次のＨＴＭＬタグを追記します。

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」にすると・・・

こんな感じになります。

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

注意点

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

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

少なくともInternet Explorer（IE）の８，７、６では、丸くは表示されません。
（ＩＥ９は未確認です。持ってなくて...^^;）

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