こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

スマートフォンで適切に見られるPCサイトの幅は?

私はPC用のホームページ作りをしています。
携帯サイトは作ったことがありません。
このたび、やっとiPhoneを買って自分のサイトを見ることができました。

そうすると、PCサイトの幅が広いので拡大しないと調子が悪いです。

そこで、PCサイトのコンテンツの幅を狭くしようと思っています。

700ピクセルぐらいの幅にしようと考えていますが、そうすると通常のPCだとバランスがおかしい感じなので困っています。

サイトをスマートフォン専用のものにするような技量はありません。

スマートフォンも見られるようにするには、やっぱり700ピクセル以下にすべきでしょうか?

投稿日時 - 2012-10-09 07:35:22

QNo.7739528

暇なときに回答ください

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

あなたが作ってこられたのは、特定のディスプレイ幅の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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

投稿日時 - 2012-10-09 10:30:24

お礼

ありがとうございました。
分かったような分からないような、次回同じような質問をしたらすみません。
とりあえず締めきらせていただきます。

投稿日時 - 2012-10-12 15:46:23

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問