- ベストアンサー
テーブルの角を丸くして、立体的に
- テーブルの角を丸くし、立体的にする方法を教えてください。
- 先日教えていただいたスタイルシートを使用して、テーブルの角を丸くし、立体的にします。
- IEでも閲覧可能なスタイルシートを使用して、テーブルの角を丸くし、立体的にする方法を教えていただけますか。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞先日、IEでも閲覧可能で、テーブルの線を細くするスタイルシートを 重大な誤解をされているようです。 <!doctype html> のDOCTYPE宣言は、どのブラウザも標準モードで起動させるスイッチの役目をしています。<!DOCTYPE は、実際のHTMLの仕様にあわせなければなりません。 <!DOCTYPE html>はHTML5用のものですが、HTML5では著者が利用できる要素(タグ)とユーザーエージェントが解釈すべきものが明確に区別されています。 ⇒1.2. 後方互換性( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#backwards-compatible ) 下記でチェックしてみましょう。まだHTMLがサーバー上になければ右上のDATAタグで直接ペーストしてチェックできる。 ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) ＞テーブルの角を丸くして、立体的にする書き方 はCSS3の範囲に入りますから、IE9以降でないと出来ません。 古いIE用に、特殊な手法を使うことも出来ますが、そこまでする必要はないでしょう。Webにおいて大事や事は、なによりも内容ですから。 table{text-align:center;} table{dispaly:block;/*border-collapse: collapse;*/border-radius:5px;border:solid 1px red;padding:5px;}
その他の回答 (4)
- naokita
- ベストアンサー率57% (1008/1745)
<!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"><!-- .WebDesign{ border-collapse:separate; border-spacing:0; border:solid #1C79C6; border-width:1px 0 0 1px; border-radius:8px; width:400px;} .WebDesign th,.WebDesign td{ padding:.5em; border:solid #1C79C6; border-width:0 1px 1px 0;} .WebDesign tr:first-child th:first-child,.WebDesign tr:first-child td:first-child{ border-top-left-radius:8px;} .WebDesign tr:first-child th:last-child,.WebDesign tr:first-child td:last-child{ border-top-right-radius:8px;} .WebDesign tr:last-child th:first-child,.WebDesign tr:last-child td:first-child{ border-bottom-left-radius:8px;} .WebDesign tr:last-child th:last-child,.WebDesign tr:last-child td:last-child{ border-bottom-right-radius:8px;} --></style> </head> <body><div> <table class="WebDesign"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> <table class="WebDesign" style="margin:20px; box-shadow:3px 4px 8px silver;"> <tr><th rowspan="2">1</th><th>2</th></tr> <tr><th>3</th></tr><tr><th colspan="2">4</th></tr> </table> </div></body></html> 以前にそれを回答した者です。IE9以上かな。
- DrFell
- ベストアンサー率55% (305/551)
ジェネレーターを使われてはいかがでしょうか？ というのもテーブルの角を丸くして、立体的にする書き方は無数にあります。ターブルの四隅を丸くするのも、一か所だけ丸めるのも指定できます、また丸の半径も。立体（影の）距離・濃さ・色と自由に設定できますので、ここで答えたソースが角を丸くして、立体的にする書き方と誤解されるとちょっと違うかな？と思いますので。 ジェネレーターで作成したソースをご希望の table.WebDesign{ border-collapse: collapse; width: 400px;●ここに割り込ませる●} table.WebDesign,table.WebDesign td{border:solid 1px #1C79C6;} といいと思います。 【例1】http://css-eblog.com/eblog_sample/0912/css3-generator/ ココ日本語です。さらにほぼ希望の事に対する操作しかできませんのでsato1221 さん向き。ただ、数字を入れないとダメなので、操作性がいまいちです。 希望の形ができたら、右上にある「ソース」をクリック、 selector { ● ココに一杯ソースがでてきます。 …… ● } この●～●の間の英文字を先の●ここに割り込ませる●にコピペすれば多分OK。ダメなら、もう一度ソースを見せてくれれば、誰かが指導してくれると思います。 【例2】http://css3.mikeplate.com/ ココ英語です。でも、全然こわくないです。左側のメニューを上から順番に表示させ、右に反映される状態をみながら、つまみを適当に動かしてみて好みの状態に持っていってください。一番上のcss3 Radius and Box Shadowがお望みのものです。右下にソースが表示されますので、そのソースを●ここに割り込ませる●の場所に入れればok。さらに、左のメニューを選択すれば、先に作成したものにプラスしてcss3でできる効果が楽しめます。やはりつかいたければ、同じ場所にコピーすればOK 但し、ｃｓｓでの角丸やシャドウは新しめのブラウザでないと動きませんし、表示されません。古いバージョンのブラウザにも対応させたいのであれば、#1さんのいう画像での表示、その他ややこしい方法となります。Ie9でも表示可能です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
影をつけるの忘れてた。 ★tableのままで丸めは出来ます。 ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) で検証済みのHTML4.01strict + CSS3 です。 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- table[summary="テスト"]{border-radius:5px;border:solid 1px red;padding:5px;box-shadow: 10px 10px 10px rgba(0,0,0,0.4);border-spacing:0;} table[summary="テスト"] td{padding:0.5em 1em;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table summary="テスト" border="1"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<td>aa</td><td>AAAA</td><td>aaaaaaaa</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>aaaaa</td><td>aa</td><td>aaa</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- nitto3
- ベストアンサー率21% (2656/12205)
円を描くタグはないですから、角は図を配置します。 そのようなサイトを見たら、参考にするといいでしょう。
