2022年3月27日の成果

リュウ

今日出来たこと

デイトラWeb制作コース初級編DAY5～DAY7

今日の気付きとまとめ

動画を見ながら練習用のサイトをコーディング。
特段苦戦はしなかったけど、ブロック分けとかスタイルの使い回しが解説されてて他の教材との違いを感じた。

コーディングする事に終始してる教材が多い中でも最初から考え方の部分に触れてる教材は中々無いと思う。

特にブロック分けとスタイルの使い回しは実務でも上手く出来てない時があるのでより強く意識すると同時に今後の課題として取り組んでいきたい。

border-radiusで新たに分かったことがあるので以下に参考記事とまとめ。

border-radius

DAY6の02でお問い合わせフォームのメールアドレスを入力する欄を角丸にする際にborder-radius: 999pxという見たことが無い方法が。
動画の解説では「角を丸くしたときは限りなく大きい値を」となっていましたが、いまいちピンと来なかったので詳しく調べると以下の記事にたどり着く。

角を丸くする=border-radius: 50%のイメージしかなかったけどこの方法だと長方形などの縦横幅が異なるボックスを角丸にする時に楕円形になってしまう。

理由としては、50%という値はborder-radiusを掛けた要素のwidthとheightの半径となり、その値が適用されるから。

例えばwidth: 300pxとheight: 150pxの長方形があったとしたらborder-radius: 50%はwidth: 300px＝150px・height: 150px＝75pxとなり縦横で違う値が適用される。

今回のような縦横幅が異なる長円形でborder-radius: 50%としてしまうと縦横に異なった値が適用されて楕円形になってしまう。

これを解決するのがborder-radius: 999pxでこちらは適用するボックスの短い方の寸法を基準にするので縦横で同じ値を適用することが出来る。

先ほどの例で表すとwidth: 300pxとheight: 150pxの長方形があったとしたらheight: 150pxが基準となる。height: 150pxの半径は75pxなので四隅に75pxが適用される。

このborder-radius: 999pxのメリットは適用している要素のwidthとheightが変更されても影響を受けないという点。適当に100pxとかを当てていてもwidthとheightが変わってしまえばどうなるのか分からないのでこの点が大きな違い。

実際に使用するときは値を999pxではなく9999pxにした方が良さそう。
999pxだと1000pxを超えたときに対応できないので。

長円形のボタンなどは結構頻出のデザインなので今後は活用していきたい。


この記事が気に入ったらサポートをしてみませんか？