webの模写コーディングでソースコードを似せる必要はあるか

Question

何をデザインするにしても当然、様々な書き方があるため初心者の私にとっては外見だけでなく、ソースコードまで同様に書くことは困難です。
スキルアップにおいて、webの模写は外見だけでなくソースコードまでを類似させる必要はありますか？

Accepted Answer

1つの意見として..

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

見たことがない記述があれば↓などでチェック
https://developer.mozilla.org/ja/

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

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

あまり優先度高くないと思うのですが、<dl>は、多くのサイトで推奨されない書き方になっているような気がします。中級者以上の人は↓見てみたほうがいいと思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl
https://www.w3.org/TR/html52/grouping-content.html#the-dl-element

`、`

Answer

> 様々な書き方があるため初心者の私

という条件だけなら個人的には必要ないと思いますが、

質問者の性格なら答え合わせをした方が良いでしょう
前回の質問の回答で納得行っていなさそうな点と答え合わせを前提としている質問内容から察するに、答え合わせをしろという回答のみを待っているように思えます。さらには今回の質問をしている点も含めて考慮すると質問者は頑固な性格です。
そのようなタイプは人にどう言われるかではなくまずは自身で納得行くまでhtmlを真似るなり似せるなりして、その作業自体に対する効果や考え方を実践経験以てして判断すると良いでしょう。

頑固が良いか悪いかではありません。性格に合った学習の仕方があるだけです。

Answer

類似質問：[模写コーディングに「答え合わせ」は必要か](https://teratail.com/questions/260738)

質問者は~~無反応~~（訂正）回答に高評価だけして未解決ですが、回答も寄せられているので、是非、参考にしてください。

ちなみにその質問の投稿者はあなたです。

Answer

模写コーディングの目的は、自身のコーディングスキルのアップですよね。

一つのレイアウト、デザインを実現するにもいろいろな方法があります。
どれが正解ということはありません。（より最適な方法、スマートな方法ということはありますが。）

模写先と外見が同じにできたということはそれだけのスキルがついたということですので、同じにする必要はないと思います。

そのうえで、自分とコードと模写先のコードを比べてみて、違いがあるなら、その意味を調べることで別の方法を学ぶことができます。これもスキルアップにつながります。

Answer

> スキルアップにおいて、webの模写は外見だけでなくソースコードまでを類似させる必要はありますか？

ものによります（たとえば、「圧縮や難読化などのために改行を削ったコード」を真似する必要はありません）。

もう少し具体的に状況を説明していただけないでしょうか？

関連した質問