ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：noname#64096 CSSで背景に角丸長方形を置く方法
困り度：
  • すぐに回答を！
 CSSで背景に角丸長方形を置く場合はどのようにすればいいのでしょうか？
テーブルだと一番上と一番下、さらにその他の部分と分けて背景をつければ大丈夫だと思いますが、CSSだとどのようにして作るのでしょうか？

やっぱり3つのdivで分けて作成するしかないのでしょうか？

​http://www.takasu.co.jp/about_operation/price/index.html​

また、上記の参考サイトのようになあにテーブルが入っている場合はどうすればいいのですか？
テーブルを途中で区切るわけにもいかなそうですし・・・

どうかよろしくお願いいたします。
質問投稿日時：08/04/15 10:58
質問番号：3950377
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：abril > 怒られそうであれなんですけど・・・
> やっぱり下の画像とテーブルの隙間だけは埋まりませんでした・・・

怒りませんよ、別に。物言いを厳しいと受け止められているかもしれませんが、ヴァーチャルでしか知らない方に怒るつもりなどありませんから。厳しい物言いをすることと、怒る、という行為はまったく別のものです。
ただ、「隙間が埋まらない」のは「最後の下の角丸画像と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の値を０にして下さい。
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/04/15 21:31
回答番号：No.5
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：abril > 以下、一部省略しましたが書かせていただきました・・・

率直に申し上げてかなりとんちんかんな構成になっていますね。
とりあえず、質問者様のオリジナルのソースに”なるべく近い形”で、隙間ができる不具合を解消できる様に修正してみました。

<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;"など）。
・先ず適切なマークアップありき、で構成を考えること。スタイルはそれに付随するもの。
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/04/15 19:36
回答番号：No.4
この回答へのお礼ありがとうございます。

怒られそうであれなんですけど・・・
やっぱり下の画像とテーブルの隙間だけは埋まりませんでした・・・

もう少し、見直してチェックしてみます。

回答

 
回答者：abril > また、いまさらなんですが、HTMLはソースで見れるのですが、CSSを見るなんてこと出来ないですよね？

うーん、まだそのレベルでしたか…できますよ、勿論。見られるからこそ、第三者である私などが先程の様に具体的に人様のサイトのスタイルを解説できるわけで。HTMLソースが見れれば、その中に、ちゃんと参照しているCSSへのパスが書かれています。ブラウザのアドレスバーにそのパスを入力すれば、もうそれでCSSファイルが表示されますよ。JavaScriptでCSSファイルを分岐させている様な場合でも同じです。まずJavaScriptへのパスを見て、そのJavaScriptファイルを表示させて、そこからCSSファイルへのパスを得られますから。

> 最後の下の角丸画像とdivの間に小さな空白ができてしまいます・・・約2px程度でしょうか？
> 上の<h2>の画像はimgにvertical　align：bottomを指定してなんとかなったのですが・・・

質問者様が実際に作成されたソースを提供して下さい。それにより、原因と対処は色々考えられますので。
種類：補足要求
どんな人：専門家
自信：参考意見
回答日時：08/04/15 16:24
回答番号：No.3
この回答へのお礼ありがとうございます。
そして・・・なんか、すみません。
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 ANo.1
> ・それ以外の背景（左右にリピートされてレンダリングされる線）は、
↓
> ・それ以外の背景（リピートされてレンダリングされる左右の線）は、

「レンダリングの方向が水平」の様な誤解を招きかねない表現でしたので、訂正しておきます。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/04/15 16:16
回答番号：No.2
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：abril > ​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>　といった様な）」は避けられる様に、前後の要素の構成を含めて考える方がベターかと思います。

※質問者様は、参考にしたいサイトを見つけた時はまずそのソースを見て解析してみる、というステップをそろそろ踏まれた方が良いですよ。基本ですので。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/04/15 14:51
回答番号：No.1
この回答へのお礼いつもありがとうございます。

ご助言いただいたとおり、なんとかそれらしくはできたのですが・・・
あと少し違うところが。
最後の下の角丸画像とdivの間に小さな空白ができてしまいます・・・
約2px程度でしょうか？
上の<h2>の画像はimgにvertical　align：bottomを指定してなんとかなったのですが・・・

重ねて質問で申し訳ないのですが、どうかよろしくお願いいたします。

また、いまさらなんですが、HTMLはソースで見れるのですが、CSSを見るなんてこと出来ないですよね？

どうかよろしくお願いいたします。
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