テーブルの角を丸くするには？

質問

テーブルの背景を入れて、その背景の角を丸くしようと思っていますが、ＨＴＭＬでの、角を丸くするやり方だと、ソースが多くなって、
ただでさえ、複雑になるのに、さらに複雑になって大変なので、
ＣＳＳや他のもので、角を丸くする方法はありますか？

回答No.3

leap_day · ベストアンサー

こんにちは

『角丸　css』『角丸　テーブル』『角丸　画像』『角丸　javascript』などを検索にかければ色々とサンプルが出てきますよ

簡単ですがサンプル
<style type="text/css"><!--
div {
background-color:Lightblue;
margin:0px;
}
#kadomaru {
width:200px;
background-color:white;
}
.r1 {
height:1px;
margin:0px 1px;
overflow: hidden;
}
.r2 {
height:1px;
margin:0px 2px;
overflow: hidden;
}
.r3 {
height:1px;
margin:0px 3px;
overflow: hidden;
}
.r4 {
height:1px;
margin:0px 4px;
overflow: hidden;
}
--></style>
<div id="kadomaru">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
<div>本文コンテンツ</div>
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>

ですがcssでは円はかけなかったと思うのでよく見ると角『丸』テーブルというより角『ちょっと角々』テーブルって感じですね(笑）

用意するのは6つの画像(別に10pxでなくてもいいです）
・半径10pxの1/4円(左上用、右上用、左下用、右下用）
・横ライン用画像(1px*10px)
・縦ライン用画像(10px*1px)

<style type="text/css"><!--
.kadomaru {
float:left;
margin:0px;
}
#LT {
width:10px;
height:10px;
background-image:url(左上画像のパス);
background-repeat: no-repeat;
}
#RT {
width:10px;
height:10px;
background-image:url(右上画像のパス);
background-repeat: no-repeat;
}
#LB {
width:10px;
height:10px;
background-image:url(左下画像のパス);
background-repeat: no-repeat;
}
#RB {
width:10px;
height:10px;
background-image:url(右下画像のパス);
background-repeat:no-repeat;
}
#XLINE {
width:480px;
height:10px;
background-image:url(横ライン画像のパス);
background-repeat: repeat-x;
}
#YLINE {
width:10px;
background-image:url(縦ライン画像のパス);
background-repeat:repeat-y;
}
#contents {
width:480px;
background-color:背景色;
}

--></style>

<div class="kadomaru" id="LT"></div>
<div class="kadomaru" id="XLINE"></div>
<div class="kadomaru" id="RT"></div>
<div style="clear:both;"></div>
<div class="kadomaru" id="YLINE">&nbsp;</div>
<div class="kadomaru" id="contents">

ここに本文を書く

</div>
<div class="kadomaru" id="YLINE">&nbsp;</div>
<div style="clear:both;"></div>
<div class="kadomaru" id="LB"></div>
<div class="kadomaru" id="XLINE"></div>
<div class="kadomaru" id="RB"></div>
<div style="clear:both;"></div>

でも出来ます
※状況によってちょっとした微調整は必要になるかもしれませんがそれは色々試してみてください

お礼

返事おくれました。
詳しい説明とサンプルありがとうございます。

＞角丸　css』『角丸　テーブル』『角丸　画像』『角丸　
＞javascript』などを検索にかければ色々とサンプルが出てきますよ
このように検索をかければよかったんですね。私のような素人だと、
検索の仕方が上手くできないもので・・

このサンプルを利用して、納得の行くものが出来そうです。
後は、このＣＳＳを外部ファイルとして読めば、ＨＴＭＬの方が
複雑にならないので、助かります。
やはり、イメージのものを作ろうとしすると、ＪＳファイルや、テブールでテーブルを囲ったり、その中にまたＪＳファイルを読み込んだと
やっていくと、複雑になりすぎて、作る時もそうですが、手直しする時も、外部ファイルは別として、ＨＴＭＬを修正するときに分けが分からなくなってしまいますので、私のような素人には、すごくたすかります

回答No.4

leap_day

こんにちは

ちょっと修正

下側の画像を使ったほう本文が2行以上の時には対応して無かったです（＞＜）

#contentsと#YLINEのcssに

height:***px;
追加してください

お礼

訂正までしてくれてありがとうございます。
忙しくて、下記サンプルで、作っては居ませんが、この休みで、作ってみます。イメージしていたのが作れそうで凄く満足していますし、大変助かっています。

回答No.2

waracabin

No.1の方同様、CSSのほうが複雑だと思います。テーブルは確かにややこしく見えますが、目が慣れればわかりやすいもんです。

もし「幅は固定」と決まっている(縦には伸縮するが、横幅は固定)なら、簡単に説明すると、

○□□□□□□○←この列自体の画像(a)を用意し、背景指定
□□□□□□□□
□□□□□□□□
□□□□□□□□←伸縮部分は画像(b)の背景を縦にリピート指定
□□□□□□□□
□□□□□□□□
○□□□□□□○←この部分も画像(c)を用意し、背景指定

ざっくばらんに言うとこんな感じでできます。画像3つを用意するだけで大丈夫です。

というと簡単そうですが、たぶん質問者さんはCSSについてあまり知識がないと見受けられますので、設定でちんぷんかんぷんになるかと思われます。

ので、やはり「テーブルが無難」かなぁと……。

お礼

返事おくれました。

ＣＳＳはあんまり使ってないので、よく理解していない部分も多いです。やはり、テーブルの方がよさそうですね。
でも、他の回答者さんが、ＣＳＳでサンプルを作ってくれたので、そちらも試してみたいと思います。

回答No.1

papamama18

>ＨＴＭＬでの、角を丸くするやり方だと、ソースが多くなって、ただでさえ、複雑になるのに、さらに複雑になって

ＣＳＳで角丸を実現するほうがよっぽど複雑じゃないですか？
テーブルが一番簡単でしょう。ソース多くなりますか？
もっとも、テーブルの角丸は、推奨されませんがね。

お礼

テーブルが簡単なんですね！
パット見テーブルの方がややこしそうだとおもったので。