- ベストアンサー
fieldsetについて
ryota2の回答
- ryota2
- ベストアンサー率43% (61/140)
CSS Level 1の仕様書をみてみました。 5.5.22 'border' Value: <border-width> || <border-style> || <color> Initial: not defined for shorthand properties Applies to: all elements Inherited: no Percentage values: N/A ( http://www.w3.org/TR/REC-CSS1#border ) 「border:2px dotted #999999;」のように直しても上の線がおかしいです。IEのバグと思われますので、これだけはどうしようもありません。 どうしてもやりたいのであればテーブルを組んで画像を使うといいです。
関連するQ&A
- <BODY>～</BODY> の中に <STYLE type="text/css">～<STYLE>
スタイルシートのことで質問があるのですが、 wikiに似たものでxoopsと言うものがあります。 現在このxoopsでサイトを構築しているのですが、サイトの見栄えを決定する「テーマ」と言うものがあります。 この「テーマ」はhtmlとcssで出来ています。 コンテンツの編集にはxoopsにインストールしたエディタ(fckeditor）を使っているのですが（つまりweb上でエディットしています）、その中でスタイルを使う必要が出てきました。 具体的には、１ページの中に表をいくつか入れたいのですが、１つ目は表の幅を画面の100%に、２つ目は画面の50%にしたいのですが、２つ目の表も幅が100％になってしまいました。 原因は「テーマ」に使われているcssに table {width:100%; ～～ と記述されていることでした。 本来ならば、 <TABLE style="width:50%;"> <TBODY> <TR> <TD style="border: 1px #0000ff dotted;">カラム1</TD> <TD style="border: 1px #0000ff dotted;">カラム2</TD> </TR> <TR> <TD style="border: 1px #0000ff dotted;">カラム３</TD> <TD style="border: 1px #0000ff dotted;">カラム４</TD> </TR> </TBODY> </TABLE> のように書くべき何でしょうが、以下のように書いてもうまく表示されました。 （IE8、GoogleChrome、Firefoxで確認） <STYLE type="text/css"> #sample1 {width:50%; } #sample2 {border: 1px #0000ff dotted; } </STYLE> <TABLE id="sample1"> <TBODY> <TR> <TD id="sample2">カラム1</td> <TD id="sample2">カラム2</td> </TR> <TR> <TD id="sample2">カラム３</td> <TD id="sample2">カラム４</td> </TR> </TBODY> </TABLE> つまり<BODY>～</BODY>のなかにスタイルを記述したのですが、本来はダメですよね？ 何か、正当ないい方法はありませんでしょうか？ ちなみに、テスト表示したxoopsのサイトをブラウザの「ソースを表示」で見てみると、上記の前後に <!-- content (body) --> <a name="top_of_pico_body" id="top_of_pico_body"></a> <div class="pico_body" id="pico_body"> （省略） </div> が付いていました。
- ベストアンサー
- HTML
- tableにtable。table同士の間隔を拡大
スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- 楽天ブログ・日記の下に表示のおすすめアイテムって・・・。
ブログ初心者です。 いつかはアフェリエイトまでできると良いな～と思っていますが、まだその前の段階ですでにつまづいております・・・（汗） メインの日記の下に、おすすめアイテムを載せられるように設定したのですが、こちらの画像は私自身で気にいった商品を載せられるのですよね・・・。 （もしかして、楽天の広告ページ？？） 【Recommend Item】ってタイトルに出ています。 今まで、自動的にブログの内容に合うようなアイテムが表示されているような気がしますが、好きな雑貨などを載せたいのですが・・・。 もし自分で出来るならどのように画像を載せればいいのでしょうか？？ たとえばですが、アフェリエイトのやり方のページで出ていたこの商品を載せたい場合、この部分をどこに載せるとブログのおすすめアイテムに載せられるのか教えてください。 すみません・・・。 パソコンが苦手で、↓これも間違っているのかな？と思っています。 <a href="http://***" target="_blank"> .:*:.*.:*:.2本ベルトのフォーマルシューズ .:*:.*.:*:. </a> ************** さらに、画像の載せ方が分からないのですが、こちらのテンプレートを製作した方は全然ブログをされていないようなので、もし、分かる方でいらっしゃったら教えてください！ コチラは、トップやアフェリエイト部分のテンプレートらしいのですが 。 <center><table cellspacing="3" cellpadding="0" width="560"><tr><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像１</td></tr></table></td></tr></table></td><td width="34%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像大２</td></tr></table></td></tr></table></td><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像３</td></tr></table></td></tr></table></td></tr><tr><td colspan="3" align="right"><font style="font-size:10px"> </a></font></td></tr></table></center> 画像１・２・３の部分に、何を入れるとショップの商品とリンクするのでしょうか？？ どうぞ、よろしくお願いいたします。
- ベストアンサー
- ブログ
- HTML
HTML ホームページにスピンボックスというものを設置したんです。いかがその記述なんですが、下記のURLのページをご覧ください回転して出てくるのがそれです。 今は一回閉じてしまうとその後は出てこないんですが、 これを三分に一回出てくるように変えたいんです。できるんでしょうか？どこをどういじればいいんですか？ <DIV id=sp1107739598196spbox style="Z-INDEX: 75; FILTER: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand'); LEFT: -1000px; VISIBILITY: hidden; POSITION: absolute; TOP: -1000px"> <TABLE style="BORDER-RIGHT: #000000 2px dotted; BORDER-TOP: #000000 2px dotted; BORDER-LEFT: #000000 2px dotted; BORDER-BOTTOM: #000000 2px dotted" cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD title=Close style="CURSOR: hand" onclick=sp1107739598196close() vAlign=center align=right bgColor=#000000><SPAN style="FONT-SIZE: 8pt; COLOR: #ffffff; FONT-FAMILY: verdana">閉じる ×</SPAN> </TD> </TR> <TR> <TD><IFRAME style="WIDTH: 380px; HEIGHT: 350px" border="0" src="pop.html" frameborder="0" allowTransparency></IFRAME> </TD> </TR> </TBODY> </TABLE> </DIV> http://www.geocities.jp/god80or20/downline/down2/downlineinr...
- ベストアンサー
- HTML
- thのスタイルを適用するにはどうすればいいでしょう
<table border=1 class="test1"> の部分にclassを設定するだけで thのスタイルを適用するにはどうすればいいでしょうか？ 理想としては添付画像の下のテーブルの様に thの部分だけスタイルを適用したいのですが 実際はテーブルのレコード数が多い為、 <th class="test2">を全てのthにつけるのを省略したいです。 なので、<table border=1 class="test1">の部分にthのスタイルを設定したいのですが table.test1 {font-size: 5em;} の部分はどのように記述すればいいでしょうか？ 現在の table.test1 {font-size: 5em;} だとテーブルすべてに適用されてしまいます。 理想の表示は下のテーブルで 理想のソースは上のテーブルです。 ------------------ 以下ソース <html> <head> <style type="text/css"> table.test1 {font-size: 5em;} th.test2 {font-size: 5em;} </style> </head> <body> <table border=1 class="test1"> <tr><th>No</th><td>a</td></tr> <tr><th>No</th><td>a</td></tr> </table> <br> <table border=1> <tr><th class="test2">No</th><td>a</td></tr> <tr><th class="test2">No</th><td>a</td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- tdのクラスの使い方
<style type="text/css"> <!-- table { border: 1px red solid; padding:30px 30px; } </style> <body> <table border=3> <tr><td>test</td><td>test</td></tr> <tr><td>test</td><td>test</td></tr> </table> これだと、赤いテーブルの内側のみしかpaddingが有効にならないのですが、 黒いテーブルの枠もpaddingするには、 td { padding:30px 30px; } とするしかないのでしょうか？ クラス名を付けて、やりたいテーブルのtdタグだけ適用させたい場合は、 td.aaa { padding:30px 30px; } として、 <table border=3> <tr><td class="aaa">test</td class="aaa"><td class="aaa">test</td class="aaa"></tr> <tr><td class="aaa">test</td class="aaa"><td class="aaa">test</td class="aaa"></tr> </table> のように、すべてのtdタグにクラス名を付けるしかないのですか？
- 締切済み
- HTML
- 中枠の太さを1pxにしたい
以下の HTML を書いたのですが、外枠の太さは1pxになっていますが、中枠が2pxになってしまいます。中枠も1pxで表示するにはどう修正すればいいでしょうか？ ご教授よろしくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2"> <tr> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Icon</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Name</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Effect</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 111111</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 444444</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 222222</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 555555</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 333333</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 666666</div></div></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルの線を点線にする
とても初歩的な質問ですいません。 テーブルの線をすべて点線にしたいのですがどのようにしたらいいのかわかりません。 <table style="border-color:dimgray;border-style:dotted"> <tr> <td width="150" height="30"></td> </tr> <tr> <td width="150" height="30"></td> </tr> <tr> <td width="150" height="30"></td> </tr> </table> としたら周りの枠は点線なんですが ３列あるはずの線が表示されません。 その線も点線で表示させるにはどのようにしたらいいですか？
- ベストアンサー
- HTML
- tdに指定したborderの隙間について
tdにborder（dotted）を指定して線を引きたいのですが、 セルの境目に隙間が空いてしまいます。 《html》 <table class="information"> <tr> <td class="infoborder_u">営業時間</td> <td class="infoborder_u">月曜～金曜</td> <td class="infoborder_u">9：00 ～ 19：00</td> </tr> 《css》 .information{ width: 350px; height: 180px; background-color: #808080; margin: 10 0 0 0px; border-collapse: collapse; ｝ .information td{ padding-left: 10px; } .infoborder_u{ border-style: dotted; border-width: 1 0 0 0px; border-color: #000000; } 回避方法はないでしょうか？
- 締切済み
- HTML