iPhoneのSafariで自動的に縮小表示されないCSSで悩んでいます

前へ 次へ
このQ&Aのポイント
  • iPhoneのSafariで自動的に縮小表示されないCSSについて詳しく教えてください。
  • iPhoneやiPodTouchのSafariでは、通常ウェブサイトが自動的に縮小表示されるはずですが、特定のCSS設定のページでは縮小されません。
  • CSSを削っていくと、問題の原因はbodyのwidthのCSSにあるようですが、他のサイトでは同様の設定でも問題なく縮小されています。解決方法を教えてください。
回答を見る
  • ベストアンサー

iPhoneのSafariで自動的に縮小表示されないCSSで悩んでいま

iPhoneのSafariで自動的に縮小表示されないCSSで悩んでいます。 iPhoneやiPodTouchのSafariは、ウェブサイトを表示する際にデフォルトで縮小表示を行いますが、以下のCSSのページの場合、これがなぜだか縮小されないのです。アクセスした状態でページの左隅しか表示されていないような感じなので、縮小して全体像をみようと画面操作してもビヨンと戻ってしまいできません。自動的に縮小表示されないというのは感覚的には無理矢理拡大されているような感じをうけます。 bodyのwidthを設定し、左右marginをautoにしてセンタリングというのはこれまでにも多くでやっており、iPhoneやiPodTouchのSafariにおいても表示に問題がないことは確認できていたのですが、なぜだか同様のCSSを設定してあるにもかかわらずいくつかのサイトで縮小表示されません。（viewportのwidthをpxやdevice-widthで設定、左右margin:autoの有無、CSSの内外は影響ありませんでした）CSSを削っていくと縮小表示されないのはbodyのwidthのCSSに行き当たるのですが、きちんと縮小表示がされるサイトも同様に記述されています。 こういった状況に心当たりのある方がいらっしゃいましたらアドバイスいただければありがたいです。 検証機種：iPodTouch（第二世代）/OS4.0（OS3.0の時も同じ症状を見たような・・・） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> <!-- body{ /*margin-right: auto; margin-left: auto; width: 800px;*/ } --> </style> </head> <body> </body> </html>

  • CSS
  • 回答数2
  • ありがとう数21

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

あまり関係ないかもしれないのですが、view portが関係していませんか？ ちょっと実機がないので試せないのですが、表示にかかわってくる指定だった気がします。 <meta name="viewport" content="width=800" />

perlerz10
質問者

お礼

気に留めていただきありがとうございます。 viewportの記述は数値による設定も、device-widthによる設定も入れてみたのですが完全に無視されてしまいます。 普通に縮小表示されるサイトも縮小表示されないサイトも制作は私で、いずれのサイトもCSSは流用している部分も多いにもかかわらずiphone(ipodtouch)で表示に違いがでているので困っています。 iphone(ipodtouch)向けに制作していないサイトはとりあえずは一律に縮小表示されておおまかには正常に表示されると認識していたのですが、そうならないケースもあるのだと思い知らされました。 iphone(ipodtouch)という検証機材のこともありますが、このcssがレアケースなのか、ウェブ制作者の多くがまだ認識解決に至っていないからなのか、ここまで全く回答がつかないのはちょっと想定外でした。

その他の回答 (1)

  • salonpath
  • ベストアンサー率48% (194/399)
回答No.2

