ブラウザによって見え方が異なる。
お世話になっております。
ホームページを作る際に、
ページ内に、表(<table>)やフォームを使っています。
特に、ページのレイアウトには、よくテーブルを使用しています。
しかし、
ブラウザ(safari(mac)、ie(windows)、firefox、operaなど)によって、
見え方がことなります。
たとえば、
・ieでは、表の<td>内に文字がおさまっているが、
safariでは、おさまらず改行される。
・form内のボタン(type=button)やテキストボックス(type=text)が、
ブラウザによって、大きさ(幅)が異なるため、レイアウトがずれる。
などです。
周囲に聞ける詳しい人もおらず、いろいろ調べたのですが、よく分かりませんでした。
スタイルシートというのを使うのでしょうか。
というより、それが常識なのでしょうか。
私はスタイルシートについては、超初心者なのですが・・・。
あるいは、別の問題なのでしょうか。
大変恐縮なのですが、これらの解決に、参考となるサイトなどあれば、ご紹介いただきたいのですが。
どうぞよろしくお願いします。
No.5ベストアンサー
- 回答日時:
>form内のボタン(type=button)やテキストボックス(type=text)が、ブラウザによって、大きさ(幅)が異なるため、レイアウトがずれる。
フォームの問題に関しては現在あまり解決策がありません。
最新のブラウザのみの対策で良ければこんな感じにするとwidthとheightを指定して統一が取れます。
input[type="text"],
input[type="submit"],
input[type="button"]{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
比較的簡単ですがIE6~7の標準準拠時に関しては大きさが2pxほどずれます。
よくオススメするサイトなのですが、このサイトはIE6対策がわかりやすく説明してあるので一度目を通されるとよいと思います。
http://adp.daa.jp/web.html
ご回答ありがとうございます。
ご紹介いただいサイトを少し拝見しましたが、
私のような初心者でも分かりやすく詳細にかかれているようです。
自分の知識の浅さに恥じるばかりでございます。
また、基本的なことで、誠に恐縮ですが、
書き込んでいただいているソースは、
ヘッダー(<head>~</head>)部に、
<style type="text/css">
<!--
:
-->
</style>
の間に記述すれば、良いのでしょうか。
一度、試してみます。
ありがとうございました。
No.4
- 回答日時:
デザイン(プレゼンテーション)のために画像やflashを使うのは基本から外れています。
HTMLは、原則は、デザインが作者の期待と異なっても情報がきちんと伝わること。
HTMLはデザインのためではなく、文書構造を記述するものです。そのうえで、さまざまなユーザーエージェント(スクリーンブラウザだけでなく、読み上げブラウザ、携帯端末、そして検索エンジンなど)が文章の構造を伝えるためのフォーマットです。
2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
をしっかり理解しておいてください。
【引用】____________ここから
・・・【中略】・・・
* テキストを画像に置き換えて表現する。
・・・【中略】・・・
* ページレイアウトの目的で表を用いる。
・・・【中略】・・・
こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
ブラウザは、HTMLで書かれた文書を、それぞれのブラウザがデフォルトで持っているスタイルシートに従って、ユーザーが見やすいように表示しますが、それは当然それぞれのブラウザによって、時には大きくデザインが変わる場合もあります。
実は、それはそれでよいのです。sfariを使用している人に、他のブラウザと同じように表示させようとすると、safariユーザーにとっては不愉快・・見慣れないデザインとなってしまうのです。
・ieでは、表の<td>内に文字がおさまっているが、
safariでは、おさまらず改行される。
・form内のボタン(type=button)やテキストボックス(type=text)が、
ブラウザによって、大きさ(幅)が異なるため、レイアウトがずれる。
については、sfariでも収まるようにセルの幅を決める。あるいはスタイルシートで文字幅(em)でセル幅を決める。
が正しい解決方法です。テーブルを使用すべきかも含めて、検討してみてください。
大変ご丁寧なご回答、深く感謝申し上げます。
HTMLだけでも、こんなに深く考えたことがありませんでした。
基本的な勉強を飛ばしてきましたので、
あらためて、HTMLの勉強になりました。
HTMLの経緯を学べば、スタイルシートの意味も分かり、
習得する必要性がわかりました。
とりあえず、今回の件は、
急ぎますので、
ブラウザのタイプごとに、
各要素を設定する手法で対応することします。
本当にありがとうございました。
No.3
- 回答日時:
デフォルトスタイルシートの違いじゃないでしょうか。
ul要素とol要素のブラウザごとの違い - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips/webti …
制作者スタイルシートでデフォルトスタイルシートを上書きすれば、ブラウザ間の差異はほぼなくなります。
値わりあて,カスケード処理,継承 - CSS2リファレンス
http://hp.vector.co.jp/authors/VA022006/css/casc …
実際にはブラウザのバグもあるので完全に同一にはなりませんが、質問者さんの場合はデフォルトスタイルシートの影響が大きい気がします。
ご回答ありがとうございます。
やはりスタイルシートでの対応になるわけですね。
ul要素とol要素、値わりあて,カスケード処理,継承についても学習します。
No.2
- 回答日時:
レンダリングエンジンで表示が違うのは、ぶっちゃけ常識です。
これは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を使わない選択肢は存在しません。
ということなでの、遅々たる歩みであっても、
勉強します。
大変、参考となるご回答ありがとうございました。
No.1
- 回答日時:
「ブラウザが違えば見た目が違う」のが常識。
見た目を統一したい場合は「すべてを画像にしてボタンやテキストボックスや文字を排除する」か「全てflashにする」しかありません(flashにした場合、flashが使えない一部のiPhoneやiPadでは閲覧できないページになります)
この回答への補足
ご回答ありがとうございます。
>「全てflashにする」
は、
プラグインを強要し、また、html5では不要とも言われているため、
申し訳ございませんが、flashでのコンテンツ製作は考えておりません。
>「すべてを画像にしてボタンやテキストボックスや文字を排除する」
について、
phpやcgiなどでデータベースとやり取りしているのですが、
ボタンやテキストボックスを使わずに、データの参照、追加、更新の処理は、
どのように行うのでしょうか。
申し訳ございませんが、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブラウザ) Internet Explorer でなければ開けないページ 4 2022/03/25 18:03
- InternetExplorer(IE) 既定のブラウザーを変更した場合、付随して処理が必要なことはありますか? 2 2022/03/25 16:04
- HTML・CSS Chrome のキャッシュについて 3 2022/05/26 07:50
- JavaScript Javascriptを使ってQRコード読み取り、取得した情報をPOSTしたいと思っています。 1 2023/04/28 15:18
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- ホームページ作成・プログラミング chromeでhttpdを使うと 2 2022/03/23 10:54
- その他(ブラウザ) Twitterの「返信をさらに表示」 ボタンの後ろに隠れているツイートを常に表示 1 2023/08/04 12:20
- ドメイン・サーバー・クラウドサービス 自作サイトをサーバーにアップロードしたのですが… 2 2022/11/08 18:12
- その他(ブラウザ) ブラウザでの音量(YouTubeなどの視聴)が自動的に下がってしまう。(できれば直したいです。) 2 2023/07/15 08:52
- Windows 10 パソコン初期化の件です 2 2022/06/05 11:05
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
GoogleChromeでレイアウトが左...
-
起動済みのIEをハンドルから操...
-
tabキーによるfocusの当たり方...
-
どういうわけか前まで見られたW...
-
ボタンをクリックした時に指定...
-
IE3.02 ,IE4 , IE5 ,IE6 すべて...
-
アメブロのカスタマイズ変更し...
-
VBSでIEの操作
-
古いブラウザ・・どこまで対応...
-
エクセルのシートをブラウザに...
-
WEBページからのメッセージをVBAで
-
VBA オブジェクトが必要です
-
音声ブラウザ
-
スクロールバー
-
HTMLのバージョンの確認方法は?
-
HTML5のバージョン
-
Macで見るとページが崩れます。
-
<IMG>のALIGN属性値「absmiddle...
-
スマホでページ内リンクができない
-
プルダウン(リストボックス)の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
GoogleChromeでレイアウトが左...
-
Macで見るとページが崩れます。
-
VBA オブジェクトが必要です
-
doc As HTMLdocumentのコンパイ...
-
WindowsとMacでのChromeのスタ...
-
スマホでページ内リンクができない
-
プルダウン(リストボックス)の...
-
<IMG>のALIGN属性値「absmiddle...
-
WEBページからのメッセージをVBAで
-
HTML文書を上書き保存してもブ...
-
HTMLのバージョンの確認方法は?
-
cssレイアウトでSafariだけがど...
-
VBAでgetElementByTagName
-
DOCTYPE宣言はしなくていいの?
-
tabキーによるfocusの当たり方...
-
DeepLでエクセルのA列の英文の...
-
エクセルでURLからタイトルのみ...
-
ブラウザやOSによる表示の違...
-
webページの有効期限が切れてい...
-
CSSやJavaScriptのバージョン指定
おすすめ情報