メディアクエリの作成
sample.css
/*PCサイズでは赤に*/
h1 {
color: red;
}
/*タブレットサイズでは青に*/
@media (max-width: 1000px) {
h1 {
color: blue;
}
}
/*スマホサイズでは緑に*/
@media (max-width: 670px) {
h1 {
color: green;
}
}
index.html
<!--viewportを設定することで、メディアクエリを有効化-->
<head>
<!--下記をheadタグに追加-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
レイアウト崩れの対処（box-sizing）
sample.css
.item {
width: 25%;
float: left;
/*25%に15pxのpaddingが含まれず、レイアウトが崩れる*/
padding: 0 15px;
}
/*下記を指定することで、paddingやボーダーも含めて25%になる*/
* {
box-sizing: border-box;
}
レイアウト崩れの対処（clear）
sample.html
<!--childがfloatされてる場合、parentの高さが0になる-->
<div class="parent">
<div class="child"></div>
<div class="clear"></div>
</div>
sample.css
/*parentの高さをchildに合わせるため、clearを指定*/
.clear {
clear: both;
}
その他ポイント
・pxではなく%の指定に変える。
・フォントやボタンのサイズ、余白を見やすさに応じて変更。
・非常に大きい画面を想定し、max-widthを設定。
（例）max-width: 1170px; width: 100%;
・ヘッダ部などをテキストからアイコンに変えるなど、見やすくする。