- ベストアンサー
スぺーサーを使っての罫線で問題発生、、
いつもお世話になっております。 いまテーブルで組んだページの枠や罫線を1×1のスぺーサーをセル内に入れて そのセルを1pixの線状にし色をつけて極細線にして四方を罫線で囲まれたページを作成しています。 そこで問題が発生してしまったのですが（泣、MACではうまく罫線が途切れず 四方きちんとキレイにくっついて表示されているのに、ウインドウズでは その四角の底辺の罫線だけが1ピクセル分下方に離れてしまうのです。 これをうまくくっつける方法はありませんでしょうか？ ほとんどHPが完成してて今更気がついて非常に困っています。 どうぞよろしくお願いいたします。
- kommatta
- お礼率90% (147/163)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
要するに、「周りを1pxの線で囲まれたテーブルを表示させたいのに、Windowsだと線が途切れてしまう。」ということでしょうか。違ったらごめんなさい。 1x1のスペーサーなるものも何だかよく分からないのですが、スタイルシートを使って1pxの線を描くようにするのではダメでしょうか。こっちの方が手っ取り早いですし、線が途切れることもないかと思います。 まず、HTMLと同じ（じゃなくても良いんですが）フォルダに「style.css」というファイルを作ります（ファイル名は説明のための便宜的なもの）。そのファイル内に半角で table.sample { border: 1px #000000 solid; } と書いて保存。 次に、表示させたいHTMLファイルの<head>～</head>内に <link rel="stylesheet" type="text/css" href="style.css"> を追加。 次に、線を描きたい<table>タグにclass="sample"を追加して次のようにします。 <table class="sample"> このHTMLファイルをブラウザで読み込めば黒い1pxの線が表示されると思います。線の種類や太さや色は変更できますので、スタイルシートについての解説サイトを参照してください。 見当違いの回答だったらすいません。(^^; あと、「MacとWindowsでは表示が異なる」というよりは「ブラウザによって表示が異なる」と言った方が正しいので、IE, Safari, Mozilla, Firefox, Operaなど、こだわるのならいろんなブラウザの表示を確認した方が良いですよ。私もよく泣かされました。
その他の回答 (2)
- hikaly
- ベストアンサー率39% (47/119)
スタイルシートは、外部に「～.css」というファイルを作ってHTMLから参照させる方法と、HTML内部に書く方法があります。 HTMLファイルの<head>～</head>に以下のように書きます。 <style TYPE="text/css"> <!-- H1 { color: red; } --> </style> これ↑は、見出しを意味する<h1>～</h1>タグ部分を赤色で表示せよ、という意味です。 前回お話しした、外部にstyle.cssファイルを作る場合は、style.cssに H1 { color: red; } と記述、呼び出すHTMLの<head>～</head>に <link rel="stylesheet" type="text/css" href="style.css"> と書けば同じ動作になります。 外部にstyle.cssファイルを作る方法の利点は、たとえ百万個のHTMLファイルをたくさん作っても、どのHTMLファイルからもstyle.cssを参照するようにしておけば、style.cssの記述を変更するだけで全HTMLの表示を変更することが出来ることです。たとえば、季節ごとに色や壁紙を変更する場合、HTMLの中にスタイルシートを記述すると全部のHTMLを編集しなくてはなりませんが、外部css方式の場合は一つのファイル（style.css）の編集だけで済みます。 で、参考用のサイト（http://www.surf-for-life.net/）を見てみましたが、このサイトの罫線はすべてHTMLでやっているみたいですね。スタイルシートの記述も見えますが、スクロールバーの表示（IEのみ対応でMozillaなどには意味がない）、文字サイズ、リンク文字の色、文字入力エリア…などの設定をしているだけで、罫線には関係ないようです。 私はここ数年スタイルシートのお世話になっていてHTMLだけでやっていた頃の記憶が曖昧なんですが、<table>内のセルに罫線を描こうとしたときは、<table>をいくつも組み合わせて実現させたような気がします。 私はDreamWeaverは使ったことがないので分かりません。いつもテキストエディタでタグを手入力してやっています。一見面倒くさそうですが、これが一番確実だと思っています。
お礼
このたびはとても分かりやすく、丁寧に教えていただき感謝の気持ちで一杯です。罫線だけでなく少しこれからの素人WEB制作が前進しそうで嬉しいです。またわからないときにはぜひよろしくお願いいたします！
補足
非常によくわかりました！そして実際にやってみましたがうまくいきましたm(__)m cssってとても便利なんですね！ ちょっとこれにはまりそうです。いろいろ作ってみます！
実際にソースを見せていただければ、問題点が分かると思うのですが...。 ソースで見て、cellpaddingとか、cellspacingなどは０になってますよね？ 余計なタグが入ってたり、タグの閉じ忘れは無いですか？ 私が同様のミスをするとき、</tr></tr>と重なってることが多いです。 MacintoshのIEって結構おおざっぱで、タグの閉じ忘れがあってもきちんと表示してくれちゃったりします。 テーブルを利用した経線だと、CSS未対応ブラウザでも表示出来ると言うメリットがありますよね。 やたらめんどくさいけど...。
お礼
ありがとうございます！ そうなんですか？(笑)やっぱり、どうりでって感じです。マックのSAFARIとIEで確認しててバッチリだったんで、気にしてなかったんですが、ふとWIN機でみたら離れてたんです。アドヴァイスありがとうございました。
補足
どうりで、そういうスぺーサーと背景色で作成する方法が毎コミさんの書籍などの演習本で紹介されているわけですね。。。全てのブラウザ対応にするには労力が要りますね・・・ありがとうございました。
お礼
詳しくありがとうございました。それから書きわすれて閉まったのですが、使用ソフトはDreamWeaver MX2004 です。またよろしくお願いいたしますm(__)m
補足
なるほどぉ・・・なんか遠回りなことしてました。でももう直せないぐらい作成しちゃいました、、、泣 ちなみにcssファイルは、それを参照させる感じですが、そのファイルもサーバーにアップしないとダメなんですよね？？ 素人ですみません。それと枠はできたのですが、その中にセルをレイアウトしていって、そのセルも全て1pixにしたいんです。参照サイト http://www.surf-for-life.net/ ←構成のレイアウトはまるでこれと同じで。ソース見るとやっぱりcssですよね？ でも中のセルの下などは1×1のスぺーサーで線を作っているような。。。