- ベストアンサー
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を見るなんてこと出来ないですよね？ どうかよろしくお願いいたします。
関連するQ&A
- 角丸テーブルのCSS化？
既存のテーブルレイアウトのサイトを、 CSSレイアウトに変更しようと思っています。 大体は大丈夫なのですが、問題は角丸テーブル。 縦横自由伸張の(影付き)角丸テーブルなので、 一番単純な部分でも9個のtdがある状態です。 これはどういうふうにしたら良いでしょうか。 9個のDIVというのは複雑すぎますし… 何か良い案があればアドバイスをお願いします。
- ベストアンサー
- HTML
- CSS３で角丸写真にシャドーを付ける方法
現在独学でＨＴＭＬ５とＣＳＳ３の勉強をしています。 写真を角丸加工してそれにＣＳＳで「box-shadow」プロパティで影を付けようとすると、角丸でカットした部分が白く残ってしまいます。 また、「border-radius」で角丸にしても同じです。 写真のサイズを300×225ｐｘにした場合、写真を角丸にしても（カット部分は透明にしてあります）、ボーダーで角丸にしても結局は長方形のスペースはそのまま残ってしまうと言う事ですか。 写真を角丸加工して影を付けたい場合は、フォトショップなどで加工したものを貼り付けるしかないのでしょうか。 ごまかしで右隅のカットした部分を黒に塗っておけばそれらしくは見えるのですが。 ＣＳＳで処理ができれば１回の設定でできると考えたのですが、やはり甘い考えだったのでしょうか。 宜しくお願い致します。
- ベストアンサー
- CSS
- HTML、CSSについて。テーブル背景がズレる。
こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); } ・ ・ ・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した！と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。
- 締切済み
- HTML
- 長方形の縦横、同じ大きさだけ変形させる方法を教えてください。
続けての質問失礼します。 2つの重なった長方形を作り、はみ出ている背景の大きな長方形の部分が、前面の長方形の縁（幅は均等）のように見えるように長方形を作る方法を教えてください。 また、本当は角丸長方形でこれを実現したいと考えています。角丸長方形の場合、もしやり方に工夫が必要なら教えていただけるとありがたいです。 ※ただ、枠線をつけるだけではなく必ず2枚の長方形が必要です。 ※※方法はなんでもいいのですが、できればillustratorとphosohopのそれぞれの作り方を教えていただけますと本当にありがたいです。 どうかよろしくお願いいたします。
- ベストアンサー
- グラフィックソフト
- イラレ-角丸長方形ツールを文字ツールで切り抜きたい
Illustrator CC を利用しています。 1. 角丸長方形ツールを使って背景にするオブジェクト？を作成 2. 別レイヤーに切り抜きたい文字を入力 3. 2の文字を使って、1の真ん中辺を切り抜く。 3番目を行いたいのですが、どのようにすればよいのでしょうか？ 切り抜いた部分は透過になってほしいです。 ご教示の程、よろしくお願いします。
- ベストアンサー
- Illustrator（イラストレーター）
- CSSで角丸テーブル
CSSでDIV要素を使って入れ子し、角の丸いテーブルを作っているのですが、なぜか誤差が出てしまいます。 CSSのソースは次のようなものです。 table（2）.gifは角丸テーブルの画像です 画像サイズ：横440px 縦11px .box-center-start { width: 440px; background: url(image/table.gif); background-repeat: no-repeat; } .box-center { width: 440px; background-color: white; margin: 20px 10px 20px 8px; float: left; } .box-center2 { width: 440px; background-color: white; padding: 0px 10px 10px 10px; border-right: 1px solid gray; border-bottom: 1px dashed gray; border-left: 1px solid gray; } .box-center3 { width: 440px; background-color: white; padding: 10px 10px 0px 10px; border-right: 1px solid gray; border-left: 1px solid gray; } .box-center-end { width: 440px; background: url(image/table2.gif); background-repeat: no-repeat; } このように記述し、HTMLに <DIV class="box-center"> <DIV class="box-center-start"></DIV> <DIV class="box-center2"> ～内容 </DIV> <DIV class="box-center3"> ～内容 </DIV> <DIV class="box-center-end"></DIV> と打ってもなぜか綺麗に表示されません。 クラス「box-center-start（end）」の下に、少し余白が入ってしまうのです。（10pxほどの） 何方か助言お願いしますm( _ _ )m
- 締切済み
- HTML
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- CSSでよく作られる背景の作り方を教えてください。
お世話になります。ＣＳＳ初心者の者です。 もしかしたら基本的な質問だと思いますが初心者の私には分からなかったのでどうか詳しい方教えてください。 現在ウェブサイトを作成しているのですがいろんなサイトでよく見るような中央揃えで伝えたい情報を載せて、左右には背景色なり背景画像なりが表示されるような背景はどうやって作るのですか？ 調べたところＣＳＳを使っているというのは分かったのですが肝心のＣＳＳソースというものが分かりませんでした。 疑問になっているのは ・ブラウザサイズに関係なく中央にメインの情報ページを置くにはどうしたらいいのか？ ・中央部分の両端にドロップシャドウのような効果を出すには？ といったようなことです。 参考までにこういうような効果を出したいというサイトを載せておきます。正直困っています、どうかよろしくお願いします。 http://www.msgallery.jp/ http://www.uc-company.co.jp/ http://www.nkk-sys.com/index.html
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで背景を多重化する方法
CSSでdivの中の背景を多重化したいと思いまして、 なんとかお知恵を拝借できればと思い投稿させていただきました。 やりたいことは、添付の画像のように、テキストの量によって背景の●がちゃんと下に動いて欲しいのです。 こんな感じでできるかなと思って試行錯誤していましたが、ぜんぜんできませんでした。 【html】 <div class="parent"> <div class="bg_upper"> <div class="bg_lower"> <div class="content"> テキスト・・・ </div> </div> </div> </div> 【CSS】 div.parent { position:relative; } div.bg_upper { position:absolute; top:0; left:0; background:url(../images/bg_tl.png) left top no-repeat; } div.bg_lower { position:absolute; bottom:0; right:0; background:url(../images/bg_br.png) right bottom no-repeat; } <div class="content">に対して、height:100pxのように明示的に高さを指定してやるとそれらしくは なったのですが、高さは可変なので使えませんでした。 なんとかヒントいただけましたら助かります。 よろしくお願いします。
- ベストアンサー
- HTML
- 背景リピート―反映されない
背景をリピートしたいのですが、反映されません。 ～HTML～ <body> <div id="container"> <div id="about"> ここに背景をリピートさせたい。 </div> </div> </body> ～CSS～ #container #about { background-image: url(img/○○.jpg); background-repeat:repeat-y; } これだけでは駄目なのでしょうか？ 全くの無知で申し訳ありません。。
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
ありがとうございます。 怒られそうであれなんですけど・・・ やっぱり下の画像とテーブルの隙間だけは埋まりませんでした・・・ もう少し、見直してチェックしてみます。