Udemy講師もやってます→u0u1.net/MGfzTwitterFacebookこんにちは。前回作った部分をレスポンシブにします。完成コードの確認まとめ最後に外枠の調整まずは外枠です。ここはちょっと特殊で、デバイス幅に依らずちょうど良い余白になるようinnerクラスの横幅を90%にします。続いて各セクションです。セクションの余白はinnerクラスで確保しているのでpaddingを0にします。marginも小さくします。4rem;}}続いて文字サイズを調整します。1.2rem;}}最後に画像とレイアウトを調整します。ここで前回orderプロパティを使った意味が出てきます。2rem;}}まずsection__contentクラスのdisplayをblockに戻します。これで要素が縦並びに戻りますが、html上での構造がsection2、3共に画像→テキストの順番になっているのでその通りに表示されます。PC版でorderプロパティを使って順番を変えたためこのように簡単に調整できます。あとは幅とmarginを整えます。15rem;}まとめさて、いかがでしたでしょうか。あるページを実際どんな風に作るのかを解説してみました。場面によって使うべきプロパティが違ったり、実現したいデザインによって適切な書き方が様々に異なります。プログラミング教育サービスでいの一番に紹介されるfloatプロパティは基本的に使いません。要素の横並べは特にこだわりがなければflexを使いましょう。他にも「こんなデザインの作り方が知りたい」というのがあればコメントしていただければ別記事で解説します。最後にここまで読んでいただきありがとうございました。長い記事になったので読むのも一苦労だったかと思います。今回解説した内容は実際の仕事で行う内容のごく一部です。「もっと勉強したい」「実際に仕事ができるようになりたい」という方がいらっしゃいましたら、そういう方向けにオンラインメンタリングサービスを行なっております。内容は以下の通りです。学習サポート仕事のサポート・学習サポートは主に普段の勉強の中での質問に答えることと、週1ペースでのメンタリング課題を提示したり、学習ロードマップ(後述)を提示しながら進めていく。仕事のサポートは、形式としては学習サポートと同じ。質問を受けたり週1でサポートしたり。仕事など、相手の方のタイプに合わせてこのような形で行なっております。ロードマップに関しては完全初心者の方からも対応可能になっております。先日もメンタリングをさせていただいている方が実際に仕事受けるところまで達成でき、非常に嬉しく思っております。ご興味がある方はTwitter(@hideki_climax)のDMでご相談を受け付けておりますのでぜひご連絡ください。最後まで読んでいただきありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。type="date"で、どこをクリックしてもカレンダーが表示されるようにする。〜メインコンテンツのエリア、footer(PC版)編〜RECOMMENDこちらの記事も人気です。auto;の正体を暴くHTML/CSS2019.3.29HTMLだけじゃない?emmetを使ってCSSを爆速で書く方法HTML/CSS2019.10.13Flexboxの初心者向けチュートリアル作ってみました。未分類2019.12.20プログラミング初心者から独学で学習したい人向けガイドライン【Web系】サイト制作とは2019.12.12【フリーランス志望は必読】Web制作の流れを改めておさらいするサイト制作とは2019.12.11【独学】初心者が3ヶ月でプログラミングをマスターする方法!【大公開】HTML/CSS2019.10.13Flexboxの初心者向けチュートリアル作ってみました。type="date"で、どこをクリックしてもカレンダーが表示されるようにする。