htmlでのサイト作り、スマホでの表示

質問

初めてhtmlでサイトを作りました。
金銭的に厳しく、タグもそこそこ勉強してメモ張だけで制作したのですが、
かなり自分の思ったように作ることが出来て満足していました。

そして今日fc2ホームページでサーバーをお借りし、初めてスマートフォンで
閲覧してみました。
するとパソコンで見ていたものと異なり、
大きな画像・テーブルは正常に表示されたのですが、
小さな画像・文字が変なところで改行されてしまい、見栄えが非常に悪く困っています。

スマホのページ自動調節機能を外せばパソコンで見た通りに表示されるので
サイトマップに注釈を付けたのですが
見に来てくださった方々皆様にそのようなことを命令してしまうのは失礼だと思うんです。

なので、出来れば改善方法を教えてください。
どんなタグを追加すればいい等を知りたいです。
パソコンでの見栄えを悪くしたくないのでテーブルのサイズや文字一行の幅を削りたくありません。

全くの初心者なのでお手柔らかにお願いいたします。

また、スマホはAndloid、バージョン4.1.2を使用しています。

回答No.1

kaisinjuku04 · ベストアンサー

自動調節機能に頼らずに、ご自身が満足か妥協できるようにHTMLとCSSを書き換えればと思います。
「レスポンシブデザイン」で検索してみてください。
基本のCSSをスマホ向けにしておいて、最小幅(min-width)の指定を超えるものはタブレット用のCSS、さらに最小幅(min-width)の指定を超えるものはPC用のCSSという具合にします。

とりあえず、初心者向きであれば、
http://ascii.jp/elem/000/000/700/700611/
こんな感じです。

お礼

詳しい説明、リンクもつけてくださりとても分かりやすかったです。
先ほどこの方法で少しいじったところ、無事正常に表示することができました。

しかも夜遅くに…すいません。
ありがとうございました！

回答No.2

Blatsan

PCでもスマフォでも見られるサイト作りが、プロのすごさなのですが…。

どんな風に処理をさせるかなのです。

一番簡単なのが、PCサイトを見たから崩れないように、ページ横幅を指定してあげる
<meta name="viewport" content="width=1000">
このコードをヘッダーに入れるだけで、スマホから見た時、拡大縮小をしながら見ます。

まずはこのような策を入れて、少しずつ勉強していきましょう。

お礼

わかりやすい説明ありがとうございます。
そのタグは知らなかったですね。無知でごめんなさい。

こちらの方法は特にひどかったトップページ以外のページで使わせていただきました。
すると正常に表示できました。回答感謝です。

どちらか迷ったのですが先にお答えしてくださった
NO.1様をベストアンサーにさせていただきます。
申し訳ありません。ありがとうございました！