FlexboxとCSS Grid、実装ケーススタディ

全2回

実務で出会いそうなメッセージログのUIをHTMLとCSSだけを用いて組み立てます。いくつかの方法を検討することで、柔軟な考えができるようになりましょう。

後編 メッセージログのUIを仕上げる

前編で組み立てたUIの外側の部分と内側のメッセージ部分を組み合わせて、メッセージログのUI全体を作成します。実装は仕様どおりでも特定のブラウザでの挙動が想定とは異なる場合の対処も併せて解説します。

前編 メッセージログのUIの大枠を組み立てる

メッセージログのUIをHTMLとCSSで組み立ててみます。みなさんもUIのデザインと仕様から自分ならどう実装するか、一度考えてみてください。