- ベストアンサー
テーブルの中で文字に影をつけることは可能でしょうか？
こんにちは。 上記のタイトルを質問させて頂きます。 テーブルを作ってその中の文字に影をつけることは可能でしょうか？ ここでいう影とは、スタイルシートで使うabsoluteで重ねる影でも何でもいいので、とりあえず普通の文字と変化をつけたい影です。 自分で色々調べて、rerativeとabsoluteの２通りで試したのですが、無理でした・・・。 具体的には、 rerativeで影をつけようと文字を重ねようとすると、段落になり、重ならないです。 また、 abosoluteで影をつけようと文字を重ねようとすると、テーブルから外れてしまい、失敗です。topやleftなどで、無理やり合わせてしまうと、ブラウザのウインドウを小さくしたときに、シルエットが変わってしまい、ダメです。 あと、Javaスクリプトなど、セキュリティーがうるさいのは使いたくないので、どうにかなりませんでしょうか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
やはり、影と言えば filter: shadow()でしょう。 color=影の色 direction=影の方向 strength=影の長さ 自由に影をコントロールできます。 <table border=1> <tr> <td> <div style="width: 100%; filter: shadow(color=#999999,direction=135,strength=7);"><h1>影付き文字</h1></div> </td> <td> <div style="width: 100%; filter: shadow(color=#333399,direction=220,strength=2);">影付き文字</div> </td> </tr> </table> http://www.tohoho-web.com/css/reference.htm 一番下のフィルタ http://www5e.biglobe.ne.jp/~access_r/hp/filter/filter_008.html
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
スタイルシート（css含む）での影付き文字は文法的に 美しくなく敬遠されがちです。 どうしてもというなら止めませんが、極力避けるべき です。 以下サンプル <table border=1> <tr> <td> 通常文字 </td> <td> <div style="color: gray;margin-top: 0.2em;text-indent: 0.2em;">影付文字サンプル</div> <div style="color: black;margin-top: -1.2em;">影付文字サンプル</div> </td> </tr> </table>
実際にやっていないので偉そうなことはいえないのですが。 とりあえずあなたがお書きになった内容を書き出してみてはいかがでしょう。そうすると問題点がわかるかと。
補足
それもそうですね！ <html> <head> <title>a</title> </head> <body> <table border="" cellspacing="" cellpadding="" align="center" width="600" height="100" bordercolor="orange" bgcolor="" background=""> <tr> <td> <DIV align="center" style="position:absolute; top:13px; left:2px; z-index:3"> <font size="6" color=""><B>あいうえお</B></font><BR> </DIV> <DIV align="center" style="position:absolute; top:15px; left:0px; z-index:4"> <font size="6" color="yellow"><B>あいうえお</B></font><BR> </DIV> </td> </tr> </table> </body> </heml> お願いします。
お礼
そうなんですか！ 敬遠されていたのか・・・。 全然しらなっかったです！ ありがとうございます！ これも結構良い影文字ですね！