2019年6月28日2日に分けて7時間で完成しましたが、自分ではかなり苦戦した感じがします。「新着情報」のコーディングで完全に手が止まりましたwこの模写の中で出てきたのが、画像とテキストを交互に表示するデザインです。今回は、復習もかねてまとめておきたいと思います。画像」の順に変更できる。2019年6月27日このようにツイートでまとめていまして、実際に実装してみたいと思います。row-reverse;}を新たに記述します。nth-childという擬似要素を使うことで、特定の要素だけにCSSを当てることができます。「最後の要素」のlast-childも擬似要素ですね。↓擬似要素の使い方は、こちらが参考になります。擬似要素「:nth-child()」は、()の中に数字や計算式を入れてもいいらしい。2019年6月27日レスポンシブ対応(上下に配置)上下に配置する方法は単純で、メディアクエリを使って調整するだけです。row-reverse;をつけているので、横並びのままになっているため、そこを修正する必要があります。column;」を記述すればオッケーです。CodePen.こんな感じです。見辛いと思うので、右上のcodepenアイコンをクリックして、拡大して確認してみてください。ちなみに、Bootstrapでもこのレイアウトは可能です。Bootstrapを素直に使っておけば楽チンかもしれません。【Bootstrap4】ドットインストールを復習して学んだ内容まとめドットインストールのBootstrap4入門を完走してみて、学んだことをまとめてみたいと思います。「navbar」と「グリッドシステムの応用」の知識を学習できました。...まとめ:flexboxのレイアウトパターンを知っておくflexboxは超便利。これからも使うことはかなり多いはず。どんなレイアウトパターンが多いのか、ざっと把握しておく必要があります。「flexboxはこんなことができる」とわかっていると、デザインをみた時に何でコーディングをすれば良いかがすぐにわかりそうですね。XDコードから模写できるちづみさんのnoteは、とにかく勉強になりました。勉強しなければ、、さ、コード書こう。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。