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

2006年06月12日

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

関連エントリーをAjaxで検索表示させる（MT2.Xだけど） - 3 12, 2007
MacOSXの入力支援ツールT.Clip X Std - 1 10, 2007
OSXサーバ準備１ - 1 09, 2007
$MTInclude fileを常に最新状態に保つためにindex.htmlを更新し続ける - 11 11, 2006
Webで使う特殊文字-ローマ数字（機種依存文字［特殊文字・NEC特殊文字・IBM拡張文字］） - 10 18, 2006
MT2.*で特定のトラックバックを削除する - 7 18, 2006
単純な画像アップローダー制作 - 3 25, 2006
JP DNSの更新間隔短縮 - 2 21, 2006
MTのカテゴリーの並び順を任意にする - 5 18, 2004
OS9格闘組 - 5 11, 2004