アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：sato1221
  • 質問日時：
  • 回答数：5件

先日、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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞先日、IEでも閲覧可能で、テーブルの線を細くするスタイルシートを



重大な誤解をされているようです。
<!doctype html>
のDOCTYPE宣言は、どのブラウザも標準モードで起動させるスイッチの役目をしています。<!DOCTYPE は、実際のHTMLの仕様にあわせなければなりません。
　<!DOCTYPE html>はHTML5用のものですが、HTML5では著者が利用できる要素(タグ)とユーザーエージェントが解釈すべきものが明確に区別されています。
　⇒1.2. 後方互換性( http://standards.mitsue.co.jp/resources/w3c/TR/h … )

下記でチェックしてみましょう。まだ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;}
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： naokita
  • 回答日時：

<!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以上かな。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： DrFell
  • 回答日時：

ジェネレーターを使われてはいかがでしょうか？



というのもテーブルの角を丸くして、立体的にする書き方は無数にあります。ターブルの四隅を丸くするのも、一か所だけ丸めるのも指定できます、また丸の半径も。立体（影の）距離・濃さ・色と自由に設定できますので、ここで答えたソースが角を丸くして、立体的にする書き方と誤解されるとちょっと違うかな？と思いますので。
ジェネレーターで作成したソースをご希望の
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-gene …
ココ日本語です。さらにほぼ希望の事に対する操作しかできませんのでsato1221 さん向き。ただ、数字を入れないとダメなので、操作性がいまいちです。
希望の形ができたら、右上にある「ソース」をクリック、
selector {
●ココに一杯ソースがでてきます。
……
●
}
この●～●の間の英文字を先の●ここに割り込ませる●にコピペすれば多分OK。ダメなら、もう一度ソースを見せてくれれば、誰かが指導してくれると思います。

【例2】http://css3.mikeplate.com/
ココ英語です。でも、全然こわくないです。左側のメニューを上から順番に表示させ、右に反映される状態をみながら、つまみを適当に動かしてみて好みの状態に持っていってください。一番上のcss3 Radius and Box Shadowがお望みのものです。右下にソースが表示されますので、そのソースを●ここに割り込ませる●の場所に入れればok。さらに、左のメニューを選択すれば、先に作成したものにプラスしてcss3でできる効果が楽しめます。やはりつかいたければ、同じ場所にコピーすればOK

但し、ｃｓｓでの角丸やシャドウは新しめのブラウザでないと動きませんし、表示されません。古いバージョンのブラウザにも対応させたいのであれば、#1さんのいう画像での表示、その他ややこしい方法となります。Ie9でも表示可能です。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

影をつけるの忘れてた。


★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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： nitto3
  • 回答日時：

円を描くタグはないですから、角は図を配置します。


そのようなサイトを見たら、参考にするといいでしょう。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報