メディアクエリ
書き方
@media screen and (max-width 640px) {}
新しい書き方
@media (width<=640px) {} こちらが簡単！
モバイルファースト方式がおすすめ
スマホ用を先に作ってPC版のメディアクエリを記述していく
HTMLの仕様上、上から記述していくので必然的に書く量が減るため
メディアクエリを書くときは一箇所にまとめて書くより、コンポーネントごとに書くと修正しやすいのでオススメ
スマホ、タブレットはタッチデバイス！ 指で直接触れるので、一目でボタンがわかるデザインにする
横幅可変のデザインにする（画面サイズが多種にわたるため）
ブレイクポイントをスマホ向け、タブレット向け、ＰＣ向けに作るので２箇所設定は必要
モバイルフレンドリーテスト
- タップ要素同士が近くなりすぎない
- 拡大しなければ読めないサイズはNG
- モバイル用のviewportを設定
- コンテンツがviewportからはみ出さない
- flashを使用しない
コンテンツファースト
まずコンテンツを洗い出して、最後にレイアウトをおこなう
- 画面に必要なものを洗い出し
- 重要度を考えて縦一列に書く
- コンテンツ同士をグルーピングしてレイアウトに展開
コーディング設計項目
- 文書構造設計 見出しなど
- 情報のグルーピング
- 画像ファイルの命名ルール
- セレクタ設計
- セレクタ命名ルールを一つに
- サイズ、色の指定統一
今日のひるごはん
