添付画像のようにデザインするにはどのように作ればいいんですか

質問
①画面サイズの決定
②4つの大枠があると思いますがこの大枠はDIVで幅と高さのサイズを決定する？
③４つの大枠の1段目は2つの枠に分かれるが2つの枠の幅と高さのサイズを決定する？
④4つの大枠の1段目の左側と右側どうやって情報を画面に収める
⑤ここの枠は基本的にTABLE？
⑥画面を最大化やサイズ変更しても見やすいレイアウトにするには？
⑦基本的にどこからてをつけていいのかわからない
⑧早く技術を身に着けるためにCSSの何を勉強すればいい？
⑨業務システムはテーブルが多く普通の広告ホームページと違うので何を参考に作っていけばいい
⑩業務システムのCSSで必要な知識は何から勉強すればいい




全部回答くださいというわけではありません

No.1 回答者： debu120t 回答日時： 2021/04/14 22:43

技術がそんなにもないとわかっていながらも、挑戦してみたいというわけですね。

あたしならそこまで自身の技術の範囲外なら1000万つまれても断ります。危ないので自信がなければ断る勇気も必要です。

と言っても、質問はどこから手を付ければいいかわからない、というところからですよね。
はい、最も簡単で早いのは、まるパクリです。
ソースコードとリソースファイル（CSSとか画像とか）を丸ごとダウンロードして、自前の公開していないサーバーにでもアップして、研究することです。もちろんそのまま公開してしまったら著作侵害になりますのでやってはいけません。学習にとどめてください。
いろいろ書き換えてみます。CSSやHTMLなんかを書き換えて、目的の仕様に近づけてみたりなどなど、ある程度把握できてくれば、それほど難しくない構造だとわかってくるはずです。参考のサイトがどのようにサイズを決めているのかなどがわかってくれば質問に挙がっていることの回答がおのずと導き出されると思います。

わからないところから始めるので簡単ではないと思いますが、研究に時間をかけると必ず解決に近づくと思います。ある程度把握したあとの加速は想像以上に速いので、日にちや時間をかけてじっくり取り組んでもロスは小さいです。

参考サイトの構造はわかりませんが、以下がヒントになるかもです。
・リキッドデザイン（画面のサイズに合わせたCSSのレイアウト）
・iframe（他のページから情報を読み込む。最近は使わないなあ）
・Ajax（ページ外から情報を得て、取り換えれる。更新ボタンみたいなのが見えたので）

私見ですが、このようなレイアウトの場合は、サイト幅のmin-width（1280くらいかな）は決めておいて、あとは無限に伸びるようにしますかね。
レスポンシブで、画面幅980以下は縦積みにすると思う。

質問は箇条書きでわかりやすいのですが、不躾すぎるため回答が付きづらいです。進めていく段階でも質問することがあれば、もう少し自分でなにかをやってみて、詰まったところから質問していくとスムースだと思います。