- ベストアンサー
ブラウザによって見え方が異なる
- ホームページ作成時にブラウザによる表示の違いに悩んでいます。特に表やフォームのレイアウトに問題があります。表の文字の改行やフォームのボタンの大きさなどがブラウザによって異なるため、レイアウトが崩れてしまいます。スタイルシートを使用するべきか、他の解決策があるのか知りたいです。
- ブラウザによって表示が異なることでホームページ作成に悩んでいます。特に表やフォームのレイアウトに問題があります。例えば、表の文字の改行やフォームのボタンの大きさがブラウザによって異なるため、レイアウトが崩れてしまいます。スタイルシートの使用方法や他の解決策について教えていただきたいです。
- ブラウザによって見え方が異なるため、ホームページ作成に悩んでいます。特に表やフォームのレイアウトに関して問題があります。例えば、表の文字の改行やフォームのボタンの大きさがブラウザによって異なるため、レイアウトの崩れが起こります。問題の解決策や参考となるサイトについて教えていただきたいです。
- asakichi00
- お礼率57% (61/106)
- HTML
- 回答数5
- ありがとう数11
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
デザイン(プレゼンテーション)のために画像やflashを使うのは基本から外れています。 HTMLは、原則は、デザインが作者の期待と異なっても情報がきちんと伝わること。 HTMLはデザインのためではなく、文書構造を記述するものです。そのうえで、さまざまなユーザーエージェント(スクリーンブラウザだけでなく、読み上げブラウザ、携帯端末、そして検索エンジンなど）が文章の構造を伝えるためのフォーマットです。 2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 ) 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) をしっかり理解しておいてください。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから ・・・【中略】・・・ * テキストを画像に置き換えて表現する。 ・・・【中略】・・・ * ページレイアウトの目的で表を用いる。 ・・・【中略】・・・ こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より ブラウザは、HTMLで書かれた文書を、それぞれのブラウザがデフォルトで持っているスタイルシートに従って、ユーザーが見やすいように表示しますが、それは当然それぞれのブラウザによって、時には大きくデザインが変わる場合もあります。 実は、それはそれでよいのです。sfariを使用している人に、他のブラウザと同じように表示させようとすると、safariユーザーにとっては不愉快・・見慣れないデザインとなってしまうのです。 ・ieでは、表の<td>内に文字がおさまっているが、 safariでは、おさまらず改行される。 ・form内のボタン（type=button）やテキストボックス（type=text）が、 ブラウザによって、大きさ（幅）が異なるため、レイアウトがずれる。 については、sfariでも収まるようにセルの幅を決める。あるいはスタイルシートで文字幅(em)でセル幅を決める。 が正しい解決方法です。テーブルを使用すべきかも含めて、検討してみてください。
お礼
大変ご丁寧なご回答、深く感謝申し上げます。 HTMLだけでも、こんなに深く考えたことがありませんでした。 基本的な勉強を飛ばしてきましたので、 あらためて、ＨＴＭＬの勉強になりました。 ＨＴＭＬの経緯を学べば、スタイルシートの意味も分かり、 習得する必要性がわかりました。 とりあえず、今回の件は、 急ぎますので、 ブラウザのタイプごとに、 各要素を設定する手法で対応することします。 本当にありがとうございました。
- think49
- ベストアンサー率59% (285/482)
デフォルトスタイルシートの違いじゃないでしょうか。 ul要素とol要素のブラウザごとの違い - Web標準普及プロジェクト http://www.mozilla.gr.jp/standards/webtips/webtips0034.html 制作者スタイルシートでデフォルトスタイルシートを上書きすれば、ブラウザ間の差異はほぼなくなります。 値わりあて，カスケード処理，継承 - CSS2リファレンス http://hp.vector.co.jp/authors/VA022006/css/cascade.html#cascade 実際にはブラウザのバグもあるので完全に同一にはなりませんが、質問者さんの場合はデフォルトスタイルシートの影響が大きい気がします。
お礼
ご回答ありがとうございます。 やはりスタイルシートでの対応になるわけですね。 ul要素とol要素、値わりあて，カスケード処理，継承についても学習します。
- neko-ten
- ベストアンサー率55% (1287/2335)
レンダリングエンジンで表示が違うのは、ぶっちゃけ常識です。 これはCSSであってもエンジンによって解釈違いますし、JavaScriptもそうです。 特にIEなんかどう考えても違うだろ・・・っていう解釈しますし。 根本的な問題としては・・・ ・ページのレイアウトには、よくテーブルを使用しています。 テーブルは表を表示するためのタグです。 テーブルを使ってデザインすることは推奨されません。 グリッドレイアウトならBOX使いましょう。 ・スタイルシートというのを使うのでしょうか。 現在CSSを使わない選択肢は存在しません。 HTMLは構造を記述しますので、デザインはすべてCSSの役割です。 <font size="うんたら">といったタグすら推奨されません。<center>あたりも。 ハックすることである程度表示の差は緩和できます。 ただし、OSで使用するフォントは違いますし、デフォルトのフォントサイズも違います。 エレメントの画像も違うため、どうしても差異を完全に吸収することはできません。 そのため、作成の時点で「ある程度ずれても支障のないデザイン」を想定します。 最終的には、ブラウザごとに完全に別ページとして作成、UA等で判別、振り分けする・・・といった手法や・・・ #1さんのとおりFlash使うなりするしかないでしょう。 （なお、HTML5想定されてるなら、それこそCSSやハックも必須ですしCSS3も拡張実装されます。） ＞ボタンやテキストボックスを使わずに、データの参照、追加、更新の処理は、どのように行うのでしょうか。 JavaScript使えばいい。 イベント取得して動作させれば、極論bodyの中身が空っぽでもOK 文字表示を一切させないという制限があるなら、Ajaxでサーバに送ってGDあたりで画像生成、応答で帰ってきた画像を張り付けるとか・・・ 無駄足でしかないのでお勧めしません・・・て当たり前ですね。 まずはCSS習得しましょう。 ここでもやっぱりブラウザ差異が出てきますが、デザインと構造を分離できる分対処は楽になります。 ハックは、CSS HTML ハック とかで検索するとたくさん出てきます。 よく見るサイト http://coliss.com/ ハックを直接扱ってはいませんが、情報収集に利用 http://d-lover.com/css/hack.shtml ちょっとわかりやすい記事
お礼
大変ご丁寧なご回答、誠にありがとうございます。 まず、 「ブラウザ差異はやむをえない」ということですね。 ＞現在CSSを使わない選択肢は存在しません。 ＞<font size="うんたら">といったタグすら推奨されません。<center>あたりも。 ＞Ajaxでサーバに送って いままで、たくさんホームページを作成しましたが、 <font>タグや<center>を酷使し、また、cssは使っていませんが、 そのまま放置しておいてもよいのでしょうか。 できれば作り直した方がよいようですね。 ajaxについても、一度勉強しかけたのですが、 難しかったので頓挫しております。 cssも同様です。 ホームページは、だんだん、私のような素人が製作するには、 ハードルが高くなっているような気がします。 CMSも試みたのですが、こちらもついていけませんでした。 いずれにしても、 ＞現在CSSを使わない選択肢は存在しません。 ということなでの、遅々たる歩みであっても、 勉強します。 大変、参考となるご回答ありがとうございました。
- chie65536（@chie65535）
- ベストアンサー率44% (8812/19983)
「ブラウザが違えば見た目が違う」のが常識。 見た目を統一したい場合は「すべてを画像にしてボタンやテキストボックスや文字を排除する」か「全てflashにする」しかありません（flashにした場合、flashが使えない一部のiPhoneやiPadでは閲覧できないページになります）
補足
ご回答ありがとうございます。 ＞「全てflashにする」 は、 プラグインを強要し、また、html5では不要とも言われているため、 申し訳ございませんが、flashでのコンテンツ製作は考えておりません。 ＞「すべてを画像にしてボタンやテキストボックスや文字を排除する」 について、 phpやcgiなどでデータベースとやり取りしているのですが、 ボタンやテキストボックスを使わずに、データの参照、追加、更新の処理は、 どのように行うのでしょうか。 申し訳ございませんが、よろしくお願いします。
お礼
ご回答ありがとうございます。 ご紹介いただいサイトを少し拝見しましたが、 私のような初心者でも分かりやすく詳細にかかれているようです。 自分の知識の浅さに恥じるばかりでございます。 また、基本的なことで、誠に恐縮ですが、 書き込んでいただいているソースは、 ヘッダー（<head>～</head>）部に、 <style type="text/css"> <!-- ： --> </style> の間に記述すれば、良いのでしょうか。 一度、試してみます。 ありがとうございました。