- ベストアンサー
ネットスケープ４で文字拡大時のレイアウト
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちは！ こんな感じで・・ <html> <head> <title></title> <style type="text/css"> <!-- .px14 { font-size: 14px; } div { margin: 3px; padding: 0px; } --> </style> </head> <body> <table border="1" width="300"> <tr> <td><span class="px14">123</span></td> <td><span class="px14">456</span></td> </tr> <tr> <td><span class="px14">789</span></td> <td><span class="px14">0ab</span></td> </tr> </table> <div><img src="border.gif" alt="hrの役をする仕切り線です" width="300" height="1"></div> <table border="1" width="300"> <tr> <td><span class="px14">cde</span></td> <td><span class="px14">fgh</span></td> </tr> <tr> <td><span class="px14">ijk</span></td> <td><span class="px14">lmn</span></td> </tr> </table> <div><img src="border.gif" alt="hrの役をする仕切り線です" width="300" height="1"></div> </body> </html> 一応うまくいったような・・。
その他の回答 (2)
<table></table>を、 <div></div>でくくる必要がないような気がしますが。 あとはmarginを指定するぐらいですかねぇ。 ネスケ４．Ｘだと、margin指定で効果があるのは上部だけなので margin-top:●px; －－って感じで。検証してないんで自信なしです。
補足
回答ありがとうございました。 ネスケの挙動不審には参りっぱなしで、 クラスによるスタイルシートの設定の有無だとか、 スペースをタグの間に入れるか入れないかとか 間隔が開いてしまう部分とはまるで関係ないところの イメージにボーダーを設定するかしないかだとかで （文字拡大時の動作の）違いが出てしまいます。 何を書いているのかさっぱりわからないでしょうけども、、。 基本的に、根スケにはスタイルシートを使わないように したいんですけど、そうも行かないんですよね。。
- the845t
- ベストアンサー率33% (246/743)
body,td { font-size:14px; } のようにpx指定でいかがでしょう。 テーブル同士の縦の隙間とは？ <table> ... </table> <table> ... </table> の間ということでしょうか。 セル以外の個所に不要な全角スペースなどが入っているのでは？
補足
回答ありがとうございます。 テーブルの間というのは<div>タグで囲ったテーブルの間が開いてしまうのです。 （divでくくってなくても開くようですが。） htmlは以下のようになっています。 <div> <table> ・・・ </table> <img src="border.gif" alt="hrの役をする仕切り線です"> </div> <!-- 文字を拡大すると、ここが空いてしまいます --> <div> <table> ・・・ </table> <img src="border.gif" alt="hrの役をする仕切り線です"> </div> 文字を拡大したら、上下のテーブルの間がどんどん広がってしまうんです。
関連するQ&A
- htmlのtableレイアウトについて
こんばんは。訳あってｃｓｓとテーブルの両方のレイアウト手法を用いた サイト作りをしています。準初心者です。 昔から受け継がれてきたサークルのサイトの更新担当をしているのですが、 テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からないスペーサーｇｉｆなど も多用されていたりと、悲惨な有様なので、必死に修復しているところです。 テーブルレイアウトとで組まれていても、今回は抜本的な対策は留保するつもりで書いていた のですが、ある問題に突き当たりました。 divタグ内のtableタグによって作られた1×1の表ボックスが更新情報欄になっていて、 ページの左端に隙間無くくっついているようなレイアウトにしようと試みました。 <TABLE style=" border:0px;padding:0px;margin:0px;・・とするとｄｉｖのブロック要素と テーブルが完全にくっついた状態にできると思い実践してみたのですが、どうしても何ｐｘかの隙間が生じてしまうのです。試行錯誤の末、もとのソースコードではｔａｂｌｅ要素にｈｔｍｌでwidth="400" と指定されていたものをｔａｂｌｅタグ内に <TABLE style=" border:0px;padding:0px;margin:0px; ｗｉｄｔｈ:400px;> と指定し直した結果、計らずしもこの隙間は無くなりました。 そこで疑問なのですが、なぜこのような結果になったのでしょうか、ご教授ください！
- 締切済み
- CSS
- CSSレイアウトってなぜこんなに難しいのか？
個人事業で、WEBデザインの仕事をしています。 恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。 文字を整えたり、種類をまとめたりだけ、CSSを使ってました。 先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、 ダメだしを食らいました。 独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、 ちょっと恥ずかしい質問ですが、 CSSレイアウトってなぜ、こんなに難しいのでしょうか？？ みなさん、テーブルレイアウトと比べて異常に難しく感じませんか？ 今の調子ではＨＰ作成の仕事が請けられなくなっています。（涙） 例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。 でも、CSSレイアウトって、コードで全部書き出しますので、 ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス？のタグにそれを指定したかとか、 複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。 ■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか？ ■今まで2～3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、 いっこうに進歩しません。（ここに本の題名書き出すとマズイですよね？） ★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。 ■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか？ HPビルダーとかなら、もっと簡単に出来るのでしょうか？ ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、 #header #side #main #footerを、#contentの中に入れて、 その中の各々の要素は、今までとおり、テーブルでレイアウトする。 （メニューや、商品スペック、写真並べなども、テーブルで。） それが精一杯ですが、これで通用するのでしょうか？ HPデザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- WIN（IE7）での拡大・縮小時のレイアウト崩れ
はじめまして、toton929と申します。 今、ある会社のコーポレートサイトを制作しているのですが、 IE7でサイトを拡大して見たときに、レイアウトが崩れてしまい頭を悩ませいます。 いろいろ調べた結果、レイアウトが崩れてしまう原因は、 「hasLayout」が「false」になっているからではないかということが分かりました。 そこで、以下のようなサイトを参考にさせていただき、 CSSに「*{zoom:1;}」を追加してみたのですが、変化は見られず。 どうにも困っています。 （参考サイト：http://coliss.com/articles/build-websites/operation/css/143.html） このタグは、CSSのみに追加したのですが、入れ方がまちがっていたのでしょうか。。？ 本当はテストアップして、実際にみていただけるとありがたいのですが、 クライアントのコーポレートサイトなので、アップすることが出来ず、すみません。 「*{zoom:1;}」を仕様する際に、 注意しておく点などあれば教えていただけると有り難いです。 よろしくお願い致します。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 【仕様環境】 WIN IE7 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
- 締切済み
- CSS
- CSSの文字サイズ指定はSEOに影響しますか？
htmlのテーブルレイアウトのウェブサイトをxhtml＋cssに変更する仕事を依頼されました。 仕事が終わった段階で見せたところ、 「だいたい良いが、SEO対策のために、更新前のサイト同様、検索にかけたい用語の文字サイズに大小変化が欲しい」 と言われました。 元のサイトは<tr size="5">のように6段階で記述されていました。 自分なりに、構造をクローラーに理解させるように 見出しをhタグで囲んだり、もともと太めの部分をstrongタグで囲んだりなど基本はある程度押さえていますが、もとのサイトのように、段階をつけて文字サイズを変更する事は、SEO対策に有効でしょうか？ 有効でれば、有効な記述方法があれば合わせて教えて頂きたいです。 簡単に言うと、 例えばcssファイルで .title1 { font-size: 12px; } のように記述された部分と .title1 { font-size: 30px; } のように記述された部分ではクローラーに対する重要度が 変わりますか？ よろしくお願いします。
- ベストアンサー
- HTML
- 要素のない文字をCSSでレイアウトを整える方法
例えば、 <h1>見出し1</h1> 私は、～～～～～～～～～～～～。 というような文章があったとして、文字と文字の間の隙間や上下の段落の幅のレイアウトを決めたいとき、「私は、～」については特に要素がないのでCSSでレイアウトを指定するとき<body>を指定するしかないのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- 文字サイズを変更してもくずれないレイアウト
お世話になります。 CSSで文字サイズを「小・中・大」と変更できるサイトはよく見かけるのですが、文字サイズを変更した際に、レイアウト（背景の画像や枠の幅）は同じなので、1行だったものが2行になってしまったりします。 それを回避したサイトを制作するにはどのようにしたら良いでしょうか？ 現状の策としましては、 ・CSSを3つ用意し、さらにそのCSSに合わせたレイアウトのHTMLをそれぞれ用意しておく。 ※この場合、ページの進退でそのCSSをそのまま引き継ぐ方法が未解決です。 どなたかご教授いただければと思います。 以上、宜しくお願い致します。
- 締切済み
- HTML
- firefoxの文字の拡大について
firefoxを使っています。目が悪いので、最小フォントサイズを１８サイズに拡大して見ています。しかし、サイトによっては、文字がダブってしまって見づらいことがあります。スタイルシートを使用しない設定にするとレイアウトが崩れてしまいます。なにか解決策がないでしょうか。よろしくお願いします。
- ベストアンサー
- ブラウザ
- エラスティックレイアウトがうまくいきません。
エラスティックレイアウトがうまくいきません。 横幅をemでサイズ指定しています。 うまくいかないのはIE6です。 ctrlキー + ホイールで文字サイズを小さくすると、 限りなく小さくなっていき、<img>タグで挿入してある画像（px指定）より 小さくなるとカラム落ちします。（当たり前ですが・・・） firefoxはmin-widthが指定できるので問題ありませんが、 IE6ではどう設定すればいいのかわかりません。 イメージはyahooみたいなエラスティックレイアウトです。 なにか良い方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- ハイブリッドレイアウトでどこまでアクセシビリティに対応する？
こんにちは。 現在tableとcssでレイアウトしたwebサイトにアクセシビリティ対応をして欲しいと言われたのですが、皆さんでしたらどこまで対応しますか？ メイン本文は<h>タグ等で構造化しalt指定はしてあるのですが、その他として大枠tableにsummaryをいれたり、文字指定を％にしたりするほかにどのようなことをされているのか、ぜひ聞いてみたくて。 よろしく御願いします。
- ベストアンサー
- HTML
- 文字サイズを固定して、一部の文字を変更
ホームページを作成しています。ページ全体は、テーブルを多用しており、 レイアウトが崩れないように以下のCSSを使って、文字サイズを固定しています。 <style type="text/css"><!-- *{ font-size: 13px; } --> </style> ここで、問題が起きたので、悩んでいます。 一部の文字にサイズを大きくしたいと思って、フォントサイズを変更しようと 思って色々やってみましたが、ダメでした。 どうすれば、一部の文字サイズを自在に変更出来るのでしょうか。
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
ながながと回答いただき、ありがとうございました。 自分の方でも、色々やってみたら解決したんですが、 何でそれで解決したのかわからないような動作で、 まだまだ研究する必要があるようです。 yayopixさんのソースも参考に、完全にIEと同様に表示される ソースを作りたいと思います。 ありがとうございました！