未来電子テクノロジーでインターンをしている mrm1027 です。
【プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし誤りがある場合は、すぐさま修正しますのでどんどん指摘してください。】
プログラミングを始めて、実はまる2ヶ月が経ちました。
自由課題は終盤に差し迫ってきています。
先輩プログラマーさんからの手助けを借りつつ、着々と進めていて楽しいです！
そして、今回は私が名前を思い出してもどんなものだったか思い出せない「メディアクエリ」について、
自分の復習がてらここにまとめていきます。
メディアクエリと聞いてピンとくる方はなかなか勉強されている証拠ですね。
ズバリ、メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法です。
こんな感じで、画面の大きさによってズレやバグが生じないようにできるのがメディアクエリです。
つまり、画面サイズごとに表示されるデザインを整えられるのです。
また、メディアクエリの条件として、
max-width(最大幅)
または
min-width(最小幅) を指定できます。
具体的に「max-width: 30px」を指定すると、画面幅が30pxより小さい時にCSSを適用できます。
逆に、min-widthはその反対です。
画面幅が30pxより大きい時にCSSを適用できます。
画像切り替えの実装もできたことで、ついに自由課題が完結しそうです！
結構こだわりたい人ではあるので、細かいところを修正しだしたら次の課題に進めないので、
今回はあと少しデザインをいじったら提出したいと思います。
もっとコードを書くのが早くなれたら、その分でできる時間でデザイン性にもこだわりたい。。
これからもどんどん学習を進めていきます！