cssがコメントアウトされてますけど、質問にかかれているソースは関係ないんでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • safariだけcssが反映されない

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" media="screen,print" /> <title>あ</title> </head> <body> あ </body> </html> このhtmlはbase.css（以下）を読み込んでいます。 /* CSS Document */ @charset "Shift_JIS"; body { background-image: url(images/bg.jpg); background-repeat: repeat; } fire fox、operaでは背景画像images/bg.jpgが 表示されていますが、safariでは真っ白です。 index.html内に <style type="text/css"> <!-- body { background-image: url(images/bg.jpg); background-repeat: repeat; } --> </style> と記述してしまえば、safariでも当然のように反映されていますが、 これが外部ファイルになると反映されません。 今回の例は、おかしい部分を抽出してみたのですが、 bodyの背景が表示されない、一番上に10pxくらいの空白(マージン? )が生じるという不具合以外、他の要素はsafariでもちゃんと表示されていました。 floatを使ったページはsafariでは背景が表示されないと いう情報を得て、検査するために抽出してゆき、最後には こんなにシンプルになっても障害がとりのぞけないので、 どんな見落としがあるのか、教えて頂けないでしょうか？

    • ベストアンサー
    • HTML
  • 【外部CSS】 マージン設定がIEでは適用されるのにsafariとfirefoxでは適用されません。。

    よろしくお願い致します。 タイトルの通りなのですが、外部CSSで中央揃えのマージン設定をしたところ、IEではうまく表示されるのですが、safariとfirefoxでは表示されません。 (ブラウザはすべてMacで見ています。) 以下がHTMLとCSSの記述です。(念のため<!DOCTYPE～から記述しています) ●htmlの記述 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <Head> <Title>タイトル</Title> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="../css/base.css" type="text/css"> <script language="JavaScript" src="../java/top.js"></script> </Head> <body> <div id="header"> <img src="../images/img01.gif" width="150" height="40" alt="image1"> </div> <div id="container"> <table width="867" height="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="images_top/donguli_home_01.jpg" width="460" height="72" alt="group01" title="group01"></td> </tr> よろしくお願い致します。 タイトルの通りなのですが、外部CSSで中央揃えのマージン設定をしたところ、IEではうまく表示されるのですが、safariとfirefoxでは表示されません。 (ブラウザはすべてMacで見ています。) 以下がHTMLとCSSの記述です。(念のため<!DOCTYPE～から記述しています) ●htmlの記述 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <Head> <Title>タイトル</Title> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="../css/base.css" type="text/css"> <script language="JavaScript" src="../java/top.js"></script> </Head> <body> <div id="header"> <img src="../images/img01.gif" width="150" height="40" alt="image1"> </div> <div id="container"> <table width="867" height="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td> 　　～～～以下中略～～～ ●CSSの記述 @charset "Shift_JIS"; @import url("default.css"); /* ページ全体 ---------------------------------------------------- */ BODY,TABLE {font-size :10pt;} body { font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Ghothic Pro W3",sans-serif; margin: 0; padding: 0;｝ A{text-decoration:none} A:focus { -moz-outline-style: none; } a img { border-style:none; } b,strong { font-family: "Lucida Grande","Hiragino Kaku Ghothic Pro W6","Hiragino Kaku Gothic Pro",sans-serif; } img { vertical-align: bottom; border: none; } /* ヘッダ ---------------------------------------------------- */ #header { width:867px; margin-left:auto; margin-right:auto;｝ /* コンテンツ ---------------------------------------------------- */ #container {margin:0 auto; width:867px; text-align:left;} と、上記のようにしています。 また、直接HTMLに <div style="margin-left:auto;margin-right:auto;width:867px;border:0;"> を書き込んだ時は、どのブラウザでもうまく表示されました。 外部CSSにしたとたん、適用されません。。 どこかの箇所が間違ってるのでしょうか・・？ それともブラウザの設定がおかしいとかなのでしょうか？ 記述したCSSも、書籍やHTML講座サイト様を参考にさせていただいたので、内容が重複していたり、おかしな間違いがあったらすみません・・。 ご指摘よろしくお願い致します。 長くなってしまい、申し訳ありません。

  • css初心者です。プラウザの表示について

    以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？ よろしくお願いします。 //html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • SafariでPHPソースがそのまま表示される

    Safariでindex.phpを開くとソースコードがそのまま表示されてしまいます。 拡張子をphpとしているだけでソース内にはphpスクリプトは記述しておりません。 なぜでしょうか？ ※ファイル名をindex.htmlに変えると正しく表示されます。 Windows 7 Home Premium 64bit Safari5.1.5 ソースコードのエンコーディング：utf-8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>テストtitle> </head> <body> <h1>テストページ</h1> </body> </html>

  • firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。

    初めて書き込みで質問する段階の者です。 ヤフーオークション用ページをhtml内にcssを書いて作成しておりましたが、firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。（ファイルはローカルでデスクトッップに置いてあります。） 調べながらの作業で解決出来ず困っております。 書き方に問題があるはずですが、わかりませんでした。 （未チェックですが、恐らくIE関係も全滅だとは思います。） ひとまずsafariをクリアーできたらと思っておりますので ご存知の方、ご教授お願いします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ヤフーオークションページ</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="css/import.css" media="all" /> <style type=" text/css"> </style> </head>

    • ベストアンサー
    • Mac
  • フロートをした場合の縦方向のマージンの指定方法

    下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 【外部CSS】 マージン設定がIEでは適用されるのにsafariとfirefoxでは適用されません。。(文章修正)

    よろしくお願い致します。 タイトルの通りなのですが、外部CSSで中央揃えのマージン設定をしたところ、IEではうまく表示されるのですが、safariとfirefoxでは表示されません。 (ブラウザはすべてMacで見ています。) 以下がHTMLとCSSの記述です。(念のため<!DOCTYPE～から記述しています) ●htmlの記述 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml"​ xml:lang="ja" lang="ja"> <Head> <Title>タイトル</Title> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="../css/base.css" type="text/css"> <script language="JavaScript" src="../java/top.js"></script> </Head> <body> <div id="header"> <img src="../images/img01.gif" width="150" height="40" alt="image1"> </div> <div id="container"> <table width="867" height="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="images_top/donguli_home_01.jpg" width="460" height="72" alt="group01" title="group01"> </td> </tr> 　　～～～以下中略～～～ ●CSSの記述 @charset "Shift_JIS"; @import url("default.css"); /* ページ全体 ---------------------------------------------------- */ BODY,TABLE {font-size :10pt;} body { font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Ghothic Pro W3",sans-serif; margin: 0; padding: 0;｝ A{text-decoration:none} A:focus { -moz-outline-style: none; } a img { border-style:none; } b,strong { font-family: "Lucida Grande","Hiragino Kaku Ghothic Pro W6","Hiragino Kaku Gothic Pro",sans-serif; } img { vertical-align: bottom; border: none; } /* ヘッダ ---------------------------------------------------- */ #header { width:867px; margin-left:auto; margin-right:auto;｝ /* コンテンツ ---------------------------------------------------- */ #container {margin:0 auto; width:867px; text-align:left;} と、上記のようにしています。 また、直接HTMLに <div style="margin-left:auto;margin-right:auto;width:867px;border:0;"> を書き込んだ時は、どのブラウザでもうまく表示されました。 外部CSSにしたとたん、適用されません。。 どこかの箇所が間違ってるのでしょうか・・？ それともブラウザの設定がおかしいとかなのでしょうか？ 記述したCSSも、いろんな書籍やHTML講座サイト様を参考にさせていただいたので、内容が重複していたり、おかしな間違いがあったらすみません・・。 ご指摘よろしくお願い致します。 長くなってしまい、申し訳ありません。

    • ベストアンサー
    • HTML
  • 拡大／縮小表示について

    ＨＴＭＬにおいて 現在、ブラウザを横に拡大すると、タイトルなどブラウザの拡大／縮小にに合わせて自動的に 拡大・縮小してしまいます。 これを ブラウザを拡大しても表示しているタイトルなどは固定のサイズで表示し 縮小すると、固定のサイズで表示しスクロールバーを表示したいのですがどうすればいいでしょうか アドバイスください。 現状 ＜空白＞-------タイトル１--------＜空白＞ ＜空白＞初めての方-------------＜空白＞ ＜空白＞------ホームページに戻る＜空白＞ 拡大すると ＜空白＞------------タイトル１-------------＜空白＞ ＜空白＞初めての方-----------------------＜空白＞ ＜空白＞----------------ホームページに戻る＜空白＞ 縮小すると ＜空白＞-----タイトル１----＜空白＞ ＜空白＞初めての方-------＜空白＞ ＜空白＞ホームページに戻る＜空白＞ こんな感じです。（わかりにくてすいません。） これを 拡大すると ＜空白＞＜空白＞-------タイトル１--------＜空白＞＜空白＞ ＜空白＞＜空白＞初めての方-------------＜空白＞＜空白＞ ＜空白＞＜空白＞------ホームページに戻る＜空白＞＜空白＞ 縮小すると ＜空白＞-------タイトル１-- ＜空白＞初めての方------- ＜空白＞------ホームページ <---スクロールバー表示-----> にしたいのですが？ 関係ある部分を抜粋しました ＊HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>検索</title> <meta http-equiv="Pragma" content="No-Cashe" /> <meta http-equiv="Cache-Control" content="No-Cache" /> <meta http-equiv="Content-Type" content="text/html;" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link type="text/css" rel="stylesheet" href="search.css" /> <body > <h1 align="center" >タイトル１</h1> <p align="left" style="font-size:12px; margin-left:5px;">初めての方</p> <p align="right" style="font-size:12px; margin-right:5px;">ホームページに戻る</p> </body> <HEAD> <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> </HEAD> </html> ＊ｃｓｓ html, body, body{ height:100%; } html{ overflow-y:scroll; } body{ /* width:100%; org */ width:80%; /* margin:0px; */ margin:0 auto auto auto ; padding:0px; background:#fff; color:#000; font-size:1em; font-family:Verdana, sans-serif,"ＭＳ Ｐゴシック", "MS P Gothic","Osaka",Arial,Helvetica; } a:link, a:visited{ color:#5555ff; /* text-decoration:none; */ text-decoration:underline; } a:hover{ color:#5555ff; /* text-decoration:none; */ text-decoration:underline; } a:active{ color:#c00; } input{ padding:2px; font-size:12px; } img{ border:0; vertical-align:middle; } hr{ height:1px; /* width:620px; */ width:640px; border:1; border-bottom:1px solid #cddcf2; } p{ margin:.5em 0; } input{ vertical-align:middle; } form{ padding:0; /* margin:0; */ /* margin:auto; */ } strong{ color:red; } /* h1,h2,h3{ margin:0; } */ h1{ margin:0; align:center; /* width 80%; */ /* font-size:1.5em; */ font-style:normal; font-size:22px; /* background: #43a917 none repeat scroll 0%; */ background: #777788; color:#eeeeff; line-height:1em; padding: 7px 7px 5px; text-align:center; } /* h2{ font-size:1.3em; background: #d3ebc3 none repeat scroll 0%; color:#4b962a; margin-top:1em; padding: 7px 7px 5px; text-align:center; } h3{ font-size:1.0em; } */ address{ font-style:normal; font-size:12px; font-family:"Lucida Sans Unicode"; } .pcenter{ text-align:center; } .message{ padding:5px 10px; background:#dfffc0; border:2px solid #fff; } #footer{ /* background: #d3ebc3; */ background: #ccccdd; color:#000; height:16px; padding:3px; text-align:center; }

    • ベストアンサー
    • HTML
  • フレームを使わないサイトのリンクの表示方法について（cssの勉強中です

    フレームを使わないサイトのリンクの表示方法について（cssの勉強中です） 今までフレームを使ったサイトはきちんと出来ました。しかし、デザインの自由さや 今後、フレームを使わない方向に行くと聞き、急遽cssを勉強し始め、実際、施設の サイト作りをしています。簡単な本を読んでみましたが、cssは良く分かりません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>テスト</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="various software"> <style type="text/css"> <!-- html,body{ padding:0px; margin:0px; } body{ background-color: rgb(180,180,180); } h1{ text-align:center; } div#top{ position:relative; width:60%; margin-left:auto; margin-right:auto; background-color:blue; color:white; height:60px; } div#bodyText{ position:relative; width:60%; margin-left:auto; margin-right:auto; background-color: white; height:1200px; } --> </style> <link rel="START" href="../index.html"> </head> <body> <div id="top"> <font color="#ff0000">&lt;この文字列をクリックした時に下のid=&quot;bodyText&quot;に link_a.html を表示させたい&gt;</font> </div> <div id="bodyText"> <h2>ここに本文を表示したい</h2> <p>ここにlink_a.htmlの内容を表示させたい</p> </div> </body> </html> こんな感じで書いてみましたが、画面上部に複数のリンク先の文字化画像を置き、 bodyText の所にそれに該当する .html ファイルを表示させたいのです。 初歩の初歩でつまづいています。 よろしくお願い致します。

  • 外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまう

    Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する