間違いにより削除しました、

Question

質問者の通り問題がある可能性がありましたので削除致します
質問者の通り問題がある可能性がありましたので削除致します

Comments

[Y.H.]

これってビジネス的に公開していい画像なのでしょうか・・・
問題ないのなら良いのですが。

Answer 1

LP制作について

営利目的の 業務 でしょうから、「答え」はご自身で見つけるべきですので
結果ではなく方法論を回答いたします。

---

愚直に書いてゆく CSS では、以下の２つの手順で考えるのが定石です。

1. （画面に表示される）矩形の静的な位置、大まかなサイズ
2. （画面に表示される）矩形の装飾（着色、サイズに影響するフォント関連、transformなど）

ご質問からは 1. の部分が十分に整理されていないのに、2.の結果を求めているように感じました。

親要素が関係していると思う（中略）ここから崩してもう一度作るのがどうしてもむずかくできない

まずは思う部分を調べてゆくと良いと思います。

• position, display, margin, padding, top, right, bottom, left

に設定できる値が、親要素に設定された値に対してでどのように表示されるのか整理するべきです。
（覚えるパターンが少なかったCSS2時代では、displayに設定できる値も少なかったため、
float, margin の値を操作するネガティブマージンを駆使しました)

• border: solid 1px green; などで 矩形を表示させたスタティックなページを作り、位置やサイズの プロパティ調整方法 を調べてゆき、自分の引き出しに詰め込んでゆく（成果物を作るのと同じくらい重要です）。

矩形の位置やサイズは常に考察する必要があり、こればかりは、独自にレイアウトをいくつも考え、アウトプットしないと身につきません（何もしないと、忘れてしまい、思い出すのに時間がかかる）。
私も忘却防止のため、遊びで「CSSだけで画面の端（上下左右）に表示領域を作るような事」を試していますが、冒頭の 1. に的を絞り、2. は単純なCSSになっています。

CODE PEN CSSだけで画面の端に表示領域を作るような事

---

上記の定石に基づいて、CSSプロパティと値を整理できると、CSSプリプロセッサ用のソース も、プリプロセッサの構文を覚えるだけで読めるようになります。

Answer 2

質問内容に不適切な内容があったため削除しました。