ホームページを作っている人向けにメモ代わりのサンプルソースも掲載してみました。検索すれば出てくるようなものも含めてまとめていきます。
ということで、よく見かける角が丸くなっているスペースのサンプルソースです。
この作り方は、:afterや:beforeでスマートに書きたいところですが、IEが曲者でIE7ですら対応していないので現時点では現実的でないでしょう。
そこで、下記の方法が挙げられます。
（スペースの横幅が固定の場合）
１．下記の可変の場合の方法すべて。
２．スタイルシートで複数のspanなどをblock要素にして高さ1pxのラインを作る。それらを1段毎の幅をずらして並べて丸くかたどる。
３．角が丸い横幅一杯の画像を作成してスペースの上と下に設置。
（スペースの横幅が可変の場合）
４．四隅の画像を準備してdivとspanやpの背景画像として読み込む。
５．スタイルシートで複数のspanなどをblock要素にして高さ1pxのラインを作る。それらを1段毎に左右マージンを調整して丸くかたどる。
それでは、下記に４．の例と２．の例を続けて掲載してみました。
ちなみに、２．でfont-size:0px;としているのは、IE6でspanに全角分の高さが入るバグがあるようで、height:1px;では制御できずこの処理をすると大丈夫でした。
Warning: include() [function.include]: URL file-access is disabled in the server configuration in /home/users/0/weblike.jp-anchortag/web/htdocs/wp-content/plugins/php_exec.php(61) : eval()’d code on line 2
Warning: include(http://www.anchortag.jp/p/rcc/index.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/users/0/weblike.jp-anchortag/web/htdocs/wp-content/plugins/php_exec.php(61) : eval()’d code on line 2
Warning: include() [function.include]: Failed opening ‘http://www.anchortag.jp/p/rcc/index.php’ for inclusion (include_path=’.:/usr/local/php5.2/php:/home/users/0/weblike.jp-anchortag/web/htdocs/wp-content/plugins/UltimateTagWarrior:/home/users/0/weblike.jp-anchortag/web/htdocs/wp-content/plugins/UltimateTagWarrior’) in /home/users/0/weblike.jp-anchortag/web/htdocs/wp-content/plugins/php_exec.php(61) : eval()’d code on line 2
