こんにちは、よりです。
2022年4月から学習を開始して、
2022年11月にお世話になったスクールから
案件のお話しがあり、
無事に2件納品することができました。
案件中は自分のやっていた学習などは全部ストップして
全集中で取り組みました。
そこでWeb制作のお仕事を進めていくにあたって
これは役に立った！というものを紹介したいと思います。
【Web制作】案件を進めていく上で役に立った知識 主にレスポンシブ対応
cssのclamp()を使ってフォントサイズのレスポンシブ！Min-Max-Value Interpolation
コーディングでレスポンシブするときに
私がいつも悩まされていたことの一つ、文字の大きさ問題。
いちいちブレークポイントで
ここはなんぼ、ここはなんぼって数字を書き込むので
ヒーヒーしていたんです。（なんぼって北海道弁？）
スクールで模擬案件を進めた時の
フィードバックで教えていただいたのが
cssでclamp()を使ってフォントサイズのレスポンシブ対応できるというもの。
私が参照した記事がこちら。
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator
実際の使用したサイトがこちら。
こちらにレスポンシブしたい幅を設定して
後はMAXのフォントサイズとMINのフォントサイズを入力して
ポチリとするだけでclamp()で計算された式が出てくるという優れもの。
これをペイ！と貼るだけで
文字の大きさについての
レスポンシブ対応できちゃってて、わたくし感動ものでした。
レスポンシブの画像差し替えにpictureタグ
こちらはモリさん（@MoRi_Coding）が以前ツイートしてくださっていた内容。
レスポンシブで画像を切り替えたい時に、
前まではdisplay:none;を指定してちまちま消したり出したりを
していたのですが、
こちらはpictureタグを使えばhtmlだけで
画像切り替えができるという優れもの。
こちらも参考にしたURLも載せておきます。
実際に使うコードはこちら。
<picture>
<source srcset=”画像url” media=”(min-width: 768px)” >
<img src=”画像url”>
</picuture>
sourceの部分にパソコンサイズで表示したい画像URLをつけて
imgの部分にスマホ画面で表示したい画像URLをつけるというもの。
mediaの部分でどの幅で切り替えたいか自分で設定できますし、
タブレット画面幅でも変えたいなどある場合は
sourceタグを増やせば対応できるそう。
こーれーはー便利！
画像差し替えをするとなると
レスポンシブでdisplay:none;を発動させたりしなかったりをしたり
倍の長さhtmlを書かなきゃならなかったりしますが
その手間がぐーんと下がります。
さらに、これをすることによって
画像自体が変わらなくとも
スマホ画面に切り替わるときに
スマホ用のサイズで保存した画像に
切り替えるようにすると
表示スピードの改善にも繋がるので
これはかなり使えるな〜、としみじみ思いました。
実際の案件対応する中で
他にもたくさん学ぶことが多かったので
そこについてはまた改めてまとめたいと思います！
