GONT-PRESS: CSSと特殊文字を使って枠の角を曲線（角丸・角Ｒ）にする方法

2006年06月12日

CSSと四隅の画像で枠の角を曲線（角丸・角Ｒ）にする方法

[　4-Tips　]

[追記070802]
たまに検索でいらっしゃる方がいるようなので、
四隅に画像を使って角Rにする方法を紹介します
（オリジナルではありません、roundblockという方法です）。

とっても角Rの枠ですね。
とっても角Rの枠ですね。とっても角Rの枠ですね。とっても角Rの枠ですね。とっても角Rの枠ですね。とっても角Rの枠ですね。

CSSは……ソースをご覧ください。

CSSと特殊文字を使って枠の角を曲線（角丸・角Ｒ）にする方法

[　4-Tips　]

使う特殊文字：•（•）
サンプル：以下（崩れていたらごめんなさいm(__)m）

•

画像を減らしてサイトを作りたい方にはおすすめ？
•という特殊文字を使って、divで囲みます。•の特殊文字部分のフォントを欧文指定してください。
WinXP-IE6、MacOSX-Safari/Firefoxで確認済ですが、完全なクロスブラウザチェックは行っておりません。
よろしければ、あなたの環境と見え方をコメント等でお知らせください。

特殊文字一覧：特殊文字リファレンス
CSS参考サイト：Rounded Box Demo
（このサイトを教えてくれた某サイトさん、すいません、URL失念）

サンプルCSS：

div.rounded-box {
position:relative;
width: 300px;
background-color: #E6E6E6;
margin: 3px;
font-size: 16px;
font-family: Georgia;
}

div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;}

div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#E6E6E6; line-height: 40px;}

div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}

div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}

div.box-contents {
position: relative; padding: 8px; color:#000;
font-size: 12px;
font-family : "ＭＳ Ｐゴシック",  "ヒラギノ丸ゴ Pro W4", HiraMaruPro-W4, Osaka ,MS Gothic,verdana,sans-serif;
}

</style>

<div class="rouded-r">
<div class="rounded-box">
<div class="top-left-corner"><div class="top-left-inside">&bull;</div></div>
<div class="bottom-left-corner"><div class="bottom-left-inside">&bull;</div></div>
<div class="top-right-corner"><div class="top-right-inside">&bull;</div></div>
<div class="bottom-right-corner"><div class="bottom-right-inside">&bull;</div></div>
<div class="box-contents">
画像を減らしてサイトを作りたい方にはおすすめ？　&bull;という特殊文字を使って、divで囲みます。&bull;の特殊文字部分のフォントを欧文指定してください。WinXP-IE6、MacOSX-Safari/Firefoxで確認済ですが、完全なクロスブラウザチェックは行っておりません、よろしければ、あなたの環境と見え方をコメント等でお知らせください。
</div>  
</div> 
</div>

Posted by gont at 2006年06月12日 14:54 | TrackBack

Webで使う特殊文字-○付き数字（丸付き数字、丸囲み数字） - 11 14, 2006
ミニDBのトラブルシュート - 7 27, 2006
MT2.*で特定のトラックバックを削除する - 7 18, 2006
「透明テキスト付きPDF」とAmazonの「なか見！検索」、Googleの「ブック検索」 - 6 09, 2006
Amazon.co.jpの個別商品ページのリンクURL変更 - 6 02, 2006
フォントの文字化けでフォントキャッシュをクリア - 5 29, 2006
Google Sitemaps - 5 23, 2006
XHTML 文法チェッカーで校正 - 5 20, 2006
鎖国を止めて開国する - 3 26, 2006
単純な画像アップローダー制作 - 3 25, 2006