レスポンシブ対応をしようと思ったら、見事にPCサイズのサイトデザインが崩れた。
崩れてしまったものはしょうがない。
初めてのレスポンシブ対応に四苦八苦しています。
元のhtmlの書き方が悪いのかとか、cssでの書き方で何がまずいのか、どこから手をつけたらいいのかと悩みながら検索してたどり着いた記事の備忘録になります。
他のサイトのレスポンシブ対応がどうなっているのかを確認しながら、ひとつひとつ潰しながら学ぶしかないです……。
まず、解決したい項目を列挙し、各項目に対する対策を一つずつ考えていきたいと思います。
まずレスポンシブ対応するために、何をしなければならないのか。
最初は単純に幅狭めたらどうなるかを確認したあと、基本的なレスポンシブ対応でするべき最低限のところは何か、と探しました。
レスポンシブWebデザインについて知っておきたいこと【コーディング編】
基本中の基本ですね。
内へのviewportの設定。 css内での`@media screen and (max-width: 680px)`の記述。 基本的なスタートラインはここからだと、せっせせっせと参考にしてソースに記述しました。PCサイズの時ではなく、タブレットサイズ以下のフォントサイズを画面に合わせて拡大縮小したい。
まず色々なサイトを見て気づいたことなのですが、画面幅に合わせてフォントサイズが変わっているのをよく目にしました。
最初は @media screen and (max-width: 680px)のmax-widthのサイズごとに、font-sizeを指定して、追記していこうと思っていたのですが、それとはまた違う方法が用いられているのかなと検索しました。
[CSS]レスポンシブ対応の文字サイズを指定するこれからのテクニック
自分が表示したい文字のサイズによって、計算式があるようなのですが、自動計算してくれるオンラインツールも紹介されていました。
[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる
もう少しレスポンシブ対応しやすいソースの書き方はないものだろうか、と思った中で出会ったGrid。
今回は使わない予定ですけれど、これを見かけたときは対応ブラウザを再度確認して、使えたら使いたいなと思いました。
あとで使ってみたいです。
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
まだレスポンシブ対応を学び始めたばかりなので、気になる記事をまた探したいです。