ベストアンサー

ページに点線の枠を

2003/08/20 15:36

こんにちは。 BODY{ border-width :1px 1px 1px 1px; border-style :dashed dashed dashed dashed; border-color :#000000;} スタイルシートで↑のようなかんじでページに枠をつけたのですが、線(border)はdashedに指定しても点線にはならないのでしょうか？(solidとかわりません) いろいろ書き方をかえてみましたが、できません。もし可能な場合は、どのようにするか教えて下さるとうれしいです。よろしくおねがいします！

redrose_wine
お礼率86% (124/143)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#199778

2003/08/20 16:31 回答No.4

再度失礼します。今、気になって少々試してみたんですが、IE6でもご質問のスタイルシートがIE5.x以前のように解釈される可能性があるようです。 IE6をお使いで、body要素に対して破線のボーダーを表示させたい場合、DOCTYPE宣言をHTML文書の初めに省略をせずに表示する必要があるようです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> これをHTMLの頭(<html>タグの前)に入れると、IE6ではDOCTYPEスイッチという、スタイルシートの解釈の方法を変更する機能によって、スタイルシートをW3Cが勧告している仕様に近い形で表示させるようになりますので、表示の方式が変わります。ただ、こちらの方法をとった場合、IE6上での表示方法がすべてCSSの規格に近い形に変更されますので、スタイルシートを全般的に見直す必要が出てくるかもしれません。もしDOCTYPEスイッチでスタイルシートの適用方法の変更をするのが好ましくない場合は、前の方が上げられているようなテーブルですべてを囲い、境界線をテーブルで作成する方法も有効と思いますし、他に <div style="width: 100%; height: 100%; border: 1px dashed black;"></div> というボーダーを指定した要素でHTML文書全体を囲い、それによって破線表示をさせるという方法も取れると思います。度々失礼しました。

参考URL：: http://www.microsoft.com/japan/msdn/columns/dude/dude03262001.asp

質問者

お礼 2003/09/09 15:00

度々ありがとうございます！ DOCTYPEスイッチ・・・ですか、難しそうです＾＾；テーブル以外を使って囲む方法もあったのですね。参考になりました＾＾いろいろ実験してみたいとおもいます。ありがとうございました～！

その他の回答 (3)

dattya
ベストアンサー率53% (61/115)

2003/08/20 16:16 回答No.3

うーん、スタイルリストで４方向設定記述でdottedにしてもdashedにしてもBODYは実線になってしまうかも知れません。代替え案どうしても枠に点線デザインを使いたいならば上下左右マージン（外側の余白）をギリギリ（この場合だったら０か１pxかな）に設定し、大きなテーブル（横100%　縦任意か100%）を作り、その枠を希望の点線にして囲んでしまい＝入れ子にする、パディング（内側の余白）を大きめにとって、その中を編集域とするのはいかがでしょうか。他に使用する個別にボーダーの設定も出来るしデザイン的には近いのではと思います。・・・・すみません　参考にはなりませんなぁ(--;)

質問者

お礼 2003/09/09 14:56

お返事が遅くなってしまって申し訳ありません（＞＜なかなか上手くいかないものですね・・・＾＾； dattyaさんのおっしゃるやり方が、一番デザイン的に近いので、その方法でやろうと思います。ありがとうございました～！

arukamun
ベストアンサー率35% (842/2394)

2003/08/20 16:05 回答No.2

こんにちはＸＰでＩＥ６環境ですが、おっしゃるとおり点線になりませんでした。 <HTML> <BODY STYLE="{margin: 0px;}"> <TABLE WIDTH=100% HEIGHT=100% STYLE="{border-width: 1px; border-style: dashed; border-color: #000000;}"> <TR><TD></TD></TR> </TABLE> </HTML> のように<BODY>でmarginを0pxにして、<TABLE>でWIDTHとHEIGHTを100%にして、STYLEでborder関連を設定するということで出来ますが、面倒ですね。

質問者

お礼 2003/09/09 14:54

お返事が遅くなってしまって申し訳ありません（＞＜やはり点線は無理そうですね＾＾；多少面倒ですが、そのやり方でいこうと思います。ありがとうございました～！

noname#199778

2003/08/20 16:04 回答No.1

ブラウザのバージョンによる影響かもしれません。お使いのブラウザはIE5.5などではありませんか? Windows上のIEの場合、バージョン5.x以前はボーダースタイルの破線と点線(dashed dotted)に対応していないようで、これらをsolidとして認識するようです。他のブラウザでの表示を試してみてはいかがでしょうか。もしそれで他のブラウザでは破線で表示されるようでしたら、ご質問の現象はブラウザのスタイルシートの解釈の違いが原因でしょう。これはブラウザの仕様になるので、HTMLやスタイルシートの側で修正するのは難しいのではないかと思います。参考になれば…

質問者

お礼 2003/09/09 14:51

お返事が遅くなってしまって申し訳ありません（＞＜ブラウザはIE6.0ですので大丈夫かと思います。テーブルのボーダーを破線に設定すると、そちらは確認できましたので＾＾；ありがとうございました～。

関連するQ&A

ホームページ　点線の入った表の書き方（CSSを使って）
表を作っています。何度もチャレンジしながらやりましたが・・ギブアップ・・・分かりません。。わかる方がいらっしゃったら教えてください。 http://hw001.gate01.com/with-flower/tesuto/article04.html (1)1つの枠の中（物件）で区切りに点線を入れたいのですが、どのようにしたらいいでしょうか？ (2)上下に重なった枠線を片方だけにできないでしょうか？または改行を入れようと思ったのですが、間隔が広すぎておかしくなります。改行幅の指定はできるのでしょうか？ ↓CSS .solid {border-width:1px; border-style:solid; border-color:#330000;} .dashed {border-width:1px; border-style:dashed; border-color:#cccccc;}
- ベストアンサー
- Windows XP
ページの内容が折り返してしまう。
ホームページを作成中で今フレーム横割りで三分割したページを枠で囲んで表示させたくて下のようなタグを各ページに打ちこんでいます。 BODY {border-width:pt; border-color: #99ccff; border-style:solid; border-left-width:px; border-right-width:px; border-bottom-width:px; border-top-width:px} ですがお気に入りのウインドウを出したときやウィンドウを小さくしたときにページの内容が枠につぶされてレイアウトがくずれてしまいます。ページを枠で囲んだまま折り返しをできなくするようにするにはどうしたらよいのでしょうかアドバイスお願いします。
- 締切済み
- HTML
<hr>要素を点線で表示した場合の表記について
hrで点線を表示したいと考えています。そこでまず下記Aのような指定をしたのですが、行数を減らすため、Bの表記に変更しました。意味合い的には変わっていないと思うのですが、なぜかfirefox等いくつかのプラウザで点線の下に薄いグレーが表示されてしまいました。 IEでは意図した通りに表示されます。調べた所、薄いグレーはhr本来の色が表示されていること、 Bの表記に color: #fff;　を追記すれば解決することは解ったのですが、なぜまとめ表記にすることで表示が変わるのかが解らずすっきりしないので質問させて頂きました。詳しい方がいらっしゃいましたらよろしくお願いします。 -------------------------------------------------------------※ hr.A { border-width: 1px 0px 0px 0px; border-style: dashed; border-color: #000; height: 1px; width: 100%; } hr.B { border-top: 1px dashed #000; height: 1px; width: 100%; }
- ベストアンサー
- CSS
floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content　の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。どこが間違っているのでしょうか。また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- 締切済み
- CSS
スタイルシートを使い<h1>で指定するには？
スタイルシートを活用して <p style="border-style: solid; border-color: green; border-width: 1px 4px; padding: 3px;"> ぼけぼけ </p> という枠を<h1>ぼけぼけ</h1>と指定しただけで表示させるにはどのようにスタイルシートを記述すればいいのでしょうか？
- ベストアンサー
- HTML
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
日記の文章が枠に張り付いています・・
初心者です。CSS編集で色々参考にしてやってるのですが、どうしてもわかりません。左寄せで枠つきで日記を書いてるのですが、枠に字がぴったりとくっついていて、多少スペースを入れたいのですが、"padding"というので合っていますか？さらにこの中で↓どこにそれをいれればいいのかわかりません・・・。 /* ----------------------- MainColumn ----------------------- */ #main { padding-bottom: 10px; } /*message*/ #message{ P STYLE="line-height: 1.8;" width:99%; margin-bottom: 15px; border-top: 1px dashed #778899; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #778899; } #message .contents{ margin-top: 10px; margin-bottom: 10px; }
- ベストアンサー
- ブログ
枠の幅が次のようにすると
画面いっぱいに広がってしまいますどうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <html> <head> <style type="text/css">  </style> </head> <body> <div class="title"> 芹沢鴨 </div> </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
スタイルシートで点線のアンダーライン
スタイルシートを使用し、インデントを付けたテキストに点線のアンダーラインをつけようとしています。【CSS部分】 .honbun { 　border-bottom-style: dotted; 　border-left-width:20px; 　border-bottom-color: #523D2F; 　border-bottom-width: 1px; 　margin: 20px; 　line-height: 20px; } 【html部分】 <p class=honbun> 　テスト<br> 　テスト<br> 　テスト<br> </p> 【画面結果】　テスト　テスト　テスト　------ すべての行のテキストのアンダーラインに、点線のアンダーラインを入れたいのですが、ひとつの要素としてみてしまうのか、できません…。一行づつにスタイルシートで点線を指定しなければ実現できないのでしょうか。（そもそも不可能？）よろしくご教授ください。どうぞよろしくお願い致します。
- ベストアンサー
- HTML

ページに点線の枠を