模写コーディングについて

最近ProgateのHTML&CSS編を終えたものです。
次に模写コーディングに取り掛かったのですが、どのサイトを見てもデベロッパツールは基本的に見ないことと書いてあります。しかし、Progateで習った知識だけで初見のWebサイトの構造を理解して1から自分で作り上げるのは難しいと思いました。(初心者なりにも見栄えだけはほとんど同じにできたのですが、paddingやmarginは本物になんとか近づけようと半ば強引に設定したので、レスポンシブデザインの時に困ったりと散々です、、、)
そこで、皆さんの経験をお伺いしたいのですが、基礎を学び終えたすぐ後に行った模写コーディングの手順だったり、模写を進める上での自分なりの設計のコツのようなものが有れば教えていただきたいです、よろしくお願いします！

行動規範の内容に同意します

回答1件

ベストアンサー

どのサイトを見てもデベロッパツールは基本的に見ないことと書いてあります。

まず自分が持っている知識だけで実装してみて、答え合わせ(=デベロッパツールを見る)
というのを繰り返すといいのでは、と思います。

ただし (私見ですが) HTMLやCSSは反面教師がものすごく多いので、1つのサイトに執着すると悪い癖が身についてしまう可能性もあります。そのため1つのサイトを忠実に再現するというより、複数サイトを見て、どういう書き方をしているサイトが多いのかを見るほうがよさそうに思えます。

初心者向けにこの部分は観察したほうがいいとう点を挙げてみます。いま思いつくのは以下です。

コンテンツの横並びを何で実装しているか (float: left;、display: table-cell;、display: flex;、display: grid;...)
枠線は何を使っているか (border、box-shadow)
<main>、<section>、<article>、<aside>などの使い方
marginとpaddingの使いどころ

投稿2020/05/18 12:57