• 締切済み

パソコンで見たときとiPadで見たときの違い

下記URLのサイトを作成しているのですが、iPadで見たとき、左右の画面が動きます（画面サイズよりサイトの幅が大きい？）。パソコンで見たら問題ないのですが、なぜiPadで見たら左右の画面が動くのでしょうか？ もしお詳しい方がいらっしゃいましたら、ご教授のほどよろしくお願いします。 　http://thai-kosiki.net/

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

ちょっと時間をください。 　学年末で大変忙しい・・ 　基本的には、リキッドデザインで作成し、それで対応できない場合はMediaqueryでスタイルシートを切り替えますが、ご提示のページ程度でしたら単純なリキッドで大丈夫でしょう。

creap45th
質問者

お礼

お忙しいなか無理を言ってしまい、申し訳ありません。 もしお時間の許す時がございまいたら、よろしくお願いします。

回答No.2

画像の幅とマージンやパディングを合計すれば、1000pxを超えますよね。 iPadで表示するときに、画面の横幅に合わそうとして縮小表示に切り替えるために左右が動くのではないでしょうか？ タブレットやスマホでも閲覧できるようにすることをレスポンシブデザインといって、ターゲットブラウザの横幅ごとにCSSを書きます。 見た目はあえて変えます。 それぞれのブラウザで読みやすいように。 「レスポンシブデザイン CSS 書き方」で検索すれば、いろいろ情報がありますよ。

creap45th
質問者

お礼

ご回答いただきまして、ありがとうございます。 1,000ピクセル以内で収めているつもりだったのですが、マージンなどを合計すると超えているのかもしれません。 レスポンジデザインという言葉を始めてしりました。ターゲットブラウザの横幅ごとにCSSを書くのですか。知りませんでした。さっそく検索して調べてみます。ありがとうございました。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

＞パソコンで見たら問題ないのですが、 　これが分かりません。ウィンドウ幅を変えて小さくしても同様にはみ出ませんか？ 　スマホもサイトのターゲットにするならリキッドデザインにしましょう。なお、最近では横幅1900pxなんてパソコンも結構ありますので最大サイズも決めたほうが良いでしょう。 　ところで、Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )などで文法チェックだけはしておきましょう。ブラウザはたとえエラーがあっても、なんとか独自に解釈して表示してくれますが、それが、しばしばブラウザ間の表示誤差の原因になります。最低でも80点とかを目標にすると良いでしょう。 　また、transitinalは、使わないようにstrictで作成しましょう。1999年のHTML4.01の勧告以来『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』と言われ続けていることで、まもなく勧告になるHTML5は、strictしかありません。 書き直すと、下記のような簡単なHTMLになると思います。javascriptは不要でしょう。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )でチェック済み ★背景的な意味の画像は背景に回しましょう。 ★スタイルシートもとても簡単になるでしょう。 　リキッドでデザインし、狭い場合はそのブロックが下に回るようにすると良いでしょう。 ★タブは＿に置換してあります。 <!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 name="Description" content="タイ古式マッサージ店を探すなら・・・"> ＿<meta name="Keywords" content="タイ古式マッサージ タイ古式.net 大阪 難波 梅田 キタ ミナミ"> ＿<meta http-equiv="content-script-type" content="javascript"> ＿<link href="css/import.css" rel="stylesheet" type="text/css" media="screen"> <!--[if lt IE 9]> ＿<link href="css/ies.css" rel="stylesheet" type="text/css" media="screen"> <![endif]--> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><a href="/"><img src="/img/rogo.jpg" alt="タイ古式.net" height="81" width="297"></a>タイ古式マッサージ店を探すなら「タイ古式.net」！！</h1> ＿＿<div id="abstract"><!--サイトの要約abstract--> ＿＿＿<p>バナー(実際には分かりやすい文章を)</p> ＿＿＿<ul> ＿＿＿＿<li><a href="/whatIs">サブバナー(実際には分かりやすい文章を)</a></li> ＿＿＿＿<li><a href="/news1">サブバナー</a></li> ＿＿＿＿<li><a href="/news2">サブバナー</a></li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li><a href="/news3">サブバナー</a></li> ＿＿＿＿<li><a href="/news4">サブバナー</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">タイ古式.netトップページ</a></li> ＿＿＿＿<li><a href="/coupon">クーポン</a></li> ＿＿＿＿<li><a href="/massage">お店を探す</a></li> ＿＿＿＿<li><a href="/what">タイ古式とは？</a></li> ＿＿＿＿<li><a href="/link">リンク集</a></li> ＿＿＿＿<li><a href="/contact">お問い合わせ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<div class="section" id="news"> ＿＿＿<h2>ニュース</h2> ＿＿＿<dl> ＿＿＿＿<dt>2013:02:08</dt> ＿＿＿＿<dd>「タイ古式.net」スタート！</dd> ＿＿＿</dl> ＿＿</div> ＿＿<div class="section" id="menue"> ＿＿＿<h2><img src="img/contents-h2-area.jpg" width="659" height="29" alt="関西エリアのタイ古式マッサージ店"></h2> ＿＿＿<ul class="osakaNW"> ＿＿＿＿<li><a href="/osakaN">大阪北部のタイ古式マッサージ店</a></li> ＿＿＿＿<li><a href="/osakaW">大阪西部のタイ古式マッサージ店</a></li> ＿＿＿</ul> ＿＿＿<ul class="osakaMain"> ＿＿＿＿<li><a href="/osakaKita">大阪キタのタイ古式マッサージ店</a></li> ＿＿＿＿<li><a href="osakaMinami">大阪ミナミのタイ古式マッサージ店</a></li> ＿＿＿</ul> ＿＿＿<ul class="osakaOther"> ＿＿＿＿<li><a href="/osakaOther">大阪市外のタイ古式マッサージ店</a></li> ＿＿＿＿<li><a href="/osakaE">大阪東部のタイ古式マッサージ店</a></li> ＿＿＿＿<li><a href="/osakaM">大阪南部のタイ古式マッサージ店</a></li> ＿＿＿</ul> ＿＿</div> ＿＿ ＿</div> ＿<div class="footer"> ＿＿<ul> ＿＿＿<li><a href="/coupon">クーポン</a></li> ＿＿＿<li><a href="/massage">お店を探す</a></li> ＿＿＿<li><a href="/what">タイ古式とは？</a></li> ＿＿＿<li><a href="/link">リンク集</a></li> ＿＿＿<li><a href="/contact">お問い合わせ</a></li> ＿＿＿<li><a href="/rule">利用規約</a></li> ＿＿</ul> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>&copy; 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

creap45th
質問者

お礼

ご回答いただきまして、ありがとうございます。 ご質問があるのですが、もしよろしければご回答いただければ幸いです。よろしくお願いします。 ご教授いただいた通りに貼ってみたのですが、そうすると下記URLのようになりました http://thai-kosiki.net/ これはスタイルシートに問題があるのでしょうか？ 真に厚かましいことですが、ぜひご教授のほどよろしくお願いします。

creap45th
質問者

補足

作成続行のため、先述したURLは前の状態に戻しました。 教えていただいたソースは下記URLで表示しました。 お手数をおかけいたしますが、もしよろしければご教授いただきたいです。 よろしくお願いします。 　http://thai-kosiki.net/kari.html

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

注目のQ&A

カテゴリ

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

専門家に質問してみよう

職業から探して質問する
質問する