ども、
ピアノ教室管理人です。
以前、コピペするだけで文章を枠で囲む方法をご紹介しましたが、
今回はその枠の角を丸くする方法です。
文章だけを枠で囲んだサンプル
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
またまた有名な平家物語の冒頭の一節です。^^
上記のサンプルのHTMLタグはこうなっています。
<div style="border:1px solid #FF0000; margin:0px; padding:10px; background-color:#FFFFFF;">
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
</div>
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
</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>
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
</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>
※ここにお好きな文章などをいれてください。※
</div>
コピーしてお使いください。
でわ ^^)/~