こんにちは！aniumaでインターンをしているRyuseiです。今回はCSSでのレスポンシブ対応について学んだことをまとめていきます。
これまでHTMLやBEMの基本、Bootstrapの使い方を学んできましたが、今回はCSSでのレスポンシブ対応にフォーカスして、自分なりの工夫や気づきを残しておきたいと思います。
グリッドレイアウトの基本とレスポンシブ対応
CSSでレイアウトを組むとき、グリッドレイアウトを活用する場面が多いです。
たとえば、画像の横にテキストを配置する場合などに有用な方法がグリッドレイアウトです。
特に、親要素に row を指定して、子要素で横並びを作る方法が基本です。
ただし、これをレスポンシブに対応させる場合、画面サイズごとの表示のイメージをしっかり持ちながら作業を進める必要があると感じました。figmaなどで一旦のイメージを持っておくとUI作成がとても楽になります。
例えば、Bootstrapでいう lg や sm のように、画面幅によってクラスを切り替える方法をCSSでも考えながら作るのが大事。
「この幅の時はこのプロパティを適用する」というルールを、見本を手元に置いて確認しつつ進めるとスムーズに進められます。
TIPs
今回学んだ中で「これ便利だな」と思ったのは、
配置や大きさ、色などのプロパティをまとめたクラスを作っておき、それを必要な要素に適用するという方法です。
これにより、同じスタイルを複数の要素に適用する時も、効率よく作業できるし、後での修正もラクになります。
例えば：
text-box-centerクラスを作って、中央寄せのテキストを一発で作れるようにするd-flexを親要素につけて、要素が一つでも中央揃えにできるようにする（flexを前提にすることで応用力UP！）
今後の学習予定
次回は、トグルを使って情報の出し入れをする方法について学んでいく予定です！
具体的には、JavaScriptのイベントとCSSの組み合わせで、クリックしたら要素が表示・非表示になる仕組みを作っていこうと思います。
地道な学習の積み重ねで、少しずつできることが増えていくのが嬉しいです！
次回も頑張りますので、また見てくれると嬉しいです