きっかけ
求人をみてるとよく、レスポンシブ対応ができる人〜とあり
「あ、レスポンシブはやっとかないといけない項目だ！」と思って
ポートフォリオで使うことにしました。
いつもSassを使っているので今回も使っていきます！
（Sassって関数が使えるのを今回知りました〜）
導入と使い方
HTMLにviewportを記載する
参考サイト
もう逃げない。HTMLのviewportをちゃんと理解する
時間ができたら細かく噛み砕いてここに追記します。
メディアクエリをかく
今回はスマホ、タブレット、PCに対応させます。
参考サイト
SCSSの基本的な書き方
この、メディアクエリの部分を参考に書きました。
優先させたい画面サイズがもしスマホサイズなら、
スマホ対応メディアクエリから書いていき、最後にPCサイズのメディアクエリ
のように順番が変わるようです。
レスポンシブ対応した見た目を確認するときはChromeのデベロッパーツールで確認できます。
おわり
今回の記事はほぼ参考サイトを書くだけになってしまいました...
CSSは書くより見た目を考える方のが時間かかっちゃう気がします><
関係ないですが、スマホ対応について色々調べてたら
PWAなるものがあるらしく、やってみたいな〜って思いました。
PWAに興味を持っている人向けに概要とか動向とかをまとめた