コーナーの角を丸くしたい

質問

xhtml+cssでhpを作ってます。

日記本文を四角(縦700px横700px)で囲いたいんですが、この角を丸くしたい場合はどうしたらいいんでしょうか？

以前テーブルレイアウトでhpを作ったときは●を四分割して各コーナーに配置してましたが、現在は脱テーブルレイアウトで作ってますので、テーブルレイアウト以外の方法で何かいい手はありませんでしょうか？

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

枠線を上側、本文の背景用、下側の３つに分割した物を使ってください。
No.2の空要素を作らないパターンです。

<style>
#box:before,
#box:after{
display:block;
border:0 none;
margin:0;
padding:0;
width:700px;
height:20px;
}
#box:before{
content: url(top.gif);
}
#box:after{
content: url(bottom.gif);
}
#box{
width: 700px;
background: white url(back.gif) repeat-y center top;
border: 0; /* back.gifで代用 */
margin:0;
padding: auto;/* 任意 */
}
</style>

<!--[if ie]><img src="top.gif" alt="" width="700" height="20"><![endif]-->
<div id="box">
なにか
</div>
<!--[if ie]><img src="bottom.gif" alt="" width="700" height="20"><![endif]-->

欠点
・幅が可変でない
・CSS on/Image off環境で、枠線が表示されない（border:0になっているため）ため、文書の区切りがわかりにくくなる可能性がある
・背景画像非印刷に対応した印刷用スタイルシートを用意しなければならない
（上下の枠線のみ印刷され、back.gif（左右の枠線）が印刷されない）
・IE対策（:after、:before未対応ブラウザ）がHTMLコード的に良くない（個人的主観）

幅可変については、下のような３つに分けられていれば、
<div id="box">
<div id="top"></div>
<div id="body"></div>
<div id="bottom"></div>
</div>
top:before、top:after
bottom:before、bottom:after
のそれぞれにコーナー部分の画像を配置して、floatやpositionなどで位置を指定することで、幅、高さ共に可変の枠をつけることもできますが、
かなり限らたHTMLでないと無理ですね。

お礼

わざわざわかりやすい構文まで書いてくださってありがとうございます。

メリットとデメリットの差が、無いようで結構ありますね。

やはりどこかで妥協しなければいけないようですね＾＾；

ありがとうございます。

回答No.2

ran_2323

私はCSSで角丸画像を背景にしてます。

＜CSS部分＞---------------------------------------------
.b_top{
width:700px;
height:10px;
background:(角丸上部画像のパス) no-repeat 0 bottom;
}
.b_mid{
width:700px;
background:(中部画像のパス) no-repeat 0 0;
}
.b_btm{
width:700px;
height:10px;
background:(角丸下部画像のパス) no-repeat 0 top;
}

＜HTML部分＞---------------------------------------------
<div class="b_top"></div>
<div class="b_mid">
本文
</div>
<div class="b_btm"></div>

空要素が気になる人は#1さんのようにjavascript利用がいいかなと思います。

お礼

CSSで角丸画像を背景が一番理解しやすくてナイスですね。
空要素はあまり気にならないと言えば気にならないのですが、やはりどこかで妥協ですね・・・

本当にありがとうございます＾＾

回答No.1

yanagiman2

もしかしたらもっといい方法があるかもしれませんが
私の知る限りお答えします。

■１
＞以前テーブルレイアウトでhpを作ったときは●を四分割して
これと原理は同じでfloatやpositionなどを駆使しレイアウトする。

■２
javascript　角丸で検索。
javascriptライブラリによりdivボックスを角丸に変換。
ちなみに私はこれ使ってます。
http://tech.bayashi.jp/archives/entry/techweb/2007/001667.html

参考までに。

お礼

Ｊavascriptで角丸コーナーとはおもしろそうですね。
一度やって見ます＾＾

ありがとうございました。