0 レスポンシブサイトってなんかむずそう
様々な画面サイズやスマホ対応のウェブページって作るの難しそうって思いますよね。
もちろん私も難しいと思っていたのですが、以外と要点だけを抑えたら簡単に作れたので、そのときに気をつけたポイントをメモしたいと思います(｀・ω・´)
ここには要点しかないのでくわしく知りたい人はググりましょう( 厂˙ω˙ )厂
土日の暇なときにでも見ていただけたら嬉しいかもしれません(´・ω・｀)
1 widthをpx指定しないほうがいい
同じPCで見てても見る人によってデザインが崩れる原因は何か
＝＞ 基本的にはデバイスごとの画面サイズの違いである
mac 11インチ、13インチ、15インチ でもサイズは違うし。
windowsのディスプレイサイズもいっぱいあるし。。。。
iPadとかで見てもサイズ違う！！！
###解決法 ＝＞ ％指定しましょう
デザイナーさん曰く、(なるべく) widthをpx指定しないほうが良いとのこと。
但し、heightに関してはデバイスごとで崩れることはないのでpx指定して良いそうです。
/* 横全画面に要素を配置したい時はこちら */
.wide{
width:100%;
height: 100px;
background-color: antiquewhite;
}
/* 常に中央に配置したい場合はこのようにmargin autoを利用するとよいとコメントをいただきました、ありがとうございます */
.center {
margin: 0 auto;
background-color: aqua;
width: 90%;
}
#2 marginとpaddingにも気をつけること
CSSのblock要素にはデフォルトでmarginが設定されています。
もちろんpx指定されており、５つの要素を20％で設置すれば100％だ！
と思い５つ同じ要素を配置した時に崩れます。
まずはじめに、CSSにこれを設定することでページ内の変な余白を消してくれたり。
予期しない動きを抑えてくれたりします
*{
margin :0px;
padding: 0px;
}
自分でmarginやpaddingを設定するときにもpxが良いのか、そこにpxを利用して良いのかを考えて配置したほうが良さげですね。
実際はあまり使いませんが、marginも％指定するとずれないかもしれませぬ(´・ω・｀)
と思ったのですが！！
###margin :auto を使いましょう
twitter上でご指摘をいただき、調べた結果、左右中央に要素を配置できると記述されておりこちらを使ったほうが良さげでした。
.parts{
margin: auto;
width:20%;
float: left;
background-color: gray;
}
#3 スマホ対応したい！
いくらページを％で指定したからとはいえ
スマホにまで対応できるわけではないです(｀・ω・´)
1）例えばpartsというPC時に横に５つ要素が並んでいるものがあったとします。
2）スマホで見ると横に5個だと狭すぎる！！ 横に2個ならぶ感じがいい！
そんなときはメディアクエリを使います
<div class="center">
<div class="parts">20％</div>
<div class="parts">20％</div>
<div class="parts">20％</div>
<div class="parts">20％</div>
<div class="parts">20％</div>
</div>
.parts{
width:20%;
float: left;
background-color: gray;
}
/* 画面サイズが480以下（スマホ）のときに適応されるCSS */
/* 変更点だけを書けばおk ！！ */
@media screen and (max-width:480px) {
.parts{
width:50%;
}
}
これは画面サイズの最大が480px以下しかない！！ そんな場合のCSSの記述方式です。
@media screen and (max-width:480px) {
この間にかいたCSSは画面サイズが小さくなったときに適応されるので
いわゆるサイトがレスポンシブとかいうものになります
}
詳しくはこちらをごらんください。
http://sole-color-blog.com/blog/php/71/
##スマホ対応をするならview port設定もお忘れなく
スマホで見たときにめっちゃいい感じにしてくれるやつです、お守りだと思って何も考えずに入れましょう。
<meta name=viewport content="width=device-width, initial-scale=1">
これを入れても横幅が足りない！！というときは
initial-scale=1 を
initial-scale=0.9 とか少しずつ減らすとナイスな感じになるかもです。
=>しかしこの値を変更するとそのあと様々な部分で表示ズレを起こす危険性があるため、ちゃんと理解した上で値を変更するようにしましょう 。
今は良くてもあとではまるパターンのやつですね。。
[hakuho01さんにご指摘いただきました、ありがとうございます]
詳しく知りたい人はこちらを参照です。
http://qiita.com/ryounagaoka/items/045b2808a5ed43f96607
#番外編 超簡単なレスポンシブテンプレート
最低限のレスポンシブを実装したhtmlです、是非自分のPC上に
main.html
main.css
の２つのファイルを作り、ブラウザで開いて、ブラウザの横幅を広くしたり小さくしてみたりしてください
多分レスポンシブしてくれると思います
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>なるべくずれないHTML</title>
</head>
<body>
<div class="wide">
なんかタイトル的なやつ
</div>
<div class="center">
<div class="parts">20％</div>
<div class="parts">20％</div>
<div class="parts">20％</div>
<div class="parts">20％</div>
<div class="parts">20％</div>
</div>
</body>
</html>
*{
margin :0px;
padding: 0px;
}
.wide{
width:100%;
height: 100px;
background-color: antiquewhite;
}
/* 中央に配置したいならmargin:autoを利用すると良いとコメントをいただきました */
.center {
margin: 0 auto;
background-color: aqua;
width: 90%;
}
.parts{
width:20%;
float: left;
background-color: gray;
}
/* 画面サイズが480以下（スマホ）のときに適応されるCSS */
/* 変更点だけを書けばおk ！！ */
@media screen and (max-width:480px) {
.parts{
width:50%;
}
}