CSSの位置がPCによって変わる！！

質問

現在、ド素人の身でWEBデザインの職業訓練校に通っている者です。

課題でサイトを作っているのですが、
学校のPCでは文字や画像やborderが綺麗に中央寄せになっているのに
家のPCだと少し右に寄っていたり、寄りすぎて見切れているものもあります。
画面のサイズが微妙に違うせいだと思うのですが、
どうすれば解決するのでしょうか？
ちなみに、一応レスポンシブデザインにはしているのですが、
たぶんレスポンシブを効かせる程
画面サイズにめちゃくちゃ差があるわけでもない微妙な大きさなので
中途半端な位置になっているのかなぁとも思うのですが、どうなのでしょうか。

また、ChromeとIEなどブラウザによっても微妙にフォントなどが違います。
それもどうすればよいでしょうか？

無知ですみませんが、わかる方教えてください！！(>_<)

回答No.2

Katsu_Kaiz

こういうご質問の場合は、実際のHTMLやCSSを貼っていただいたほうがいいかと思いますが……。

もしかして、《margin-left: 400px;》みたいな指定で中央寄せを実現していませんか？　この場合、画面のサイズ（正しくいえばサイズじゃなくて画面解像度）が小さくなると、全体的に右によってしまうかと思います。

中央寄せでよくやるのは、下のようなCSSです。

<style>
.container {
max-width: 80%;
height: auto;
border: solid 4px #ccc;
margin: 0 auto;
padding: 20px;
}

.container p {
text-align: center;
}

.container img {
max-width: 100%;
height: auto;
display: block;
border: none;
margin: 0 auto;
padding: 0;
}
</style>

<div class="container">
<p>あいうえお</p>
<img src="" alt="" />
</div>

左右のmarginに《auto》を指定することで、ぴったりと全自動で真ん中に来るはずです。そもそも、中央寄せのようにレスポンシブに大きく関わる部分は、固定幅ではなく可変幅（%やautoなど）を使ったほうがうまくいきます。固定幅（px）だと失敗することが多いです。

なお、ブラウザ間のフォント違いなどにも気を配る場合は、１番さんのおっしゃるように《リセットCSS》が必要になります。極端な話、WindowsとMacとiPhoneとAndroidだと入っているフォントも微妙に違うからです。

もっとも、「CSS font-family」みたいな検索ワードで検索するとわかりますが、ここを美しく整えようとすると苦労しますけど……(笑)。

参考URL：

http://www.htmq.com/style/margin.shtml

お礼

回答ありがとうございました！
返答に時間がかかりすみません。

PCによって変わるのは解決したのですが、
今度はブラウザによって変わってしまいます。
リセットCSSをコピペしたのですが、きいてないのか。。。

ありがとうございました！！

回答No.1

AsarKingChang

CSSを初期化することを忘れているのですよ。それは
http://blog.3streamer.net/html-css-beginner/reset-css-1/
参考になるサイトを適当に一つ上げておきます。
各ブラウザごとに「デフォルトのCSSの値が違う」
という問題です。なので、それを一度初期化してから
自前のCSSで作ることで、統一感がでますよ

お礼

回答ありがとうございました！
返答に時間がかかりすみません。

PCによって変わるのは解決したのですが、
今度はブラウザによって変わってしまいます。
ご指摘された通りリセットCSSを使用したのですが、
きいてないのか別の問題があるのか変わってしまいます。