- ベストアンサー
CSSで背景に角丸長方形を置く方法
CSSで背景に角丸長方形を置く場合はどのようにすればいいのでしょうか？ テーブルだと一番上と一番下、さらにその他の部分と分けて背景をつければ大丈夫だと思いますが、CSSだとどのようにして作るのでしょうか？ やっぱり3つのdivで分けて作成するしかないのでしょうか？ http://www.takasu.co.jp/about_operation/price/index.html また、上記の参考サイトのようになあにテーブルが入っている場合はどうすればいいのですか？ テーブルを途中で区切るわけにもいかなそうですし・・・ どうかよろしくお願いいたします。
- HTML
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
> 怒られそうであれなんですけど・・・ > やっぱり下の画像とテーブルの隙間だけは埋まりませんでした・・・ 怒りませんよ、別に。物言いを厳しいと受け止められているかもしれませんが、ヴァーチャルでしか知らない方に怒るつもりなどありませんから。厳しい物言いをすることと、怒る、という行為はまったく別のものです。 ただ、「隙間が埋まらない」のは「最後の下の角丸画像とdivの間」だったのでは？「下の画像とテーブルの隙間」、つまり<table>と<img class="under" src="./img/hogehoge.gif" ～ />の間を無くしたいのであれば、"div.categoly"に下方向のpaddingがあってはだめです。 オリジナルが： --------------------------------------------------------------------- .categoly { (省略） padding-bottom: 20px; (省略） } --------------------------------------------------------------------- となっていたので、私の修正版でも： --------------------------------------------------------------------- div.categoly { (省略） padding: 20px 0 20px 20px; (省略） } --------------------------------------------------------------------- とまとめて定義したまでなんですけど…？ 余白がいらないのであれば、padding-bottomの値を０にして下さい。
その他の回答 (4)
- abril
- ベストアンサー率69% (388/560)
> 以下、一部省略しましたが書かせていただきました・・・ 率直に申し上げてかなりとんちんかんな構成になっていますね。 とりあえず、質問者様のオリジナルのソースに”なるべく近い形”で、隙間ができる不具合を解消できる様に修正してみました。 <div class="categoly">に入る<table>のwidthが655px、<div class="categoly">のpadding-leftが20px、ということは<div class="categoly">のwidth及び上下角丸画像は655＋20＋20＝695px、ですね？ ※それにしてはHTML内で何故か<table width="200"～>となってるのは解せませんが、CSSの定義の方が優先されるので無視します。 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" href="./css/common.css" type="text/css" media="all" /> <title>サンプル</title> </head> <body> <h2><img src="./img/hoge.gif" alt="見出し" width="695" height="15" /></h2> <div class="categoly"> <table cellspacing="0" cellpadding="0" border="0" summary="サンプル"> <tr> <td class="tit">aaa</td> <td class="tit">aaa</td> <td class="tit">aaa</td> </tr> </table> </div> <img class="under" src="./img/hogehoge.gif" alt="." width="695" height="15" /> </body> </html> --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- h2 { font-size: 1px; line-height: 0; margin: 0; } div.categoly { background: url(../img/price1-middle.gif) repeat-y; padding: 20px 0 20px 20px; margin: 0; } div.categoly table { width: 655px; border-collapse: collapse; margin-top: 15px; } div.categoly td { border: solid 1px #9f848c; text-indent: 10px;※←これは本当に必要ですか？padding-leftと混同されていませんか？ padding: 10px; } div.categoly td.tit { background-color: #e1e1e1;※←もしtd内が全てこの色で良いなら上記定義に含めれば良いのでこのclassは不要です。 } img.under { vertical-align: top; } --------------------------------------------------------------------- "hoge.gif"をそのまま<img>タグで配置すると隙間ができます。質問者様は「上の<h2>の画像」と仰っているのでここでは<h2>タグの子要素としてマークアップし、<h2>のスタイルを調整しました。 ・一括指定できるプロパティはなるべくまとめて記述する。 ・この場合のスタイルでは、backgroundにはrepeat-yでレンダリングするリピート方向を定義する事が必須。 ・セレクタの使い方は正しく。 ・プロパティは当てずっぽうに定義しない。無効なプロパティが多い（div.categolyの"vertical-align: bottom;"など）。 ・先ず適切なマークアップありき、で構成を考えること。スタイルはそれに付随するもの。
- abril
- ベストアンサー率69% (388/560)
> また、いまさらなんですが、HTMLはソースで見れるのですが、CSSを見るなんてこと出来ないですよね？ うーん、まだそのレベルでしたか…できますよ、勿論。見られるからこそ、第三者である私などが先程の様に具体的に人様のサイトのスタイルを解説できるわけで。HTMLソースが見れれば、その中に、ちゃんと参照しているCSSへのパスが書かれています。ブラウザのアドレスバーにそのパスを入力すれば、もうそれでCSSファイルが表示されますよ。JavaScriptでCSSファイルを分岐させている様な場合でも同じです。まずJavaScriptへのパスを見て、そのJavaScriptファイルを表示させて、そこからCSSファイルへのパスを得られますから。 > 最後の下の角丸画像とdivの間に小さな空白ができてしまいます・・・約2px程度でしょうか？ > 上の<h2>の画像はimgにvertical align：bottomを指定してなんとかなったのですが・・・ 質問者様が実際に作成されたソースを提供して下さい。それにより、原因と対処は色々考えられますので。
お礼
ありがとうございます。 そして・・・なんか、すみません。 CSS見れるなんて初めて知りました。 もっと頑張ります。 以下、一部省略しましたが書かせていただきました・・・ <img src="img/hoge.gif" /> <div class="categoly"> <table width="200" border="1" cellspacing="0"> <tr> <td class="tit">aaa</td> <td class="tit">aaa</td> <td class="tit">aaa</td> </tr> </table> </div> <img class="under" src="img/hogehoge.gif" /> ***************CSSになります********************** .categoly { background-image: url(img/price1-middle.gif); padding-bottom: 20px; margin: 0px; padding-top: 20px; vertical-align: bottom; padding-left: 20px; } table { width: 655px; border-collapse: collapse; border-color: #9F848C; margin-top: 15px; padding: 10px; margin-left: 0px; vertical-align: bottom; } td { border-collapse: collapse; border-color: #9F848C; text-indent: 10px; } .tit { background-color: #E1E1E1; } .under { vertical-align: top; }
- abril
- ベストアンサー率69% (388/560)
ANo.1 > ・それ以外の背景（左右にリピートされてレンダリングされる線）は、 ↓ > ・それ以外の背景（リピートされてレンダリングされる左右の線）は、 「レンダリングの方向が水平」の様な誤解を招きかねない表現でしたので、訂正しておきます。
- abril
- ベストアンサー率69% (388/560)
> http://www.takasu.co.jp/about_operation/price/index.html > 上記の参考サイトのようになあにテーブルが入っている場合はどうすればいいのですか？ 別にテーブルが入っている・いないで悩む様な構成ではありせんね。 上記サイトに限って言えば、 ・角丸上画像は、「顔」「肌」といった”見出し”画像となるので、<h2>の中に直接<img>でマークアップ。 ・角丸下画像は、カテゴリ終了毎に挿入されるページ内ナビの直前に直接<img>で配置。 ・それ以外の背景（左右にリピートされてレンダリングされる線）は、子要素の<table>を囲む<div class="category">にbackgroundで定義。 という至って簡単な構造です。この場合は、丁度良く角丸上画像が見出しを含む構成になっているので、<h2>の内容として画像を配置することができ、無理のないマークアップとなっています。角丸下画像は特に意味を持たせることなくそのまま置いていますが。下画像の扱いについては、制作者によってマークアップやスタイルの考え方が分かれるところだと思いますが、都合よくそれとセットで「カテゴリ終了毎に挿入されるページ内ナビ」があるので、私だったら後者のリストタグの背景として組み込んでしまうかも知れません。 > CSSで背景に角丸長方形を置く場合はどのようにすればいいのでしょうか？ > やっぱり3つのdivで分けて作成するしかないのでしょうか？ これは構成内容によってケースバイケースでしょう。上記のケースの様に、たまたま角丸画像を論理的に都合の良い状態で配置できる場合もあるでしょうし、全て単なる背景画像として3ブロックに分けて処理せねばレイアウトが難しい場合もあるでしょう。ただ、できるだけ「角丸画像を配置する為だけの空タグでのマークアップ（<div class="hoge_top"></div><div class="hoge_cont">内容内容…</div><div class="hoge_bottom"></div> といった様な）」は避けられる様に、前後の要素の構成を含めて考える方がベターかと思います。 ※質問者様は、参考にしたいサイトを見つけた時はまずそのソースを見て解析してみる、というステップをそろそろ踏まれた方が良いですよ。基本ですので。
お礼
いつもありがとうございます。 ご助言いただいたとおり、なんとかそれらしくはできたのですが・・・ あと少し違うところが。 最後の下の角丸画像とdivの間に小さな空白ができてしまいます・・・ 約2px程度でしょうか？ 上の<h2>の画像はimgにvertical align：bottomを指定してなんとかなったのですが・・・ 重ねて質問で申し訳ないのですが、どうかよろしくお願いいたします。 また、いまさらなんですが、HTMLはソースで見れるのですが、CSSを見るなんてこと出来ないですよね？ どうかよろしくお願いいたします。
お礼
ありがとうございます。 怒られそうであれなんですけど・・・ やっぱり下の画像とテーブルの隙間だけは埋まりませんでした・・・ もう少し、見直してチェックしてみます。