- ベストアンサー
スタイルシートで罫線をもっと細くしたい
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
要は教えてgooと同じようなデザインをcssで実現したいのですよね。 THとTDのborder-styleをnoneに変更、TABLEにborder-collapse: collapse;を追加。 これで近くなるのでは。 TABLE { margin: 0px; border: 1px solid #8b4513; border-collapse: collapse; } TH { background-color: #ffa500; font-size: x-small; color: black; font-family:Times New Roman; padding: 0px; border-style: none; } TD { height: 20px; font-size: x-small; color: black; font-family:Times New Roman; padding: 0px; border-style: none; }
その他の回答 (3)
- beach_walker
- ベストアンサー率40% (2/5)
No.3の方の回答にほぼ賛成ですが、 thとtdのborder-styleはnoneにせず、solidのままで良いかと思います。
お礼
ご回答有難うございます。 No3の方のアドバイスとあわせてできました。 勉強になりました。 どうも有難うございました。
- mrumesuke
- ベストアンサー率45% (254/557)
1pxが限界じゃないでしょうか。 mole_moleさんの作るページよりも教えてgooの方が細く見えるとすれば、原因は背景色と罫線の色の関係にあるのかもしれません。 教えてgooでは、白と云う高輝度な背景色に、同じく高輝度なブルーやオレンジを使用しています。 もしもmole_moleさんのページの背景色が同じように明るい色だとすると、#8b4513と云う色は暗くて目立ちすぎてしまうのではないでしょうか。 なお教えてgooでは、スタイルシートを使わずにテーブルの入れ子によって罫線を細く見せています。 サンプルソースを貼りますので比較してみてください。 <body bgcolor="#fafafa"> <table width=300 style="border-color:#8b4513; padding:1px; margin:1px; border-style:solid; border-width: 1px;"> <tr><td align=center>スタイルシート<br>#8b4513</td></tr> </table> <br> <table width=300 style="border-color:#cc9933; padding:1px; margin:1px; border-style:solid; border-width: 1px;"> <tr><td align=center>スタイルシート<br>#cc9933</td></tr> </table> <br> <table width=300 style="border-color:#B9C9FF; padding:1px; margin:1px; border-style:solid; border-width: 1px;"> <tr><td align=center>スタイルシート<br>#B9C9FF</td></tr> </table> <br> <table width=300 border=0 cellspacing=0 cellpadding=1 bgcolor=#8b4513> <tr><td> <table width=300 border=0 cellspacing=1 cellpadding=1 bgcolor="#fafafa"> <tr><td align=center>入れ子テーブル<br>#8b4513</td></tr> </table> </td></tr> </table> <br> <table width=300 border=0 cellspacing=0 cellpadding=1 bgcolor=#cc9933> <tr><td> <table width=300 border=0 cellspacing=1 cellpadding=1 bgcolor="#fafafa"> <tr><td align=center>入れ子テーブル<br>#cc9933</td></tr> </table> </td></tr> </table> <br> <table width=300 border=0 cellspacing=0 cellpadding=1 bgcolor=#B9C9FF> <tr><td> <table width=300 border=0 cellspacing=1 cellpadding=1 bgcolor="#fafafa"> <tr><td align=center>入れ子テーブル<br>#B9C9FF</td></tr> </table> </td></tr> </table> </body>
お礼
ご回答有難うございます。 サンプルまで作っていただいて有難うございます。 これで見てみると、「色」の問題ではなく、何か根本的なミスがあるような気がしてきました。 太さは「見間違い」レベルではなく、はっきりとこの線を三本くらい重ねたくらいの太さです。 今現在テーブルに指定しているスタイルシートは以下の通りです。 TABLE { border-color: #8b4513; padding: 1px 1px 1px 1px; margin: 0px 0px 0px 0px; border-style: solid; border-width: 1px 1px 1px 1px; } TH { background-color: #ffa500; font-size: x-small; color: black; font-family:Times New Roman; padding: 1px 1px 1px 1px; margin: 0px 0px 0px 0px; border-style: solid; border-width: 1px 1px 1px 1px; } TD { height: 20px; font-size: x-small; color: black; font-family:Times New Roman; padding: 1px 1px 1px 1px; margin: 0px 0px 0px 0px; border-style: solid; border-width: 1px 1px 1px 1px; } このうちの、THとTDの部分をコメントアウトすると、テーブルのまわりだけがサンプルと同じ線になります。 ですが、中のTHやTD部分の罫線がmarginのままで表示されてしまうのです。 何かお気づきの点がありましたらご教示ください。
- xjd
- ベストアンサー率63% (1021/1612)
ただのHTMLですが、こんなのはダメですか? <body> <table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td> <table width="100" border="0" cellspacing="1" cellpadding="1"> <tr> <td bgcolor="#FFFFFF">Table Header</td> </tr> <tr> <td bgcolor="#FFFFFF">1dotの罫線</td> </tr> </table> </td> </tr> </table> </body>
お礼
ご回答有難うございます。 手入力だと全てのページを修正しなければならないので今回はスタイルシートでの質問としました。 言葉足らずですみませんでした。
関連するQ&A
- スタイルシートテーブルの罫線を細くしたい
例えば以下のようにHTMLを書いた場合、 tableとtdのスタイルシート指定により、 外枠と内枠で罫線がかさなり、 若干太くなってしまいます。 細くしたいのですが、どうすれば出来るのでしょうか？ <table style="{border:1px solid #000000;border-spacing:0px}"> <tr> <td style="{border:1px solid #000000;padding:0px}">あああ </td> <td style="{border:1px solid #000000;padding:0px}">いいい </td> </tr> </table>
- ベストアンサー
- その他（インターネット・Webサービス）
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートについて
スタイルシートについて質問です。 下記をTableの基本スタイルにしています。 特定のTableのみ、borderカラーを#666666にしたい場合 上記基本スタイルを生かしたままで簡潔なスタイルの設定方法はないでしょうか。 table, td, th {border: 1px solid; border-collapse: collapse} .w550 {border-color: #8AC5D4; width:550px} .w550 td {border-color: #8AC5D4; text-align: center} .w550 th {border-color: #8AC5D4; padding: 5px; padding-left: 10px; color:#2A6D90} いつもスタイルシートの設定が大量になってしまう為、今回はどうにか簡潔で綺麗にしたいので アドバイスいただけると大変助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- スタイルシートでのメニュー作成で
今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■ CSS ■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■ HTML ■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- 外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
- Opera（10.10）でのスタイルシートの表示について
Opera（10.10）でのスタイルシートの表示について Operaでのスタイルシートの「border」の表示について質問させて下さい。 これは例ですが、HTMLとCSSを以下のとおりに設定しているとしますね。 ------------------------------------------------------------------ <body> <div id="layout"> <div id="box1"> <p>ボーダーのテスト</p> </div> </div> </body> ------------------------------------------------------------------ *{ margin : 0px; padding : 0px; } #layout{ width : 800px; height : 600px; padding : 10px; margin-left : auto; margin-right : auto; background-color : #FFF; } #box1{ width : 780px; height : 580px; padding : 10px; border-top : solid 1px #D1D1D1; border-left : solid 1px #D1D1D1; border-right : dashed 1px #D1D1D1; border-bottom : dashed 1px #D1D1D1; background-color : #FFF; } ------------------------------------------------------------------ このように設定した場合、「id="box3"」のボーダーは上と左が直線、 右と下が点線と表示されるのが正しい表示だと思います。 しかし、Operaで閲覧した場合なぜか「border-left」のみ表示されません。 「border-left」を「solid」から「dashed」に変更すると表示されます。 borderに合わせてwidthもちゃんと横に伸びているので、 CSSが適用されていないわけではないと思います。 また、「border-left」を「dashed」から「solid」に変更した場合には、 「border-top」と「border-right」の両方が見えなくなってしまいます。 どちらの問題も、IE6やFirefox（3.5.7）では指定通り正しく表示されました。 Operaでも同様に正しく表示させるにはどうすればよいのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートを使い<h1>で指定するには？
スタイルシートを活用して <p style="border-style: solid; border-color: green; border-width: 1px 4px; padding: 3px;"> ぼけぼけ </p> という枠を<h1>ぼけぼけ</h1>と指定しただけで表示させるにはどのようにスタイルシートを記述すればいいのでしょうか？
- ベストアンサー
- HTML
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
- スタイルシートで、マージン０に出来ません
夜分に失礼します。 個人の趣味のホームページですが ブラウザ上部と左部のマージンを０に出来ずに困っています。 スタイルシートで、margin 0;としても、マージン０にならないのに BODY句に直打ちすると、マージン０になるので、もう、ワケが分かりません。 ご参考までに、ソースを記します。 また、ブラウザはIE6です。 どうぞ、宜しくお願いします。 <HTML> <HEAD> 中略 <STYLE type=text/css> BODY_i{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: "ＭＳ ゴシック","Osaka－等幅",monospace; font-size:12pt; color:#696969; line-height:150%;} .photo1{width:982px; height:730px; background-color:#DCDCDC; border-style:solid ridge ridge solid; border-width:1px 2px 2px 2px; border-color:#DCDCDC #DCDCDC #DCDCDC #DCDCDC; text-align:center; vertical-align:middle; padding:11px 11px 11px 11px;} </STYLE> </HEAD> <BODY class=BODY_i> <!-- <BODY topmargin=0 leftmargin=0> --> <P class=photo1> <IMG SRC="test_CIMG6224.JPG"> </P> </BODY> </HTML>
- 締切済み
- その他（インターネット・Webサービス）
- スタイルシートの適応のやり方
現在ドリームウェーバーでHPを作っていますが CSSを使いメニューボタンをへこむボタンにしたいのですが うまく反映されません。 ソフトが最近から使い始めたのでうまく理解できていないところです。 a.sample{ text-decoration:none; } a:hover.sample{ color:#CC0000; border-width:0px 1px 1px 0px; border-style:solid; border-color:#990000; position:relative; top:-2px; left:-2px; } a:active.sample {/*クリック中の色*/ color:#CC0000; border-width:1px 0px 0px 1px; border-style:solid; border-color:#990000; position:relative; top:2px; left:2px; padding-left:3px; } こちらです。 手順を教えて頂けないでしょうか？
- ベストアンサー
- HTML
お礼
No4の方のアドバイスとあわせて これでできました。 tableにborder-collapse: collapse;を指定しなきゃいけなかったんですね。 勉強になりました。 有難うございました。