• ベストアンサー

角のある四角いテーブルで囲みたい(ホームページ)

Dreamweaver8を使用しています。 テーブルを利用して各項目別に区切って記述したいのですが、 これだと四角ばかりで硬いイメージになってしまいます。 下記サイトのような角が丸いテーブルを使用したいのですが、 どのようにすればよいのでしょうか? おそらくスタイルシートを使用しているのだと思いますが、 cssファイルを開いても、どこのぶぶんかわかりませんでした。 http://www.cashingpartner.com/ よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
noname#31951
noname#31951
回答No.1
yoshinobu_09
質問者

補足

ありがとうございます。 2番目のサイトの一番上「角丸テーブル スタイルシートのみ」をやってみました。 とてもいいのですが、上下のすきまがありすぎるようです。 これの調整はできますか? paddingの値など変えても変化がありません。 http://f32.aaa.livedoor.jp/~azusa/index.php?t=css&p=kadomaru よろしくお願いします。

その他の回答 (2)

  • crepon133
  • ベストアンサー率51% (399/776)
回答No.3

Nifty Corners http://www.html.it/articoli/nifty/index.html javascriptとcssで角丸を表現する方法 http://phprefa.seesaa.net/article/16250388.html

  • hachi_08
  • ベストアンサー率58% (44/75)
回答No.2

ちなみに提示されたサイトの「キャッシング最新TOPICS」部分を例にすると、下記のやり方で角丸を作っています。 ●<div id="Topics">の背景画像として角丸テーブルの上部分の画像を配置 ●<div class="detail_foot">&nbsp;</div>で背景に角丸テーブルの下部分の画像を配置 ========================================================== <!--▼キャッシング最新TOPICSここから--> <div id="Topics"> <h2 class="topics_h">キャッシング最新TOPICS</h2> ※※テーブル内の内容※※ <div class="detail_foot">&nbsp;</div> </div> ========================================================== 「角の丸いテーブルを作るタグ(CSS)」というのは存在しないので、基本的には角丸の画像を作ってそれを内容の外側に配置する…ということになります。 参考にならなかったらすみません。

関連するQ&A

  • テーブルの角を丸くして、立体的に

    先日、IEでも閲覧可能で、 テーブルの線を細くするスタイルシートを このように教えて頂きました。 このスタイルシートから、 テーブルの角を丸くして、 立体的にする書き方を教えて頂けると とっても助かります。 ------------ <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"><!-- table.WebDesign{ border-collapse: collapse; width: 400px;} table.WebDesign,table.WebDesign td{border:solid 1px #1C79C6;} --></style> </head> <body><div> <table class="WebDesign"> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> </table> </div></body></html>

    • ベストアンサー
    • CSS
  • 角が丸いテーブルをスタイルだけでやるには

    角が丸いテーブルのタブメニューがよくお洒落なサイトで使われていますよね? それと同じ事をしたいのですが、スタイルシートだけで出来るものなのでしょうか。 簡単なやり方などご存知でしたら教えてください。 お願いします。

    • ベストアンサー
    • HTML
  • スタイルシートでborderを使って角が丸い四角を記述したい

    こんにちは、HPで段組をして左がメニュー、右が本文って構成はよくありますよね?その左のメニュー部分をborderを使って四角で囲んでいるんですが、この四角の角を加工して、丸くアールをとりたいんですけど、スタイルシートの記述で可能でしょうか?もし分かったら教えて下さい。よろしくお願いします。

    • ベストアンサー
    • HTML
  • 角が丸いテーブルをCSSで作るには

    <head></head>内をいじれる(<body></body>内はいじることができない)レンタル掲示板で、ベースのテーブルの角を丸くするにはどうすればいいのでしょうか? 通常、<body></body>内に記述ができる場合は3×3のテーブルを作ってその四隅に丸い角の部分になる画像を背景として置くことで角の丸いテーブルを作ることができるということはわかったのですが、<body></body>内に記述ができない場合どうすればいいのかがわかりません。 分かる方がおりましたら教えていただけると助かります。

    • 締切済み
    • CSS
  • テーブルの角を画像を使わずに丸くさせたい

    1616BBSという掲示板のスタイルシートを弄っており、自分で解決出来ない問題が浮上しまして此の場をお借りして質問させていただきました。 テーブルの角を丸くさせる方法は画像を使ったものが主流だと思いますが、出来ればテーブルの角を丸くさせる方法を探しております。ご存知の方がいらっしゃれば、教えてくださると助かります。方法の回答じゃなく、こういう方法が載っているサイトを知っているという回答でも構いません。

  • スタイルシート(CSS)の中にテーブルのようなスタイルシートをつくりたいです。

    Dreamweaver8にてHPを作成しております。 今回CSSをやってみようと思い試行錯誤しながらがんばっているのですが、 現在スタイルシートのfloatタグなどを使って、 ヘッダー、メニュー、コンテンツ、フッターというよくある構成で作っております。 そしてコンテンツ部分以外はテンプレート機能を使い共有できるようにしています。 そして新しいページを作る際、コンテンツ部分だけを編集していくのですが、真ん中で2つにわかれた2段組の文章をつくりたくて、テーブルを使用したところ、テーブルが縦に長くなるとCSSで指定した範囲を超えてしまいレイアウトが崩れてしまいます。 これがテーブルでなく文章でなら縦に長くなっても自動的にCSSの高さが長くなってくれます。 ですので、題名のようにCSSでテーブルのような機能のあるものを教えていただきたいのですが、素人でなにぶん申し訳ないですがよろしくお願い致しますm(_ _)m

    • ベストアンサー
    • HTML
  • テーブルやボックスの角を丸くする方法を教えて下さい。

    HPの初心者です。 Win98 IE6.0を使っています。 テーブルやスタイルシートのボックスを作った場合、通常それらの4角は直角になります。 これらを丸くする方法があれば、教えて下さい。 私はやむを得ず、画像ソフトを使っています。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSで記述されたホームページ

    テーブルで記述されたホームページはDreamWeaver等でデザインを確認dきますが、CSSで記述されたホームページはブラウザでしか確認できません。 DreamWeaverでデザインを確認することはかのうでしょうか?

    • ベストアンサー
    • HTML
  • テーブルがうまくいきません

    HPの中にテーブルを使いたいんですが、 パーツがばらばらになってしまい、角もうまくつながりません。 テンプレートは配布サイトからDLしたものだったので、 メモ帳を使ってスタイルシートなしで試してみたところ、キレイにテーブルができました。 ソースが間違っているわけでもないようなので、やっぱりスタイルシートの影響ですよね…? いろいろなサイトをまわって調べてみましたが、もうパンクしちゃいそうです◎ 説明不足かもしれませんが、正直スタイルシートの何が原因なのか、ほんとにわかりません。 経験から「もしかしてこれじゃないの?」というのがあればぜひ教えてください。

  • テーブルがうまくいきません。

    HPの中にテーブルを使いたいんですが、 パーツがばらばらになってしまい、角もうまくつながりません。 テンプレートは配布サイトからDLしたものだったので、 メモ帳を使ってスタイルシートなしで試してみたところ、キレイにテーブルができました。 ソースが間違っているわけでもないようなので、やっぱりスタイルシートの影響ですよね…? いろいろなサイトをまわって調べてみましたが、もうパンクしちゃいそうです◎ 説明不足かもしれませんが、正直スタイルシートの何が原因なのか、ほんとにわかりません。 経験から「もしかしてこれじゃないの?」というのがあればぜひ教えてください!

    • ベストアンサー
    • HTML

専門家に質問してみよう