- ベストアンサー
スマートフォンで適切に見られるＰＣサイトの幅は？
私はＰＣ用のホームページ作りをしています。 携帯サイトは作ったことがありません。 このたび、やっとiPhoneを買って自分のサイトを見ることができました。 そうすると、ＰＣサイトの幅が広いので拡大しないと調子が悪いです。 そこで、ＰＣサイトのコンテンツの幅を狭くしようと思っています。 ７００ピクセルぐらいの幅にしようと考えていますが、そうすると通常のＰＣだとバランスがおかしい感じなので困っています。 サイトをスマートフォン専用のものにするような技量はありません。 スマートフォンも見られるようにするには、やっぱり７００ピクセル以下にすべきでしょうか？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
あなたが作ってこられたのは、特定のディスプレイ幅のscreen端末用のサイトに過ぎません。そもそも、HTMLは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、 ・・・【中略】・・・ HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より 最初は、リキッドデザイン--最近動向を考えると、最小幅780px～最大1900px程度に対応したページにすることに挑戦されたら良いでしょう。 その次の段階として、mediaやscreen-withによってスタイルシートが切り替わるようにしておくとよいかと・・ 下記は、最小480pxから最大無制限の簡単なサンプルです。ごく一般的なものです。 Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック済みのHTMK4.01strict+CSS2.1です。 タブは＿に置換してあります。 <!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="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.header,div.section,div.footer{width:80%;min-width:480px;max-width:800px;margin:0 auto;padding:0;} body>div>*{margin:0 10px;} div.section{position:relative;min-height:300px;border:solid 1px red;} body>div.section>*{margin-left:21%;} #contentTable{position:absolute;top:0;left:0;height:100%;width:20%;margin:0;} /* 色分け */ div.header{background-color:white;} div.section{background-color:lime;} div.footer{background-color:aqua;} #contentTable{background-color:fuchsia;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<div id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿＿<ol> ＿＿＿＿<li>あ行</li> ＿＿＿＿<li>か行</li> ＿＿＿＿<li>さ行</li> ＿＿＿＿<li>し行</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
ありがとうございました。 分かったような分からないような、次回同じような質問をしたらすみません。 とりあえず締めきらせていただきます。