角丸ボックス

質問

ＣＳＳで角丸ボックス。dreamweaverｃｓ５で作ってます。画像（角丸ボックス）の中に文章を要れる方法教えて下さい。

回答No.2

naokita · ベストアンサー

角丸の一体化画像（１枚だけ）なら
<div style="background: url(背景画像.gif); no-repeat;
width: 画像の横px; height: 画像の縦px;">
小さな固定テキスト
</div>

複数のテキストで使いまわすなら上中下の３枚の画像が必要。
<div style="background: url(横の罫線画像.gif); repeat-y; width:200px;">
<img src="上の角丸.gif" width="200" height="10" alt="上">
<div>
流動的なテキストボックス
</div>
<img src="下の角丸.gif" width="200" height="10" alt="下">
</div>

CSS3なら、
<div style="width:200px;height:60px; border:red solid 5px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;">
CSS3の角丸
</div>

回答No.4

mat-21

No2.No3の方が回答されてるので、いいかなと思ったのですが、一応(^_^;)
参照として回答しますね。

横200px×高さ100pxの角丸の画像（角丸ボックス）の上に12pxの文字（例：お知らせ）が、
天地左右センターに入るもので説明しますと、

▼CSS
.frame {
background-image: url(角丸の画像.gif);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: left top;
width: 200px;
height: 56px;
font-size: 12px;
line-height: 12px;
text-align: center;
padding-top: 44px;
}

▼HTML
<div class="frame">お知らせ</div>

固定されたボックスに左右センターは、text-align:centerなどで指定できるので問題は無いと思いますが、
固定された天地幅の天地センターに文字を配置は、<td>内でない限り難しいです。CSSには天地センターという機能はありません。
で、妥協してtableを使うのですが、HTML論理的には、表ではない限り反しているので、使いたくない限りですね。
ですので、文字サイズが固定サイズで、角丸ボックスのサイズが固定サイズに限り、
精密なピクセル(px)値で表示させれば、できることになります。

天地100pxに対して文字サイズが12pxのline-height:12px;ですから、
100px-12px=88pxとなり、その半分の44pxを文字の上に空きを作れば、天地センターになるので、
文字の上に44px分、padding指定(padding-top:44px;)すれば、天地センターになるわけですが、
padding-top:44px空けた分、天地100px＋44pxにボックスが伸びるので、
ボックスの天地幅を100px-44pxの56pxにすれば良い事になります。

理論的にはこれで良いと思うのですが、
ブラウザ表示確認していないので、表示がおかしかったり、間違ってたらごめんなさいm(_ _)m

回答No.3

naokita

NO.2
ごめんなさい。訂正。

各
background: url(背景画像.gif); no-repeat;
background: url(横の罫線画像.gif); repeat-y;
は、
background: url(背景画像.gif) no-repeat;
background: url(横の罫線画像.gif) repeat-y;
)の次のセミコロンだけ無しに訂正・・・

一体化画像は、各だけじゃなくて、角画像＋罫線ですよ。

補足

画像ファイルのとこを書き直しましたが画像が現れません。ファイルからドロップしたら表示されますがコード記述では出ません。

回答No.1

mat-21

角丸の画像を背景とか、と想像できるのですが、
中に入る文字数は決まっているのか、とか、角丸ボックスの天地左右の寸法は固定されているのか、それとも、入る文字数によって、角丸ボックスの天地左右の寸法が変動するのかによって、やりかたがかなり異なるので、もう少し、具体化した方が良いかと^-^;

補足

中の文字は短いから画像サイズは固定で良いです。お願いだから方法教えて下さい。背景にするのですか？背景にしたら角丸ボックスまみれになりませんか？