【学習日記#7】CSSでレスポンシブ対応に挑戦!グリッドレイアウトや便利なクラス作成のポイントまとめ

こんにちは!Ryuseiです。今回はCSSでのレスポンシブ対応について学んだことをまとめていきます。
これまでHTMLやBEMの基本、Bootstrapの使い方を学んできましたが、今回はCSSでのレスポンシブ対応にフォーカスして、自分なりの工夫や気づきを残しておきたいと思います。


🏗 グリッドレイアウトの基本とレスポンシブ対応

CSSでレイアウトを組むとき、グリッドレイアウトを活用する場面が多いです。
特に、親要素に row を指定して、子要素で横並びを作る方法が基本。
ただし、これをレスポンシブに対応させる場合、画面サイズごとの表示のイメージをしっかり持ちながら作業を進める必要があると感じました。

例えば、Bootstrapでいう lgsm のように、画面幅によってクラスを切り替える方法をCSSでも考えながら作るのが大事。
「この幅の時はこのプロパティを適用する」というルールを、見本を手元に置いて確認しつつ進めるとスムーズに進められます。


💡 こうすると便利!と思ったこと

今回学んだ中で「これ便利だな」と思ったのは、
配置や大きさ、色などのプロパティをまとめたクラスを作っておき、それを必要な要素に適用するという方法です。
これにより、同じスタイルを複数の要素に適用する時も、効率よく作業できるし、後での修正もラクになります。

例えば:

  • text-box-center クラスを作って、中央寄せのテキストを一発で作れるようにする
  • d-flex を親要素につけて、要素が一つでも中央揃えにできるようにする(flex を前提にすることで応用力UP!)

🔥 次回の学習予定

次回は、トグルを使って情報の出し入れをする方法について学んでいく予定です!
具体的には、JavaScriptのイベントとCSSの組み合わせで、クリックしたら要素が表示・非表示になる仕組みを作っていこうと思います。


地道な学習の積み重ねで、少しずつできることが増えていくのが嬉しいです!
次回も頑張りますので、また見てくれると嬉しいです