【初学者向け】flexboxを使ってレスポンシブ対応の練習をしよう！ - Qiita

初学者さん向けの記事です。 レスポンシブに欠かせないflexBoxを使って、画面サイズにあったコンテンツ作りを練習して行きたいと思います。 かくいう自分も最初の頃は、これから紹介するやり方でなんとなくレスポンシブを理解したところから始めました。今回はそれを紹介ししながら、一緒に手を動かしながらコーディングできれば思います。 レジュメ 1.ブロックを作る。 →まずは文字なしでブロックのみを使って、flexboxを体感的に学びます。 2.レスポンシブ対応 →各サイズの画面でも自然な形になるようにコードを追加していきます。 3.モバイルファーストなコードに書き換えます。 →分かりやすいように最初はPCファーストな書き方で書きます。ですが基本的にはモバイルファーストで書くのが主流なのでこれに書き換えます。 4.より実践的な形にする。 →世の中に出回っているサイトを見本に本物WEBページの一部っぽく