
ブラウザによって見え方が異なる。
お世話になっております。
ホームページを作る際に、
ページ内に、表(<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で質問しましょう!
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
GoogleChromeでレイアウトが左...
-
主要ポータルサイトの多くがス...
-
WindowsとMacでのChromeのスタ...
-
tabキーによるfocusの当たり方...
-
エクセルのシートをブラウザに...
-
エクセルでURLからタイトルのみ...
-
プルダウン(リストボックス)の...
-
VBA オブジェクトが必要です
-
AfterEffectsでイージーイーズ...
-
XMLを作成してもタグしか表示さ...
-
C#のシリアル通信プログラムで...
-
リンク先のURLを非表示にし...
-
Hタグを改行禁止にしてspanのよ...
-
テキストエリア内の改行もその...
-
プルダウンメニューの開く方向...
-
自分のサイトを開いた時にウィ...
-
Excel VBA 見本通りに...
-
\\n \\r \\t について
-
VBE でスペースと改行を見える...
-
メモ帳やエディタで一度にスペ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
GoogleChromeでレイアウトが左...
-
プルダウン(リストボックス)の...
-
doc As HTMLdocumentのコンパイ...
-
WindowsとMacでのChromeのスタ...
-
<IMG>のALIGN属性値「absmiddle...
-
IE以外でのfilter
-
ie6のコーディングで何をすれば...
-
いずれ、HTMLのHPは見れ...
-
HTMLとXHTMLどちらにすべきか
-
HTMLのバージョンの確認方法は?
-
Shift-JISでxml宣言するべき?
-
日数カウントダウンが、ブラウ...
-
ブログのコメント欄のデザイン...
-
表示中のブラウザ情報を他のブ...
-
DOCTYPE宣言はしなくていいの?
-
主要ポータルサイトの多くがス...
-
dreamweaverでCSSのレイアウト...
-
ブラウザから直接HTMLを取得す...
-
何種類のブラウザで表示確認し...
-
dreamweaver 破線・点線が見えない
おすすめ情報