これはしょーごさんという方のネット上のコーディング課題です。
このデザインカンプを見たときに「ちょっとやってみたいな」と思ったので取り組むことにしました。
このデザインカンプでは1366pxで設定されており、ほとんどのデザインが1366px内に収まっています。
けれど青い円だけは1366pxからはみ出しており、右側がすこし途切れた状態になっていました。その途切れが気になっていました。
この青い円は画面サイズが1366pxであれば、右側が一部途切れる仕様です。
では画面サイズが1366pxを超えたとき、青い円はどのようなデザインになるのでしょうか？ そしてそのデザインを実現するためにどのようなコーディングをすればいいのでしょうか？ そこが私が気になっていた点です。
このコーディングをするにあたって、私は3つの方法を思いつきました。
1つ目は、単純に青い円を画面の右端に円が途切れた状態で配置する方法です。円を右端に配置する以外に特別な対策はしません。
2つ目は、画面サイズ1366pxまではデザインが途切れた状態だが、画面サイズが1366pxを超えると少しずつ円が現れ、画面を拡大し続けると最終的に完全な円が出現すという方法です。
3つ目は、このサイト全体をremやvwを使って作成する方法です。remやvwを使うと画面サイズに応じでデザインを拡大縮小できるため、画面サイズに関わらず常にデザインカンプそのままのデザインが表示できます。
これら3つの方法のうち、どの方法を取ればいいのでしょうか？
3つ目のrem、vwを使う方法はどんな画面サイズであっても同じデザインが表示されるので優れた方法ではあります。
しかしrem、vwを使う方法は通常の設定をrem、vwに変換するのにひと手間かかります。またその他にも使用にあたって考慮しなければならないことがあるため、今回はこの方法は見送りました。
この中で一番簡単に作れそうなのはどれかという観点から見ると、やはり1つ目の方法が一番簡便そうです。
けれど単純に青い円を右端に配置するだけだと、画面を拡大するにつれて青い円のみが画面中央から離れるか、あるいは青い円だけが（その他のデザインは拡大しないのに）拡大し続けることになると思われます。
ですがこれではデザイン的にきれいとは言えませんね。
またこの円はかなり特徴的な配置になっています。ある程度の大きさがあり、グラデーションもきれいで見栄えもいいのだから、この円を活かしたいと思いました。
そこで私は2つ目の方法を採ることにしました。この方法だと、他の箇所のデザインとのバランスが崩れることもないし、円の見栄えも活かせます。
ただ実際にこの方法を採用するにあたってはコーディングに苦労しましたね。
このデザインを実現するためには円の配置方法（前面に置くか、背景にするか）を考えたり、imgプロパティやoverflowプロパティをうまく組み合わせればできるはずです。
ですがなかなかうまく組み合わさらず苦労しました。
最終的には思い通りにまんまるの円が出現してくれたので大変満足しています。