はじめに
スマートフォンの普及をきっかけに、Web制作において
必須のスキルとなっているレスポンシブデザイン。
今回css記述の際に気をつける点を記述する。
参考文献
※kindle版は英語表記しか見つけれませんでした。
考え方
様々な解像度の下でWebサイトを表示させ、問題が生じたらメディアクエリを記述する。
→しかし、後々変更が必要になった場合、手間は倍となる。
メディアクエリを追加するたびにCSSのコードは不安定さを増す。
よって、ビューポートによって完全にデザインを切り替えたいなどの
最終手段としてメディアクエリを使うべきである。
以下に、
メディアクエリを回避するためのヒントを記述
※メディアクエリが悪いわけではなく、正しく使うべきという考え方。
①Widthは固定値ではなく、％を使う
学習初期では、よく固定値を多用して他のデザインに影響を与えてハマっていた。
・できる限りpaddingやmarginで表す。
・width: 〇〇px;ではなくwidth: 〇〇%;
・相対値（vw, vh, vmin,vmax）を使う。
②widthではなくmax-widthを使う
max-widthを使用することによって、メディアクエリを使用せずとも小さな画面に対応できる。
③置換要素ではmax-width: 100%;を忘れずに
置換要素→img,object,video,iframeなど
④background-size: cover;
背景画像がコンテナ全体を覆う必要がある場合にコンテナのサイズを記述する必要がなくなる。
※モバイル向けのデザインにて、大きな画像を縮小する場合は不具合も。
⑤column-widthを指定する
段組を使ってテキストを配置する場合に小さな画面では１段組みで表示する。
結論
大量のメディアクエリの記述が必要となった場合には
一歩戻ってコードの構造を見直すことが重要。
2,3個の簡単なメディアクエリでレイアウトをレスポンシブにできるように意識する。
cssは奥が深くもっともっと学習が必要であると感じた。
もう少し具体的に記述できるよう随時アップデートしていきたい。