【HTML・CSS学習】dl dt dd の続き

こんにちは、もなです。

模写コーディングをしながら、日々新しいことに触れています。
昨日はまた新たな表の作り方を発見し、「こんなやり方もあるのか！」と驚きですぐVSCodeを開きました。

今までは
・各項目をdivで囲いdisplay:flexで横並びにして、paddingやmarginで調節
・tableタグを使う

だったのが、

・dl.dt.ddを使い、calcで幅を調整
という、つい最近学習した「dl dt dd」を使用する方法。
前は頭がごちゃごちゃしていてあまりわかっていなかったけど、そこへスッと「dl dt dd」が入ってきてくれました。こういう風に使うんだ！と。

更に、display: flex　flex-direction: columnでレスポンシブにも簡単に対応でき、「なるほど！」とレスポンシブ学習中の今の自分に強烈なインパクトを与えてくれました。
flex-direction: columnはこういう時に使うんですね。やっぱ実際に書いてみて動きを見るのが一番！
情報の渦に飲まれすぎないよう気を付けつつ、いろいろと探す時間も良いですね。