![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
私はPC用のホームページ作りをしています。
携帯サイトは作ったことがありません。
このたび、やっとiPhoneを買って自分のサイトを見ることができました。
そうすると、PCサイトの幅が広いので拡大しないと調子が悪いです。
そこで、PCサイトのコンテンツの幅を狭くしようと思っています。
700ピクセルぐらいの幅にしようと考えていますが、そうすると通常のPCだとバランスがおかしい感じなので困っています。
サイトをスマートフォン専用のものにするような技量はありません。
スマートフォンも見られるようにするには、やっぱり700ピクセル以下にすべきでしょうか?
No.1ベストアンサー
- 回答日時:
あなたが作ってこられたのは、特定のディスプレイ幅のscreen端末用のサイトに過ぎません。
そもそも、HTMLは、【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
最初は、リキッドデザイン--最近動向を考えると、最小幅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_ … )
でチェック済みの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>
ありがとうございました。
分かったような分からないような、次回同じような質問をしたらすみません。
とりあえず締めきらせていただきます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- デスクトップパソコン PCに詳しい方!疎くて助けて欲しいです 4 2022/08/11 22:16
- iPhone(アイフォーン) iPhoneの機種変更とPCの関係性について。 10 2022/12/21 15:17
- iPad iPadでoutlookのビューの幅を広げたいのですが、やり方が分かりません。 iPadでoutlo 2 2022/12/29 10:56
- Android(アンドロイド) アンドロイド Chrome PC版サイト使用時について 4 2022/07/22 23:11
- その他(IT・Webサービス) デスクトップPCでyoutubeのサイトへ接続しようとしても「インターネットに接続してください」と表 3 2022/10/12 23:41
- 家具・インテリア メタルラックの連結 1 2023/06/08 21:47
- 一眼レフカメラ 画素数 4 2022/09/25 22:10
- Excel(エクセル) excelの列幅高さが勝手に変わる(特定のPCだけ) 8 2022/07/14 16:51
- ノートパソコン RazerでゲーミングPCを買いたいのですが、スペック等がよく分からずオーバースペックになりそうで心 1 2022/04/24 13:24
- Bluetooth・テザリング ソニーイヤホンのbluetooth 優先接続について 1 2022/06/30 14:16
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
マウスオーバーのメニューについて
-
TABLEの高さを固定したいのですが…
-
CSSで、左側にあるGlobalNaviga...
-
YES or NO形式で進んで行く、タ...
-
3カラムのサイトでfloatができない
-
コンテンツとコンテンツの詰まり
-
ボックス(div)の縦方向中央を...
-
【コーディング】途中から位置...
-
左○○px、右は残りの幅(100%-左...
-
リンクで違うページの指定箇所...
-
cssでbodyタグのtopマージを0に...
-
こんな表示はできそうですか?...
-
htmlについて
-
firefoxでCSSデザインが崩れま...
-
width 100% で縦に3段のレイア...
-
[W3C]フラッシュ画像について
-
文字を固定したいのですが…
-
要素の前の要素を選ぶ
-
現在、ホームページの制作をし...
-
Firefoxで下の隙間が開く
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
CSS <div>の入れ子が反映さ...
-
Ctrl+F(検索)の窓を出したいの...
-
css固定したフッターが本文と重...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スクロール可能なチェックボックス
-
divのheight指定で画面一杯に表...
-
Flickity で画像にリンクを貼る...
-
スタイルシートで画面を上下に...
-
1行で左寄せと右寄せと中央揃え...
-
CSS のみのタブ切り替えについて
-
CSS 可変マージン
-
HTMLですCSSです この画像のよ...
-
チェックボックスの背景色って...
-
HTMLですCSSです 画像のように...
-
画像の特定の座標にカーソルが...
-
TABLEの高さを固定したいのですが…
おすすめ情報